.elementor-kit-11{--e-global-color-primary:#7E44E5;--e-global-color-secondary:#FAF5FF;--e-global-color-text:#584E67;--e-global-color-accent:#E05B7C;--e-global-color-c76309a:#2B1453;--e-global-color-2c3bf6e:#11277F;--e-global-typography-primary-font-family:"Winsky";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-letter-spacing:0.8px;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:0.2px;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFBF6;color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11 a{color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-11 h1{color:var( --e-global-color-secondary );font-family:"Winsky", Sans-serif;font-size:54px;font-weight:400;letter-spacing:0.8px;}.elementor-kit-11 h2{color:var( --e-global-color-secondary );font-family:"Winsky", Sans-serif;font-size:42px;font-weight:400;letter-spacing:0.8px;}.elementor-kit-11 h3{color:var( --e-global-color-c76309a );font-family:"Winsky", Sans-serif;font-size:34px;font-weight:400;letter-spacing:0.8px;}.elementor-kit-11 h4{color:var( --e-global-color-secondary );font-family:"Winsky", Sans-serif;font-size:24px;font-weight:400;letter-spacing:0.8px;}.elementor-kit-11 button,.elementor-kit-11 input[type="button"],.elementor-kit-11 input[type="submit"],.elementor-kit-11 .elementor-button{font-family:"Winsky", Sans-serif;font-size:20px;font-weight:400;letter-spacing:0.8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-11{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-11 a{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-11{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-11 a{font-size:var( --e-global-typography-text-font-size );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Primary:#7E44E5; --subtitle:#2B1453; --background:#FAF5FF; --Text-color:#584E67; --Accentuation:#E05B7C; }
/* Start custom CSS *//* Main */

.creanime-content-box{
    max-width: 1400px;
    width: 100%;
    justify-self: center;
}

p{
    font-family: "Outfit" !important;
}

.title-highlight{
    position: relative;
    color: #7E44E5;
    font-weight: 500;
    -webkit-text-stroke: 10px #7E44E5;
    paint-order: stroke fill;
    z-index: 5;
    width: fit-content;
}

.title-highlight:before {
    content: "";
    display: block;
    width: calc(100% + 20px);
    height: 16px;
    background: #7E44E5;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 5px;
    transform: translateX(-50%);
    z-index: -1;
}

/* Product grid */

.product-grid-primary{
    --button-color: #7E44E5;
}

.product-grid-enfant{
    --button-color: #E05B7C;
}

[class*="product-grid-"] li{
    overflow: hidden;
    padding: 4px !important;
}

[class*="product-grid-"] li img{
    border-radius: 26px;
    margin-bottom: 10px !important;
}

[class*="product-grid-"] li h2, [class*="product-grid-"] li > a > span{
    padding: 16px 16px 0px 16px !important;
    margin: 0 !important;
}

[class*="product-grid-"] li h2{
    display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 59px;
      align-items: center;
}

[class*="product-grid-"] li > a > span > *{
    font-family: Outfit !important;
}

[class*="product-grid-"] li bdi{
    color: var(--button-color) !important;
}

[class*="product-grid-"] li.product-type-variable .price:before{
    content: "à partir de";
    font-size: 16px;
    font-weight: 400;
    color: #584E67;
    margin-right: 5px;
}

[class*="product-grid-"] li.product-type-variable .price span:not(:first-child){
    display: none !important;
}

[class*="product-grid-"] .button{
    display: flex;
    width: -webkit-fill-available;
    margin: 16px !important;
    box-sizing: border-box !important;
    border-radius: 60px !important;
    padding: 16px 24px !important;
    text-align: center;
    color: #FAF5FF !important;
    font-family: Winksy !important;
    font-size: 18px !important;
    letter-spacing: 1.1px;
    background: var(--button-color) !important;
}

/* Large button */

[class*="button-"] a span{
    font-family: Winksy !important;
    font-weight: 100;
}

[class*="button-large"]{
    display: flex;
    flex-direction: row;
    height: 58px;
    border-radius: 60px !important;
    overflow: hidden;
    padding: 0px !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);;
}

