.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-232e643:#02043D;--e-global-color-59d0913:#E7DBE2;--e-global-color-ad1082b:#0335F4;--e-global-color-d4ffcb0:#96C5FF;--e-global-color-1b2fa23:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-preloader-animation-duration:1500ms;--e-preloader-delay:0ms;}.elementor-kit-6 e-page-transition{background-color:#000000;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}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-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Empêche le scroll pendant le preloader */
body.klutchr-loading {
  overflow: hidden;
}

/* Preloader fullscreen */
#klutchr-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Disparition du preloader */
#klutchr-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Contenu centré */
.klutchr-preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 24px;
}

/* Logo du preloader */
.klutchr-preloader-logo {
  width: min(800px, 90vw);
  max-width: 800px;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: klutchrFadeUp 0.8s ease forwards;
}

/* Ligne texte */
.klutchr-preloader-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35em;
  color: #ffffff;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
}

/* Mots animés */
.klutchr-preloader-line .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: klutchrFadeUp 0.7s ease forwards;
}

.klutchr-preloader-line .word-1 {
  animation-delay: 0.55s;
}

.klutchr-preloader-line .word-2 {
  animation-delay: 0.85s;
}

.klutchr-preloader-line .word-3 {
  animation-delay: 1.15s;
}

.klutchr-preloader-line .word-4 {
  animation-delay: 1.45s;
}

/* Animation fade in up */
@keyframes klutchrFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cache le preloader dans Elementor */
body.elementor-editor-active #klutchr-preloader,
html.elementor-editor-active #klutchr-preloader {
  display: none !important;
}

/* Responsive */
@media (max-width: 767px) {
  .klutchr-preloader-inner {
    gap: 18px;
    padding: 20px;
  }

  .klutchr-preloader-logo {
    width: min(320px, 82vw);
  }

  .klutchr-preloader-line {
    font-size: 18px;
  }
}

/* =========================
   ANIMATION DU GROS LOGO HERO
   ========================= */

/* Mets cette classe sur ton gros logo de la home */
/* Logo hero : état initial sur le site public */
.hero-klutchr-logo {
  opacity: 0;
  transform: translateY(80px) scale(0.985);
  filter: blur(8px);
  transition:
    opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    filter 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  will-change: opacity, transform, filter;
}

/* Quand le preloader est fini */
body.klutchr-loaded .hero-klutchr-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* IMPORTANT : dans Elementor éditeur, le logo doit rester visible */
body.elementor-editor-active .hero-klutchr-logo,
html.elementor-editor-active .hero-klutchr-logo {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.klutchr-scrub-title .elementor-heading-title {
  position: relative;
  margin: 0;
  width: 100%;
  text-align: center;
}

/* masque unique pour toute la phrase */
.klutchr-scrub-title .sentence-mask {
  display: block;
  overflow: hidden;
  width: 100%;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

/* ligne intérieure qui contient tous les mots */
.klutchr-scrub-title .line-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.10em;
  align-items: flex-end;
  width: 100%;
}

/* mots */
.klutchr-scrub-title .word {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0.8;
  will-change: transform, opacity;
}

/* dans l'éditeur Elementor : visible direct */
body.elementor-editor-active .klutchr-scrub-title .word,
html.elementor-editor-active .klutchr-scrub-title .word {
  transform: none !important;
  opacity: 1 !important;
}

.klutchr-title-section {
  position: relative;
  overflow: hidden;
  min-height: 800px;
  --klutchr-overlay-opacity: 0.3;
}

.klutchr-title-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.klutchr.fr/wp-content/uploads/2026/03/Logo-accueil-klutchr.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80% auto;
  opacity: var(--klutchr-overlay-opacity);
  pointer-events: none;
  z-index: 0;
  border: 2px solid red;
}

.klutchr-title-section > .e-con-inner,
.klutchr-title-section .elementor-widget,
.klutchr-title-section .elementor-heading-title {
  position: relative;
  z-index: 2;
}

/* État initial */
.klutchr-menu-logo,
.klutchr-menu-nav,
.klutchr-menu-cta {
  opacity: 0;
  filter: blur(8px);
  will-change: opacity, transform, filter;
}

