.elementor-kit-5{--e-global-color-primary:#534744;--e-global-color-secondary:#534744;--e-global-color-text:#534744;--e-global-color-accent:#534744;--e-global-color-e0806ce:#F5F1EF;--e-global-color-e977d9d:#FFFFFF;--e-global-typography-primary-font-family:"Bon Vivant Family Serif";--e-global-typography-primary-font-size:clamp(70px,4.938vw,80px);--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Kento";--e-global-typography-secondary-font-size:clamp(12px,0.988vw,16px);--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:18px;--e-global-typography-secondary-letter-spacing:1.6px;--e-global-typography-text-font-family:"Neue Montreal";--e-global-typography-text-font-size:clamp(12px,0.988vw,16px);--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:0.32px;--e-global-typography-accent-font-family:"Kento";--e-global-typography-accent-font-size:clamp(12px,0.988vw,16px);--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1.6px;--e-global-typography-296bd78-font-family:"Bon Vivant Family Script";--e-global-typography-296bd78-font-size:clamp(40px,3.086vw,50px);--e-global-typography-296bd78-font-weight:400;--e-global-typography-296bd78-line-height:55px;--e-global-typography-322714f-font-family:"Bon Vivant Family Serif";--e-global-typography-322714f-font-size:clamp(55px,4.012vw,65px);--e-global-typography-322714f-font-weight:400;--e-global-typography-322714f-line-height:75px;--e-global-typography-7a10b23-font-family:"Bon Vivant Family Serif";--e-global-typography-7a10b23-font-size:clamp(35px,2.679vw,45px);--e-global-typography-7a10b23-font-weight:400;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1620px;}.e-con{--container-max-width:1620px;--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: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-kit-5{--e-global-typography-primary-font-size:clamp(60px,6.836vw,70px);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:clamp(45px,9.126vw,70px);--e-global-typography-text-font-size:clamp(12px,2.086vw,16px);--e-global-typography-322714f-font-size:clamp(35px,5.867vw,55px);--e-global-typography-322714f-line-height:1.2em;--e-global-typography-7a10b23-font-size:clamp(25px,5.867vw,45px);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   01. BOUTON À COINS BLANCS — .o4v-btn-w
========================================================= */

.o4v-btn-w {
  position: relative;
  display: inline-block;
}

/* Coins haut */
.o4v-btn-w::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white);

  background-position:
    left 0 top 0,
    left 0 top 0,
    right 0 top 0,
    right 0 top 0;

  background-size:
    6.5px 1px,
    1px 6.5px,
    6.5px 1px,
    1px 6.5px;

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}

/* Coins bas */
.o4v-btn-w::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white);

  background-position:
    left 0 bottom 0,
    left 0 bottom 0,
    right 0 bottom 0,
    right 0 bottom 0;

  background-size:
    6.5px 1px,
    1px 6.5px,
    6.5px 1px,
    1px 6.5px;

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}

.o4v-btn-w:hover::before {
  background-position:
    left 1.5px top 1.5px,
    left 1.5px top 1.5px,
    right 1.5px top 1.5px,
    right 1.5px top 1.5px;
}

.o4v-btn-w:hover::after {
  background-position:
    left 1.5px bottom 1.5px,
    left 1.5px bottom 1.5px,
    right 1.5px bottom 1.5px,
    right 1.5px bottom 1.5px;
}


/* =========================================================
   02. ÉLÉMENTS HERO
========================================================= */

.o4v-icon-hero {
  width: 100px;
  aspect-ratio: 1 / 1;
  border: 2px solid #fff;
  border-radius: 100%;
  background: rgba(217, 217, 217, 0.2);
  backdrop-filter: blur(5px);
}

.o4v-pannel-hero {
  border-radius: 90px;
  background: rgba(217, 217, 217, 0.4);
  backdrop-filter: blur(5px);
}

@media (max-width: 1024px) {
  .o4v-icon-hero {
    width: 80px;
  }
}


/* =========================================================
   03. BORDURES DÉCORATIVES — VERSION MARRON
========================================================= */

.ov4-border-tl-br-b,
.ov4-border-tl-b {
  position: relative;
}

.ov4-border-tl-br-b::before,
.ov4-border-tl-b::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744);

  background-position:
    left 0 top 0,
    left 0 top 0,
    right 0 top 0,
    right 0 top 0;

  background-size:
    19px 1px,
    1px 19px,
    0 0,
    0 0;

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}

.ov4-border-tl-br-b::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744);

  background-position:
    left 0 bottom 0,
    left 0 bottom 0,
    right 0 bottom 0,
    right 0 bottom 0;

  background-size:
    0 0,
    0 0,
    19px 1px,
    1px 19px;

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}