.button-large-primary{
    background: #7E44E5;
}

[class*="button-large"] a, [class*="button-small"] a>  span{
    display: flex;
    height : 100% !important;
    width: 100% !important;
    background: none !important;
    z-index: 2;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
}

[class*="button-large"] a> span{
    z-index: 5;
    border: 4px solid #FAF5FF;
    height: 100%;
    width: 100%;
    border-radius: 60px;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    color: #FAF5FF;
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[class*="button-large"] a:before, [class*="button-large"] a:after{
    content:"";
    display:block;
    width: 80px;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%) rotate(-15deg);
    z-index: 0;
    transition: all 0.2s ease-out;
}

[class*="button-large"] a:before{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/Creanime-secondary-favicon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    opacity: 0.3;
}

[class*="button-large"] a:after{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/Creanime-primary-color-favicon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    opacity: 0;
}

[class*="button-large"]:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #FAF5FF;
    border-radius: 60px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[class*="button-large"]:hover{
    transform: scale(1.02);
}

[class*="button-large"]:hover::after{
    transform: translateX(0%);
}

[class*="button-large"]:hover a:after{
    opacity: 0.15;
}

[class*="button-large"]:hover a> span{
    color: #7E44E5;
}


/* button */

[class*="button-small"]{
    display: flex;
    flex-direction: row;
    height: 52px;
    border-radius: 60px !important;
    overflow: hidden;
    padding: 0px !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);;
}

[class*="button-small"] a, [class*="button-small"] a>  span{
    display: flex;
    height : 100% !important;
    width: 100% !important;
    background: none !important;
    z-index: 2;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    border-radius: 60px;
}

[class*="button-small"] a> span{
    z-index: 5;
    border: 4px solid #FAF5FF;
}

[class*="button-small"] a:before, [class*="button-small"] a:after{
    content:"";
    display:block;
    width: 80px;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%) rotate(-15deg);
    z-index: 0;
    opacity: 0.3;
    transition: all 0.2s ease-out;
}

[class*="button-small"] a:before{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/Creanime-secondary-favicon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    opacity: 0.3;
}

[class*="button-small"] a:after{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/Creanime-primary-color-favicon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    opacity: 0;
}

[class*="button-small"]:after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #7E44E5;
    border-radius: 60px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[class*="button-small"]:hover{
    transform: scale(1.02);
}

[class*="button-small"]:hover::after{
    transform: translateX(0%);
}

[class*="button-small"]:hover a:after{
    opacity: 0.1;
}

#menu-collection-enfant-button, #menu-collection-adulte-button{
    width: calc(100% - 20px);
    box-sizing: border-box;
    top: calc(100% - 64px);
    left: 10px;
}

.button-small-secondary{
    background: #E05B7C !important;
}

.button-small-secondary:after, .button-small-adulte:after{
    background: #FAF5FF !important;
}

.button-small-secondary a, .button-small-adulte a{
    color: #FAF5FF !important;
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);;
}

