.elementor-1998 .elementor-element.elementor-element-f3ca704{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overflow:hidden;--margin-top:-110px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:150px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-1998 .elementor-element.elementor-element-f3ca704:not(.elementor-motion-effects-element-type-background), .elementor-1998 .elementor-element.elementor-element-f3ca704 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-635dbde );background-image:url("https://arkello.com/wp-content/uploads/2021/03/lorenzo-moschi-MNSf5U1gkUc-unsplash.jpg");background-position:center center;background-size:cover;}.elementor-1998 .elementor-element.elementor-element-c0c5a4a{--display:flex;}.elementor-1998 .elementor-element.elementor-element-d111033{font-size:12px;font-weight:700;text-transform:uppercase;line-height:1em;letter-spacing:0.1em;color:var( --e-global-color-primary );}.elementor-1998 .elementor-element.elementor-element-d111033 a{color:var( --e-global-color-primary );}.elementor-1998 .elementor-element.elementor-element-d111033 a:hover{color:var( --e-global-color-secondary );}.elementor-1998 .elementor-element.elementor-element-30431ff{text-align:center;}.elementor-1998 .elementor-element.elementor-element-30431ff .elementor-heading-title{font-size:70px;color:var( --e-global-color-primary );}@media(max-width:1024px){.elementor-1998 .elementor-element.elementor-element-f3ca704{--padding-top:150px;--padding-bottom:60px;--padding-left:10px;--padding-right:10px;}}@media(max-width:767px){.elementor-1998 .elementor-element.elementor-element-30431ff .elementor-heading-title{font-size:50px;}}/* Start custom CSS *//* Coverflow avocats — défilement horizontal façon iTunes */
.elementor.elementor-1998 .e-collection-loop-layout-base {
  --cf-w: clamp(200px, 24vw, 260px);
  --cf-gap: 40px;
  position: relative;
  display: flex;
  gap: var(--cf-gap);
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-block: 40px;
  padding-inline: calc(50% - var(--cf-w) / 2);
  perspective: 1000px;
  cursor: grab;
  /* Scrollbar native fine, remplacée par le filet quand le JS est chargé */
  scrollbar-width: thin;
  scrollbar-color: var(--ark-navy, #0b1437) transparent;
}

.elementor.elementor-1998 .e-collection-loop-layout-base > [data-element_type="e-collection-loop-item"] {
  flex: 0 0 var(--cf-w);
  position: relative;
  scroll-snap-align: center;
  /* Pivot à mi-hauteur de la photo (350px) : toutes les cartes restent alignées en haut */
  transform-origin: 50% 175px;
}

/* Glisser à la souris (classe posée par le JS) */
.elementor.elementor-1998 .e-collection-loop-layout-base.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.elementor.elementor-1998 .e-collection-loop-layout-base img { -webkit-user-drag: none; }

/* Filet de défilement cliquable et déplaçable (créé par le JS) */
.elementor.elementor-1998 .e-collection-loop-layout-base:has(+ .cf-bar) { scrollbar-width: none; }
.elementor.elementor-1998 .e-collection-loop-layout-base:has(+ .cf-bar)::-webkit-scrollbar { display: none; }
.elementor.elementor-1998 .e-collection-loop-layout-base.is-wheeling { scroll-snap-type: none; }
.elementor.elementor-1998 .cf-bar {
  position: relative;
  width: min(420px, 60%);
  height: 24px;
  margin: 0 auto 30px;
  cursor: pointer;
  touch-action: none;
}
.elementor.elementor-1998 .cf-bar::before,
.elementor.elementor-1998 .cf-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  pointer-events: none;
}
.elementor.elementor-1998 .cf-bar::before {
  height: 1px;
  background: color-mix(in srgb, var(--ark-navy, #0b1437) 15%, transparent);
}
.elementor.elementor-1998 .cf-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.elementor.elementor-1998 .cf-thumb::after {
  height: 3px;
  border-radius: 3px;
  background: var(--ark-navy, #0b1437);
  transition: height .2s ease;
}
.elementor.elementor-1998 .cf-bar:hover .cf-thumb::after,
.elementor.elementor-1998 .cf-bar.is-active .cf-thumb::after { height: 6px; }
.elementor.elementor-1998 .cf-bar.is-active .cf-thumb { cursor: grabbing; }

/* Effet 3D uniquement si le navigateur gère les scroll-driven animations */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .elementor.elementor-1998 .e-collection-loop-layout-base > [data-element_type="e-collection-loop-item"] {
      animation: ark-coverflow linear both;
      animation-timeline: view(inline);
    }
  }
}
@keyframes ark-coverflow {
  0%   { transform: rotateY(-55deg) scale(.8);  z-index: 1;  filter: brightness(.55); }
  38%  { transform: rotateY(-55deg) scale(.8);  z-index: 4;  filter: brightness(.7); }
  50%  { transform: rotateY(0) scale(1.08);     z-index: 10; filter: brightness(1); }
  62%  { transform: rotateY(55deg) scale(.8);   z-index: 4;  filter: brightness(.7); }
  100% { transform: rotateY(55deg) scale(.8);   z-index: 1;  filter: brightness(.55); }
}

/* Entrée carte par carte, de la droite vers la gauche (classes posées par le JS) */
.elementor.elementor-1998 .e-collection-loop-layout-base.cf-ready > [data-element_type="e-collection-loop-item"] > * {
  opacity: 0;
}
.elementor.elementor-1998 .e-collection-loop-layout-base.cf-ready.is-in > [data-element_type="e-collection-loop-item"] > * {
  animation: ark-cf-in 1s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--cf-i, 0) * 120ms);
}
@keyframes ark-cf-in {
  from { opacity: 0; translate: 300px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes ark-cf-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}/* End custom CSS */