/* =========================================================
   BORDURES DÉCORATIVES — BASE MARRON
========================================================= */

.ov4-border-tl-b,
.ov4-border-tr-b,
.ov4-border-bl-b,
.ov4-border-br-b,
.ov4-border-t-b-b,
.ov4-border-b-b-b,
.ov4-border-l-b-b,
.ov4-border-r-b-b,
.ov4-border-tl-br-b,
.ov4-border-tr-bl-b,
.ov4-border-all-b {
  position: relative;
}

.ov4-border-tl-b::before,
.ov4-border-tr-b::before,
.ov4-border-bl-b::before,
.ov4-border-br-b::before,
.ov4-border-t-b-b::before,
.ov4-border-b-b-b::before,
.ov4-border-l-b-b::before,
.ov4-border-r-b-b::before,
.ov4-border-tl-br-b::before,
.ov4-border-tr-bl-b::before,
.ov4-border-all-b::before,
.ov4-border-tl-b::after,
.ov4-border-tr-b::after,
.ov4-border-bl-b::after,
.ov4-border-br-b::after,
.ov4-border-t-b-b::after,
.ov4-border-b-b-b::after,
.ov4-border-l-b-b::after,
.ov4-border-r-b-b::after,
.ov4-border-tl-br-b::after,
.ov4-border-tr-bl-b::after,
.ov4-border-all-b::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744),
    linear-gradient(#534744, #534744);

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}

/* =========================================================
   BORDURES DÉCORATIVES TEXTE — VERSION MARRON 10PX
========================================================= */

.ov4-border-text-b {
  --ov4-corner-color: #534744;
  --ov4-corner-size: 10px;
  --ov4-corner-width: 1px;

  position: relative;
}

.ov4-border-text-b::before,
.ov4-border-text-b::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color)),
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color)),
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color)),
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color));

  background-repeat: no-repeat;
}

/* coins haut gauche + haut droite */
.ov4-border-text-b::before {
  background-position:
    left 0 top 0,
    left 0 top 0,
    right 0 top 0,
    right 0 top 0;

  background-size:
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size),
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size);
}

/* coins bas gauche + bas droite */
.ov4-border-text-b::after {
  background-position:
    left 0 bottom 0,
    left 0 bottom 0,
    right 0 bottom 0,
    right 0 bottom 0;

  background-size:
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size),
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size);
}

/* =========================================================
   COINS DU HAUT — ::before
========================================================= */

.ov4-border-tl-b::before,
.ov4-border-t-b-b::before,
.ov4-border-l-b-b::before,
.ov4-border-tl-br-b::before,
.ov4-border-tr-bl-b::before,
.ov4-border-all-b::before {
  background-position:
    left 0 top 0,
    left 0 top 0,
    right 0 top 0,
    right 0 top 0;

  background-size:
    19px 1px,
    1px 19px,
    0 0,
    0 0;
}

.ov4-border-tr-b::before,
.ov4-border-r-b-b::before {
  background-position:
    left 0 top 0,
    left 0 top 0,
    right 0 top 0,
    right 0 top 0;

  background-size:
    0 0,
    0 0,
    19px 1px,
    1px 19px;
}

/* Top-left + top-right */
.ov4-border-t-b-b::before,
.ov4-border-all-b::before {
  background-size:
    19px 1px,
    1px 19px,
    19px 1px,
    1px 19px;
}

/* Top-right + bottom-left */
.ov4-border-tr-bl-b::before {
  background-size:
    0 0,
    0 0,
    19px 1px,
    1px 19px;
}

/* =========================================================
   COINS DU BAS — ::after
========================================================= */

.ov4-border-bl-b::after,
.ov4-border-b-b-b::after,
.ov4-border-l-b-b::after,
.ov4-border-tr-bl-b::after,
.ov4-border-all-b::after {
  background-position:
    left 0 bottom 0,
    left 0 bottom 0,
    right 0 bottom 0,
    right 0 bottom 0;

  background-size:
    19px 1px,
    1px 19px,
    0 0,
    0 0;
}

.ov4-border-br-b::after,
.ov4-border-r-b-b::after,
.ov4-border-tl-br-b::after {
  background-position:
    left 0 bottom 0,
    left 0 bottom 0,
    right 0 bottom 0,
    right 0 bottom 0;

  background-size:
    0 0,
    0 0,
    19px 1px,
    1px 19px;
}