/* Logo à gauche */
.klutchr-menu-logo {
  transform: translateX(-36px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

/* Nav au centre */
.klutchr-menu-nav {
  transform: translateY(10px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s,
    filter 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}

/* CTA à droite */
.klutchr-menu-cta {
  transform: translateX(36px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.27s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.27s,
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.27s;
}

/* Déclenchement après preloader */
body.klutchr-loaded .klutchr-menu-logo,
body.klutchr-loaded .klutchr-menu-nav,
body.klutchr-loaded .klutchr-menu-cta,
body:not(.home) .klutchr-menu-logo,
body:not(.home) .klutchr-menu-nav,
body:not(.home) .klutchr-menu-cta {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Toujours visible dans Elementor */
body.elementor-editor-active .klutchr-menu-logo,
body.elementor-editor-active .klutchr-menu-nav,
body.elementor-editor-active .klutchr-menu-cta,
html.elementor-editor-active .klutchr-menu-logo,
html.elementor-editor-active .klutchr-menu-nav,
html.elementor-editor-active .klutchr-menu-cta {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}





.klutchr-roll-btn,
.klutchr-roll-btn .klutchr-roll-text,
.klutchr-roll-btn .klutchr-roll-line,
.klutchr-roll-btn .klutchr-roll-char {
  color: inherit !important;
}


html,
body {
  overflow-x: hidden;
}

.klutchr-highlight-block {
  box-sizing: border-box;
  width: calc(100% - 32px);
  max-width: calc(100vw - 32px);
  margin-left: auto;
  margin-right: auto;

  border-radius: 16px;
  background: transparent !important;
  overflow: hidden;

  transition:
    background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.klutchr-highlight-block.is-active {
  background-color: #0335F4 !important;
  box-shadow: 0 12px 30px rgba(22, 61, 122, 0.12);
}

.klutchr-highlight-block .klutchr-tilt-photo {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  max-width: 100%;
}

.klutchr-highlight-block.is-active .klutchr-tilt-photo.tilt-right {
  transform: rotate(7deg);
}

.klutchr-highlight-block.is-active .klutchr-tilt-photo.tilt-left {
  transform: rotate(-7deg);
}

@media (max-width: 767px) {
  .klutchr-highlight-block {
    width: calc(100% - 32px);
    max-width: calc(100vw - 32px);
    border-radius: 14px;
  }

  .klutchr-highlight-block.is-active .klutchr-tilt-photo.tilt-right {
    transform: rotate(5deg);
  }

  .klutchr-highlight-block.is-active .klutchr-tilt-photo.tilt-left {
    transform: rotate(-5deg);
  }
}


.klutchr-type-reveal .line {
  display: block;
  overflow: hidden;
}

.klutchr-type-reveal .line-inner {
  display: inline-block;
}

.klutchr-type-reveal .char {
  display: inline-block;
  transform: translateY(-120%);
  opacity: 0;
  will-change: transform, opacity;
}



.klutchr-text-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 8px 0;
}

.klutchr-text-slider__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 48px;
  animation: klutchrTextScroll 28s linear infinite;
}

.klutchr-text-slider__track span {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: #ffffff;
  opacity: 0.88;
}

.klutchr-text-slider__track span:not(:last-child)::after {
  content: "•";
  margin-left: 48px;
  color: rgba(255,255,255,0.35);
  font-size: 18px;
}

@keyframes klutchrTextScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1024px) {
  .klutchr-text-slider__track {
    gap: 36px;
  }

  .klutchr-text-slider__track span {
    font-size: 20px;
  }

  .klutchr-text-slider__track span:not(:last-child)::after {
    margin-left: 36px;
  }
}

@media (max-width: 767px) {
  .klutchr-text-slider__track {
    gap: 28px;
    animation-duration: 22s;
  }

  .klutchr-text-slider__track span {
    font-size: 24px;
  }

  .klutchr-text-slider__track span:not(:last-child)::after {
    margin-left: 28px;
    font-size: 14px;
  }
}


.klutchr-slider-section {
  position: relative;
  overflow: hidden;
  --klutchr-bg-opacity: 0;
  --klutchr-bg-scale: 1;
}

.klutchr-slider-section::before {
  content: "KLUTCHR";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--klutchr-bg-scale));
  transform-origin: center center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 16vw, 240px);
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12);
  opacity: var(--klutchr-bg-opacity);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* tout le contenu reste au-dessus */
.klutchr-slider-section > *,
.klutchr-slider-section .elementor-widget,
.klutchr-slider-section .elementor-element {
  position: relative;
  z-index: 1;
}

/* confort dans l'éditeur */
body.elementor-editor-active .klutchr-slider-section::before,
html.elementor-editor-active .klutchr-slider-section::before {
  opacity: 0.08 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 767px) {
  .klutchr-slider-section::before {
    font-size: clamp(56px, 22vw, 120px);
    -webkit-text-stroke: 1px rgba(255,255,255,0.10);
  }
}/* End custom CSS */