/*
Theme Name: kadence-child
Description: Thème enfant Kadence
Author: greg
Author URI: 
Template: kadence
Version: 1.0
*/
body {
  background-color: #222222 !important;
}
body.clap-init {
  background: #000 !important;
}
#block-19 p a {
  color: white;
}

.privacy-policy .site-header-item {
  background-color: #3b3b3b;
}
/*-----------Title Font---------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #ff5733; /* Change la couleur des titres */
  font-family: "Merriweather", serif;
  font-weight: 700;
}

/* 2️⃣ Forcer la couleur des éléments du menu et des boutons même en sticky */
#masthead *,
#masthead .main-header-menu a,
#masthead .main-header-menu li,
#masthead .header-button,
#masthead .header-icon,
#masthead .site-title {
  color: #ffffff !important; /* couleur texte/boutons blanche */
  fill: #ffffff !important; /* pour les icônes SVG */
}
#masthead
  .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(
    .site-header-row-container
  ):not(.item-hidden-above):not(.site-main-header-wrap) {
  border-bottom: none !important; /* Supprime la bordure du header sticky */
}
/*-----------BTN-1---------*/

.btn-1 span {
  padding: 15px 25px !important;
  border: unset !important ;
  border-radius: 6px !important;
  color: #3b3b3b !important;
  z-index: 1 !important;
  background: #e8e8e8 !important;
  position: relative !important;
  font-weight: 1000 !important;
  font-size: 17px !important;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  transition: all 250ms !important;
  overflow: hidden !important;
}

.btn-1 span::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 6px !important;
  background-color: #fced78 !important;
  z-index: -1 !important;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  transition: all 250ms !important;
}

.btn-1 span:hover {
  color: #000000 !important;
}

.btn-1 span:hover::before {
  width: 100% !important;
}
.btn-1 a {
  background-color: transparent !important;
}
.btn-3 {
  border-radius: 39px;
  background: #363636;
  box-shadow:
    inset 17px 17px 34px #2c2c2c,
    inset -17px -17px 34px #404040;
}
/*-----------Bouton formulaire de contact----------*/

.kb-forms-submit {
  padding: 15px 25px !important;
  border: unset !important ;
  border-radius: 6px !important;
  color: #222222 !important;
  z-index: 1 !important;
  background: #e8e8e8 !important;
  position: relative !important;
  font-weight: 1000 !important;
  font-size: 17px !important;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  transition: all 250ms !important;
  overflow: hidden !important;
  width: 50%;
}

.kb-forms-submit::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 6px !important;
  color: #222222 !important;
  background-color: #fced78 !important;
  z-index: -1 !important;
  -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27) !important;
  transition: all 250ms !important;
}

.kb-forms-submit:hover {
  color: #222222 !important;
}

.kb-forms-submit:hover::before {
  width: 100% !important;
}
.kb-forms-submit a {
  background-color: transparent !important;
}
/* === ---------------Header transform ------------------=== */
.site-header-inner-wrap {
  top: 0 !important;
}

/* === ---------------Main serveur ------------------=== */
.train {
  width: 50vw;
  height: auto;
}
/*-----------------Animation des blocks on Scroll--------------------*/

/* Animation depuis le bas (fade-up) */
.scroll-animation {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animation.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation depuis la gauche */
.scroll-animation-left {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animation-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animation depuis la droite */
.scroll-animation-right {
  opacity: 0;
  transform: translateX(50px);
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animation-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Ajout de délais */
.delay-1 {
  transition-delay: 0.3s;
}
.delay-2 {
  transition-delay: 0.6s;
}
.delay-3 {
  transition-delay: 0.9s;
}

/* ------------Animation GSAP PIN------------------ */

.pin-section {
  height: 20vh; /* Pleine hauteur d'écran */
  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  position: relative;
}

#rotatingSVG {
  width: 150px;
  height: 150px;
}
/*----------------img hover page Webdesign-----------*/

.image-hover-kadence {
  position: relative;
  display: inline-block;
  overflow: hidden; /* Empêche l'overlay de dépasser */
  width: 100%;
}

.image-hover-kadence img {
  display: block;
  width: 100%;
  height: auto;
  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.image-hover-kadence::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0); /* Aucune couleur de base */
  transition: background 0.3s ease;
  z-index: 2; /* S'assure que l'overlay est au-dessus de l'image */
  pointer-events: none; /* ...n’empêche plus le clic */
}

.image-hover-kadence:hover img {
  transform: scale(0.8);
}

/*--------------bandeau deroulant - Leur retour----------------*/
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #000000; /* ton jaune */
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee__track span {
  white-space: nowrap;
  padding-right: 3rem;
  font-size: clamp(9px, 1.5vw, 16px);
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
}

/* Animation continue */
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ----------overflow hidden img colonne------------  */

/* zone visible */
.chat-wrapper {
  height: 420px;
  overflow: hidden;
  position: relative;
}

/* viewport */
.chat-viewport {
  height: 100%;
  overflow: hidden;
}

/* track animé */
.chat-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.8s ease-in-out;
}

/* un message */
.chat-slide {
  height: 420px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.chat-slide img {
  width: 300px;
  height: auto;
  max-width: 100%;
}

.footer-wave {
  position: relative;
  background: #bfe3e3; /* couleur du footer */
  overflow: visible;
}

/* ------------Wave form------------------- */
/* section avec la vague */
/* Wave wrapper */
.wave-wrapper {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Forcer le conteneur Kadence à ne pas limiter la largeur */
.wave-wrapper .kt-row-column-wrap,
.wave-wrapper .wp-block-kadence-column,
.wave-wrapper .kadence-column-inner {
  overflow: visible !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Le bloc image */
.wave-img {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw !important;
  max-width: none !important;
  z-index: 3;
  pointer-events: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* L'image elle-même */
.wave-img img {
  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
  height: auto;
  display: block;
  margin: 0 !important;
}

.wave-content {
  position: relative;
  z-index: 5;
  width: 100%;
  text-align: center;
  padding: clamp(80px, 15vw, 180px) 20px 80px;
}

/*----------------Base carte lottie file-----------*/
/* === CARTE CLIQUABLE === */
.card {
  position: relative;
  cursor: pointer;
  overflow: hidden; /* 🔥 empêche le lien de déborder */
}

/* lien plein */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.card .card-link {
  position: absolute;
  inset: 0;
  z-index: 20;
}

/* === LOTTIE === */
.card .card-lottie {
  position: relative;
  z-index: 10;
  pointer-events: none;
  transition: transform 0.4s ease;
}

/* === MAIN PNG === */
.card .card-hand {
  position: absolute;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* === HOVER GLOBAL === */
.card:hover .card-lottie {
  transform: scale(1.18) rotate(12deg);
}

.card:hover .card-hand {
  opacity: 1;
}

/* === POSITIONS PAR CARTE === */
/* === CARTE 1 : main vers bas-droite === */
/* === CARTE 1 : main vers haut-gauche === */
.card-1 .card-hand {
  top: -5px;
  left: -5px;
  bottom: auto;
  right: auto;

  transform: translate(-40px, -40px) rotate(135deg);
  transform-origin: center;
}

.card-1:hover .card-hand {
  opacity: 1;
  transform: translate(0, 0) rotate(130deg);
}

.card-2 .card-hand {
  bottom: -60px;
  left: -40px;
  transform: rotate(45deg);
  opacity: 0;
}

.card-2:hover .card-hand {
  opacity: 1;
  transform: translate(480px, -15px) rotate(-30deg);
}

.card-3 .card-hand {
  top: 50px;
  right: -70px;
  transform: translate(-10%, -40px) rotate(-15deg);
}

.card-3:hover .card-hand {
  transform: translate(-60%, 0) rotate(2deg);
}
/* === POSITIONS PAR CARTE bas de page === */
.card-4 .card-hand {
  top: 50px;
  right: -20px;
  transform: translate(-180%, -40px) rotate(-15deg);
}
.card-4 .card-hand img {
  width: 150px;
}
.card-4:hover .card-hand {
  transform: translate(-80%, 0) rotate(2deg);
}

/* ❌ Désactiver les mains sur mobile */
@media (max-width: 768px) {
  .card-hand {
    display: none !important;
  }
}

.card-4 .card-hand-right-thumb {
  top: -5px;
  left: -5px;
  bottom: auto;
  right: auto;

  transform: translate(-40px, -40px) rotate(135deg);
  transform-origin: center;
}
.card-4 .card-hand-right-thumb img {
  width: 150px;
}

.card-4:hover .card-hand-right-thumb {
  opacity: 1;
  transform: translate(0, 0) rotate(130deg);
}
.radius1 img {
  border-radius: 20px;
}

/* ===  Page Web IMG icone border radius=== */
.colone-web-1 img {
  border-radius: 20px;
}
/* --------------- page accueil projet web img ------------------*/
/* Forcer les 3 colonnes à rester alignées */
.your-row-class .wp-block-kadence-column {
  flex: 1 1 33.33% !important;
  min-width: 200px;
}

/* Empêcher les images de déborder */
.wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Pour les petits écrans, passer en colonne unique */
@media (max-width: 768px) {
  .your-row-class .wp-block-kadence-column {
    flex: 1 1 100% !important;
    margin-bottom: 20px;
  }
}
/* Rétrécir les images sur mobile */
@media (max-width: 767px) {
  .wp-block-image img,
  .wp-image-5068 {
    max-width: 70% !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* -----------------IMG gallery Hover--------------- */
.kb-gallery-ul
  .kadence-blocks-gallery-item
  .kadence-blocks-gallery-item-inner
  figure
  .kb-gallery-image-contain.kadence-blocks-gallery-intrinsic
  img:hover {
  transform: scale(0.8);
  border-radius: 20px;
  transition:
    transform 0.5s ease,
    filter 0.3s ease;
}

/* -------------------ICONE reseau Hover ----------------*/
.kadence-svg-icon:hover {
  transform: rotate(+15deg);
}

/* ----------------Hand-bottom Hover---------------------- */
/* === MAIN PNG === */
.card-bottom {
  position: relative;
  overflow: hidden;
}

/* Style commun */
.card-bottom .card-hand {
  position: absolute;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===================== */
/* MAIN DU HAUT */
/* ===================== */
.card-bottom .hand-top {
  top: -80px;
  right: 150px;
  transform: rotate(15deg);
}

/* ===================== */
/* MAIN DU BAS */
/* ===================== */
.card-bottom .hand-bottom {
  bottom: -80px;
  right: 150px;
  transform: rotate(180deg);
}

/* ===================== */
/* HOVER */
/* ===================== */

.card-bottom:hover .hand-top {
  opacity: 1;
  transform: translate(-50px, 80px) rotate(180deg);
}

.card-bottom:hover .hand-bottom {
  opacity: 1;
  transform: translate(-40px, -70px) rotate(0deg);
}

/* ----------------Clap ninja gaiden --------------------- */
/* === CLAP OVERLAY === */
#clap-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  pointer-events: none;
}

#clap-left,
#clap-right {
  width: 50%;
  height: 100%;
  background: #000;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}

/* État par défaut : panneaux cachés à l'extérieur */
#clap-left {
  transform: translateX(-100%);
}
#clap-right {
  transform: translateX(100%);
}

/* Fermeture : panneaux au centre */
#clap-overlay.closing #clap-left {
  transform: translateX(0);
}
#clap-overlay.closing #clap-right {
  transform: translateX(0);
}

/* Ouverture : panneaux qui partent vers l'extérieur */
#clap-overlay.opening #clap-left {
  transform: translateX(-100%);
}
#clap-overlay.opening #clap-right {
  transform: translateX(100%);
}

/* Pendant l'ouverture, les panneaux bloquent les clics */
#clap-overlay.opening,
#clap-overlay.closing {
  pointer-events: all;
}

/* État initial sur la page Contact : panneaux fermés visibles immédiatement */
#clap-overlay.start-closed #clap-left,
#clap-overlay.start-closed #clap-right {
  transform: translateX(0);
  transition: none; /* pas d'animation à l'arrivée */
}

/* -----------------Animation GSAP Scroll ------------------ */

.product-hero {
  height: 300vh; /* nécessaire pour scroll */
  position: relative;
}

#hero-lightpass {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: block;
}
/* -----------------page motion design  ------------------ */
iframe {
  border-radius: 20px;
}
/* -----------------wave sur groupe  ------------------ */