/* Bottom-left + bottom-right */
.ov4-border-b-b-b::after,
.ov4-border-all-b::after {
  background-size:
    19px 1px,
    1px 19px,
    19px 1px,
    1px 19px;
}

/* =========================================================
   CLASSES QUI N’ONT PAS DE COIN HAUT OU BAS
========================================================= */

.ov4-border-bl-b::before,
.ov4-border-br-b::before,
.ov4-border-b-b-b::before {
  background-size:
    0 0,
    0 0,
    0 0,
    0 0;
}

.ov4-border-tl-b::after,
.ov4-border-tr-b::after,
.ov4-border-t-b-b::after {
  background-size:
    0 0,
    0 0,
    0 0,
    0 0;
}

/* =========================================================
   BORDURES DÉCORATIVES TEXTE — HOVER RAPPROCHÉ
========================================================= */

.ov4-border-text-hover-b {
  --ov4-corner-color: #534744;
  --ov4-corner-size: 10px;
  --ov4-corner-width: 1px;
  --ov4-corner-offset: -5px;
  --ov4-corner-hover-offset: 2px;

  position: relative;
  display: inline-block;
  padding: 6px 10px;
}

.ov4-border-text-hover-b::before,
.ov4-border-text-hover-b::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color)),
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color)),
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color)),
    linear-gradient(var(--ov4-corner-color), var(--ov4-corner-color));

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}

/* Coins haut gauche + haut droite */
.ov4-border-text-hover-b::before {
  background-position:
    left var(--ov4-corner-offset) top var(--ov4-corner-offset),
    left var(--ov4-corner-offset) top var(--ov4-corner-offset),
    right var(--ov4-corner-offset) top var(--ov4-corner-offset),
    right var(--ov4-corner-offset) top var(--ov4-corner-offset);

  background-size:
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size),
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size);
}

/* Coins bas gauche + bas droite */
.ov4-border-text-hover-b::after {
  background-position:
    left var(--ov4-corner-offset) bottom var(--ov4-corner-offset),
    left var(--ov4-corner-offset) bottom var(--ov4-corner-offset),
    right var(--ov4-corner-offset) bottom var(--ov4-corner-offset),
    right var(--ov4-corner-offset) bottom var(--ov4-corner-offset);

  background-size:
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size),
    var(--ov4-corner-size) var(--ov4-corner-width),
    var(--ov4-corner-width) var(--ov4-corner-size);
}

/* Hover : les crochets se rapprochent du texte */
.ov4-border-text-hover-b:hover::before {
  background-position:
    left var(--ov4-corner-hover-offset) top var(--ov4-corner-hover-offset),
    left var(--ov4-corner-hover-offset) top var(--ov4-corner-hover-offset),
    right var(--ov4-corner-hover-offset) top var(--ov4-corner-hover-offset),
    right var(--ov4-corner-hover-offset) top var(--ov4-corner-hover-offset);
}

.ov4-border-text-hover-b:hover::after {
  background-position:
    left var(--ov4-corner-hover-offset) bottom var(--ov4-corner-hover-offset),
    left var(--ov4-corner-hover-offset) bottom var(--ov4-corner-hover-offset),
    right var(--ov4-corner-hover-offset) bottom var(--ov4-corner-hover-offset),
    right var(--ov4-corner-hover-offset) bottom var(--ov4-corner-hover-offset);
}

/* =========================================================
   04. BORDURES DÉCORATIVES — VERSION BLANCHE
========================================================= */

.ov4-border-tl-br-w {
  position: relative;
}

.ov4-border-tl-br-w::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white);

  background-position:
    left 0 top 0,
    left 0 top 0,
    right 0 top 0,
    right 0 top 0;

  background-size:
    19px 1px,
    1px 19px,
    0 0,
    0 0;

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}

.ov4-border-tl-br-w::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white),
    linear-gradient(white, white);

  background-position:
    left 0 bottom 0,
    left 0 bottom 0,
    right 0 bottom 0,
    right 0 bottom 0;

  background-size:
    0 0,
    0 0,
    19px 1px,
    1px 19px;

  background-repeat: no-repeat;
  transition: background-position 0.3s ease;
}


/* =========================================================
   05. BOUTON FLÈCHE SVG — .arrow-svg-button
========================================================= */

.arrow-svg-button .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.arrow-svg-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.arrow-svg-button .elementor-button-text {
  text-align: start !important;
  transition: text-shadow 0.25s ease;
}

.arrow-svg-button:hover .elementor-button-text {
  text-shadow: 0 0 0.6px currentColor;
}

.arrow-svg-button span {
  display: flex;
  align-items: center;
}