.button-small-secondary a:after{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/Creanime-pink-favicon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.button-small-secondary:hover a{
    color: #E05B7C !important;
}

.button-small-adulte{
    background: #11277F !important;
}

.button-small-adulte:hover a{
    color: #11277F !important;
}

.button-small-adulte a:after{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/Creanime-blue-favicon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* menu */

.menu-list img{
    display: none !important;
}

.menu-list a{
    display: flex;
    width: fit-content;
    padding-right:10px;
    position: relative;
    overflow: hidden;
}

.menu-list h2{
    width: fit-content;
    z-index: 2;
}

.menu-list a:before{
    content :"";
    display: block;
    width: 100%;
    height: 8px;
    background: #7E44E5;
    border-radius: 10px;
    z-index: 0;
    opacity: 0.15;
    position: absolute;
    bottom: 7px;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-list a:hover h2{
    color: #2B1453 !important;
    font-weight: 500 !important;
}

.menu-list a:hover::before{
    transform: translateX(0);
}

.menu-thematiques-list{
    width: 100%;
}

.menu-thematiques-list li{
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}


.menu-thematiques-list a{
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);;
}

.menu-thematiques-list img{
    border-radius: 30px;
    margin: 0 !important;
}

.menu-thematiques-list h2{
    font-size: 0px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #FFFFFF;
    width: fit-content;
    height: 44px;
    padding: 0 14px 0 24px !important;
    border-radius: 60px;
    gap: 0px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 80px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease-out;
}

.menu-thematiques-list h2:before{
    content: "Découvrir";
    font-size: 16px !important;
    color: #2B1453;
    font-family: Outfit;
    font-weight: 500;
    position: relative;
}

.menu-thematiques-list h2:after{
    content:"";
    display: block;
    width: 24px;
    aspect-ratio: 1;
    background: url("https://creanime.fr/wp-content/uploads/2026/08/right-arrow-blue.svg");
    background-size: cover;
    background-position: center center;
    margin-left: -18px;
}

.menu-thematiques-list li:hover a{
    transform: scale(1.03) !important;
}

.menu-thematiques-list li:hover h2{
    transform: translate(-50%, 0px);
    opacity: 1;
}

/* menu links*/

.menu-link{
    display: flex;
    flex-direction: row;
    gap: 2px;
    width: fit-content;
    height: 100%;
    align-items: center;
    cursor: pointer;
}

.menu-link:after{
    content:"";
    display: block;
    width: 24px;
    aspect-ratio: 1;
    background: url("https://creanime.fr/wp-content/uploads/2026/08/down-arrow.svg");
    margin-bottom: 2px;
}

/* panels menu */

.menu-collection-enfant, .menu-collection-adulte, .menu-thematiques{
    opacity: 1;
    transform: translateY(-100%);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-collection-enfant.active, .menu-collection-adulte.active, .menu-thematiques.active{
    opacity: 1;
    transform: translateY(0%);
}

.menu-collection-enfant > div, .menu-collection-adulte > div, .menu-thematiques-list li{
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.1s;
    transition-delay: 0s;
}

.menu-collection-enfant.active > div, .menu-collection-adulte.active > div, .menu-thematiques.active .menu-thematiques-list li{
    opacity: 1;
    transform: translateX(0px);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease-out;
}

.menu-collection-enfant.active > div:nth-child(1), .menu-collection-adulte.active > div:nth-child(1), .menu-thematiques.active .menu-thematiques-list li:nth-child(1){
    transition-delay: 0.2s;
}

.menu-collection-enfant.active > div:nth-child(2), .menu-collection-adulte.active > div:nth-child(2), .menu-thematiques.active .menu-thematiques-list li:nth-child(2){
    transition-delay: 0.3s;
}

.menu-collection-enfant.active > div:nth-child(3), .menu-collection-adulte.active > div:nth-child(3), .menu-thematiques.active .menu-thematiques-list li:nth-child(3){
    transition-delay: 0.4s;
}

.menu-collection-enfant.active > div:nth-child(4), .menu-collection-adulte.active > div:nth-child(4), .menu-thematiques.active .menu-thematiques-list li:nth-child(4){
    transition-delay: 0.5s;
}

.menu-collection-enfant.active > div:nth-child(5), .menu-collection-adulte.active > div:nth-child(5), .menu-thematiques.active .menu-thematiques-list li:nth-child(5){
    transition-delay: 0.6s;
}



/* navbar */

#navbar{
    max-width: 1560px;
    left: 50%;
    transform: translateX(-50%);
}

.header-logo{
    min-width: 136px !important;
    aspect-ratio: 136/24 !important;
    margin: 0px 0px 8px 0px !important;
}


.cart-button #elementor-menu-cart__toggle_button, .profile-button{
    display: flex !important;
    position: relative;
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: 1;
    border-radius: 60px;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0;
}

.cart-button #elementor-menu-cart__toggle_button svg, .profile-button svg{
    width: 30px !important;
    height: 30px !important;
    aspect-ratio: 1;
    z-index: 10;
}

.cart-button #elementor-menu-cart__toggle_button svg{
    margin-right: 2px;
}

