<style>

html.wf-design-mode .preloader {
	display: none;
}

a {
	color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

/* Make text look crisper and more legible in all browsers */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none !important;
}

/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
	margin-bottom: 0 !important;
}


/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}

/* 
Make the following elements inherit typography styles from the parent and not have hardcoded values. 
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/

/* Apply "..." after 3 lines of text */
.text-style-3lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}

/* THEME */
/* BACKUP VAR SO WE CAN DECLARE DEFAULT THEME ON CARD THAT ARE INSIDE OF OTHE THEMES */
section{
	color: var(--theme-1-default--text-primary);
}

/* BLOT LIST */
/* INCREASING LINKBLOCK'S BANNER'S MAX HEIGHT WHEN INSIDE OF A 2ITEM WRAPPER */
@media screen and (min-width:769px){
  .blog-list_2item .blog-list_linkblock-img-wrapper{
    max-height: 23rem;
  }
  .blog-hub-hero_column .blog-list_linkblock-img-wrapper{
  	max-height: 23rem;
  }
}

.blog-list_linkblock:hover .blog-list_linkblock-img{
	transform: scale(1.05);
}

/* GET RID OF SCROLLBAR */
.page-wrapper *::-webkit-scrollbar{
	display: none;
}
.page-wrapper *{
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* GET RID OF TABS :BEFORE and :AFTER */
.w-tabs:before, .w-tabs:after{
	display: none !important;
}

/* SECTION */
section{
	position: relative;
  z-index: 1;
  color: var(--_color-modes---text-primary);
}

/* BUTTONS */
.button.has-icon-arrow:hover .button-icon{
	left: calc(100% - 2rem);
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
}

.casestudies_card:hover{
	z-index: 1;
}

.casestudies_card:hover .casestudies_card_hover-text{
	opacity: 1;
  transform: scale(1)
}

.project-outer:hover{
	z-index: 1;
}

.project-outer:hover .casestudies_card_hover-text{
	opacity: 1;
  transform: scale(1)
}

.navbar_component.is--active .navbar_image{
	height: 1.5rem;
}

.navbar_component.is--active .navbar_link{
	font-size: 1rem;
}

</style>

<style>
[color="Dark"]{
	color: black;
}
[color="Dark"] .mouche-aile{
	fill: #F1F1F1;
}

[color="Red"]{
	color: #F00;
}
[color="Red"] .mouche-aile{
	fill: white;
}

[color="Pink"]{
	color: #FFD0F5;
}
[color="Pink"] .mouche-aile{
	fill: white;
}

.custom-cursor img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* ajuste selon ton besoin */
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.custom-cursor_default {
  opacity: 1;
}

.custom-cursor.active .custom-cursor_default {
  opacity: 0;
}

.custom-cursor.active .custom-cursor_active {
  opacity: 1;
}


/* case study gallery grid */

/* Small case study → span 1 column */
.casestudies_item[casestudy-img-size="small"] {
  grid-column: span 1;
}

/* Large case study → span 2 columns */
.casestudies_item[casestudy-img-size="large"] {
  grid-column: span 2;
  aspect-ratio: auto;
}

/* Small case study → span 1 column */
.casestudies_list.is-project > .casestudies_item {
  grid-column: span 1;
}


.faq-wrap {
  /*height: 120px;*/
  overflow: hidden;
  cursor: pointer;
}

/* Base styles */
.faq-cross,
.faq-line.second {
  transition: transform 0.8s ease;
  display: inline-block; /* ensure transform works properly */
}

/* Rotate when parent .faq-wrap has .open */
.faq-wrap.open .faq-cross {
  transform: rotate(180deg);
}

.faq-wrap.open .faq-line.second {
  transform: rotate(180deg);
}

.filterui_form {
  overflow-x: auto;          /* allow horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
  scrollbar-width: none;     /* hide scrollbar in Firefox */
}

.filterui_form::-webkit-scrollbar {
  display: none;             /* hide scrollbar in Chrome, Safari, Edge */
}

.swiper.is-testimonial {
  overflow: visible !important; /* allow slides to peek out */
}




/* Rotate when parent .faq-wrap has .open */

.service-wrap {
  border-bottom: 1px solid black;
  transition: border-color 0.2s ease;
}

.service-wrap.open {
  border-color: transparent; /* animates smoothly */
  /*transition: border-color 0.2s;*/
}

/* child border element */
.service-wrap .service-border {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.service-wrap.open .service-border {
  opacity: 1;
}

.service-cross,
.faq-line.second {
  transition: transform 0.8s ease;
  display: inline-block; /* ensure transform works properly */
}

.service-wrap.open ~ .service-cross {
  transform: rotate(180deg);
}

.service-wrap.open ~ .service-cross > .faq-line.second {
  transform: rotate(180deg);
}

.service-wrap + .service-deliverables {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.8s ease-out;
}

.service-wrap.open + .service-deliverables {
  opacity: 1;
  transform: translateY(0);
}


.swiper-slide.is-testimonial {
  height: auto;
}

</style>