.arrow-svg-button svg {
  width: 100% !important;
  overflow: visible;
}

.arrow-svg-button svg path {
  transition: transform 0.3s ease;
}

/* Animation des coins */
.arrow-svg-button:hover svg path:nth-child(1) {
  transform: translate(-3px, -3px);
}

.arrow-svg-button:hover svg path:nth-child(2) {
  transform: translate(3px, -3px);
}

.arrow-svg-button:hover svg path:nth-child(3) {
  transform: translate(3px, 3px);
}

.arrow-svg-button:hover svg path:nth-child(4) {
  transform: translate(-3px, 3px);
}

/* Animation de la flèche */
.arrow-svg-button .arrow-path-track {
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.arrow-svg-button .arrow-path-track .arrow-path {
  transition:
    transform 0.45s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.3s ease;
  will-change: transform, opacity;
}

.arrow-svg-button .arrow-path-track .arrow-path.clone {
  transform: translateX(-28px);
}

.arrow-svg-button:hover .arrow-path-track .arrow-path.original {
  transform: translateX(28px);
  opacity: 0;
}

.arrow-svg-button:hover .arrow-path-track .arrow-path.clone {
  transform: translateX(0);
  opacity: 1;
}


/* =========================================================
   06. ANIMATION TEXTE ROLL — VARIABLES
========================================================= */

.button-text-roll,
.button-text-roll-header,
.button-text-roll-menu {
  --roll-height: 1.5em;
  --roll-line-height: 1.75em;
}

.button-text-roll-header {
  --roll-height: 1.75em;
  --roll-line-height: 0.5em;
}

.button-text-roll-menu {
  --roll-height: 1.75em;
  --roll-line-height: 1em;
}


/* =========================================================
   07. ANIMATION TEXTE ROLL — CORE
========================================================= */

.button-text-roll .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.button-text-roll .elementor-button-text,
.button-text-roll .elementor-icon-box-title a,
.button-text-roll .elementor-nav-menu .elementor-item,
.button-text-roll-header .elementor-nav-menu .elementor-item,
.button-text-roll-menu .elementor-nav-menu .elementor-item {
  display: block;
  position: relative;
  height: var(--roll-height);
  line-height: var(--roll-line-height);
  overflow: hidden;
  vertical-align: top;
}

.button-roll-track {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.button-roll-line {
  display: block;
  height: var(--roll-height);
  line-height: var(--roll-line-height);
  white-space: nowrap;
}


/* =========================================================
   08. ANIMATION TEXTE ROLL — INTERACTIONS
========================================================= */

.button-text-roll:hover .elementor-button-text .button-roll-track,
.button-text-roll:hover .elementor-icon-box-title a .button-roll-track,
.button-text-roll .elementor-nav-menu .elementor-item:hover .button-roll-track,
.button-text-roll .elementor-nav-menu .elementor-item:focus .button-roll-track,
.button-text-roll-header .elementor-nav-menu .elementor-item:hover .button-roll-track,
.button-text-roll-header .elementor-nav-menu .elementor-item:focus .button-roll-track,
.button-text-roll-menu .elementor-nav-menu .elementor-item:hover .button-roll-track,
.button-text-roll-menu .elementor-nav-menu .elementor-item:focus .button-roll-track {
  transform: translateY(-50%);
}


/* =========================================================
   09. ANIMATION TEXTE ROLL — FIX ICON BOX
========================================================= */

.button-text-roll .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
}

.button-text-roll .elementor-icon-box-content {
  flex: 0 1 auto;
}

.button-text-roll .elementor-icon-box-title {
  display: block;
  margin: 0;
  overflow: hidden;
}

.button-text-roll .elementor-icon-box-title a {
  text-decoration: none;
}


/* =========================================================
   10. INTRO HERO — LOCK SCROLL
========================================================= */

html.intro-lock,
body.intro-lock {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.intro-lock {
  touch-action: none;
}


/* =========================================================
   11. INTRO HERO — STRUCTURE
========================================================= */

.intro-hero,
.intro-hero-home {
  position: relative;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform, clip-path, border-radius, opacity, filter;
  backface-visibility: hidden;
}


@media (max-width: 1445px) and (min-width: 1320px) {
  .intro-hero-home {
    height: 90vh !important;
  }
}

.intro-hero-content,
.intro-hero-float,
.intro-hero-panels {
  will-change: transform, opacity, filter;
}

/*@media (max-width: 767px) {*/
/*  .intro-hero {*/
/*    min-height: 100svh;*/
/*  }*/

/*  .intro-hero-home {*/
/*    min-height: 80svh;*/
/*  }*/
/*}*/


/* =========================================================
   12. INTRO HERO — TRANSITIONS
========================================================= */

html.intro-enabled .intro-hero,
html.intro-enabled .intro-hero-home {
  transition:
    transform 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 1.35s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s ease,
    opacity 0.8s ease;
}

html.intro-enabled .intro-hero-content,
html.intro-enabled .intro-hero-float,
html.intro-enabled .intro-hero-panels {
  transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s ease,
    filter 0.8s ease;
}


/* État initial */
html.intro-enabled.intro-before .intro-hero,
html.intro-enabled.intro-before .intro-hero-home {
  transform: scale(0.78);
  clip-path: inset(13% 16% round 28px);
  border-radius: 28px;
  filter: saturate(0.92) brightness(0.96);
}

html.intro-enabled.intro-before .intro-hero-content {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  filter: blur(8px);
}

html.intro-enabled.intro-before .intro-hero-float {
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  filter: blur(6px);
}

html.intro-enabled.intro-before .intro-hero-panels {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  filter: blur(8px);
}


/* État final */
html.intro-enabled.intro-playing .intro-hero,
html.intro-enabled.intro-playing .intro-hero-home,
html.intro-enabled.intro-done .intro-hero,
html.intro-enabled.intro-done .intro-hero-home {
  transform: scale(1);
  clip-path: inset(0% 0% round 0);
  border-radius: 0;
  filter: none;
}

html.intro-enabled.intro-playing .intro-hero-content,
html.intro-enabled.intro-done .intro-hero-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.28s;
}

html.intro-enabled.intro-playing .intro-hero-float,
html.intro-enabled.intro-done .intro-hero-float {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.42s;
}

html.intro-enabled.intro-playing .intro-hero-panels,
html.intro-enabled.intro-done .intro-hero-panels {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.52s;
}


/* =========================================================
   13. INTRO HERO — HEADER
========================================================= */

.header-menu {
  will-change: transform, opacity, filter;
}

html.intro-enabled .header-menu {
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s ease;
}

html.intro-enabled.intro-before .header-menu,
html.intro-enabled.intro-playing .header-menu {
  opacity: 0;
  transform: translateY(-18px);
  filter: blur(6px);
  pointer-events: none;
}

html.intro-enabled.intro-done .header-menu {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}


/* =========================================================
   14. INTRO HERO — ACCESSIBILITÉ
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html.intro-enabled .intro-hero,
  html.intro-enabled .intro-hero-home,
  html.intro-enabled .intro-hero-content,
  html.intro-enabled .intro-hero-float,
  html.intro-enabled .intro-hero-panels,
  html.intro-enabled .header-menu {
    transition: none !important;
  }
}


/* =========================================================
   15. MOBILE STACK CARDS — LOOP CAROUSEL ELEMENTOR
========================================================= */

@media (max-width: 767px) {
  .elementor-element-c14c300,
  .elementor-element-c14c300 > .e-con-inner,
  .elementor-element-6539b03,
  .mobile-stack-cards,
  .mobile-stack-cards .elementor-widget-container,
  .mobile-stack-cards .mobile-stack-outer-swiper {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mobile-stack-cards .mobile-stack-outer-swiper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-stack-cards .mobile-stack-outer-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    gap: 16px;
    transform: none !important;
  }

  .mobile-stack-cards .mobile-stack-outer-slide {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }

  .mobile-stack-cards .mobile-stack-outer-slide.swiper-slide-duplicate {
    display: none !important;
  }

  .mobile-stack-cards .mobile-stack-outer-slide .e-loop-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 39 / 49 !important;
  }
}

/* =========================================================
   16. GALLERY SWIPPER CONTROLLER
========================================================= */

.o4v-gallery-thumbs .swiper-slide {
  opacity: 0.55;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.o4v-gallery-thumbs .swiper-slide.is-active-thumb {
  opacity: 1;
  transform: scale(1.04);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Bon Vivant Family Serif';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://only4view.com/wp-content/uploads/2026/04/BonVivantSerif.ttf') format('truetype');
}
@font-face {
	font-family: 'Bon Vivant Family Serif';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://only4view.com/wp-content/uploads/2026/04/BonVivantSerifBold.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Kento';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://only4view.com/wp-content/uploads/2026/04/Kento-Light.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Neue Montreal';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://only4view.com/wp-content/uploads/2026/04/NeueMontreal-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Bon Vivant Family Script';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://only4view.com/wp-content/uploads/2026/04/BonVivant-Regular.ttf') format('truetype');
}
/* End Custom Fonts CSS */