.cart-button #elementor-menu-cart__toggle_button:before, .profile-button:before{
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background: #7E44E5;
    position: absolute;
    border-radius: 60px;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}


.cart-button #elementor-menu-cart__toggle_button:hover::before, .profile-button:hover::before{
    opacity: 1;
}

.cart-button #elementor-menu-cart__toggle_button .elementor-button-icon-qty{
    font-family: Outfit;
    font-weight: 800;
    background-color: #E05B7C;
}


.search{
    width: 100%;
}

#ajaxsearchlite1 .probox, div.asl_w .probox{
    display: flex;
    height: 44px !important;
    padding: 10px 0px 10px 4px !important;
    align-items: center;
    border: 0px solid #7E44E5 !important;
    width: 100%;
    box-sizing: border-box;
    background: #FAF5FF !important;
}

#ajaxsearchlite1 .probox .proinput input, div.asl_w .probox .proinput input{
    font-family: Outfil;
    font-size: 14px !important;
    color: #584E67 !important;
}

#ajaxsearchlite1 .probox .proinput, div.asl_w .probox .proinput{
    margin-bottom: 6px;
}

.search button{
    display: flex;
    position: relative;
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    border-radius: 60px !important;
    margin-right: -1px !important;
}

.search button:before{
    content:"";
    display: block;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    background: #7E44E5;
    border-radius: 60px;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.search button span{
    background: url("https://creanime.fr/wp-content/uploads/2026/08/search.svg");
    background-size: cover !important;
    background-position: center center;
    width: 30px !important;
    height: 30px !important;
    aspect-ratio: 1;
    z-index: 5;
}

.search button span > *{
    display: none !important;
}

.search button:hover:before{
    opacity: 1;
}


/* Homepage */

/* Hero Header */

.hero-slider .elementor-main-swiper{
    margin: 0;
    width: 100% !important;
    border-radius: 30px;
}

.hero-slider .swiper-slide{
    position: relative;
    aspect-ratio: 1.78/1 !important;
    height: auto !important;
    border-radius: 30px;
    overflow: hidden;
}

.hero-slider .swiper-slide:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: 6px solid #FFFFFF ;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
}

/* hero trust marks */

.hero-trust-marks{
    display: flex;
    position: relative;
    margin-bottom: 80px;
    justify-content: center;
}

.hero-trust-marks-content{
    max-width: 1400px;
}

.hero-trust-marks:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
    height: 80px;
    background: url("https://creanime.fr/wp-content/uploads/2026/08/hero-trust-marks-top.svg");
    background-size: contain;
    background-repeat: repeat-x;
}

.hero-trust-marks:after{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -80px;
    width: 100%;
    height: 80px;
    background: url("https://creanime.fr/wp-content/uploads/2026/08/hero-trust-marks-bottom.svg");
    background-size: contain;
    background-repeat: repeat-x;
}

/* Our works section */
.our-works-section{
    gap: 60px;
    padding: 100px 0 !important;
    margin: 70px 0;
}

.our-works-section:before{
    content:"";
    display: block;
    width: 100%;
    height: 70px;
    background: url("https://creanime.fr/wp-content/uploads/2026/10/beige-wave-top-1.svg");
    position: absolute;
    top: -70px;
    left: 0;
}

.our-works-section:after{
    content:"";
    display: block;
    width: 100%;
    height: 70px;
    background: url("https://creanime.fr/wp-content/uploads/2026/10/beige-wave-bottom-1.svg");
    position: absolute;
    bottom: -70px;
    left: 0;
}

.our-works-item{
    border-radius: 30px;
    padding: 60px !important;
}

.our-works-item-icon{
    width: 140px !important;
    height: 140px !important;
}

.our-works-item-content h3{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.our-works-item-content h3:after{
    content:"";
    display: block;
    width: 40px;
    height: 5px;
    border-radius: 8px;
    background: #7E44E5;
}

.our-works-item-content h6{
    display: flex;
    flex-direction: row;
    align-items: center;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Winsky';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://creanime.fr/wp-content/uploads/2026/08/Winksy-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */