/**
 * Theme Name:     S.I.H.J
 * Author:         Florent
 * Template:       kadence
 * Text Domain:	   s-i-h-j
 * Description:    Thème de surcouche à Kadence
 */
#masthead{
	z-index: 999 !important;
}

.floating-image {
    position: relative; /* Nécessaire pour le mouvement */
    animation: float 3s ease-in-out infinite; /* Animation d'oscillation */
}

/* Définir l'animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px); /* Position de départ et de fin */
    }
    50% {
        transform: translateY(-10px); /* Monte de 10 pixels */
    }
}


/* Initialiser les sections avec un effet fade-in */
.fade-in, .fade-in-2, .fade-in-3, .fade-in-4 {
    opacity: 0; /* Début invisible */
    transform: translateY(30px); /* Commence légèrement en bas */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Transition fluide pour les deux propriétés */
}

/* Lorsqu'une section devient visible */
.scroll-active {
    opacity: 1; /* Rendre la section visible */
    transform: translateY(0); /* Positionne la section normalement */
}

/* Ajout du fade-out lorsque la section disparaît */
.fade-out {
    opacity: 0; /* Rendre la section invisible */
    transform: translateY(30px); /* Déplacement vers le bas pour simuler la disparition */
}


/* Effet de déplacement au survol */
.wp-block-kadence-column.hover-move {
    transition: transform 0.3s ease; /* Transition fluide */
    position: relative; /* Nécessaire pour le z-index */
    z-index: 1; /* Met la section au-dessus des autres éléments */
}

.wp-block-kadence-column.hover-move:hover {
    transform: translate(10px, -10px); /* Déplacement vers la droite et vers le haut */
}
/**************************/
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* Premier rebond vers le haut */
    }
    60% {
        transform: translateY(-5px); /* Deuxième rebond plus bas */
    }
}

.wp-block-kadence-image.kb-image7_587930-93.size-full {
    display: inline-block; /* S'assure que l'élément est traité comme un bloc */
}

.bounce {
    animation: bounce 0.6s; /* Durée totale de l'animation */
}

.z-index-10 {
    position: relative; /* Nécessaire pour que le z-index fonctionne */
    z-index: 10; /* Ajustez la valeur de z-index selon vos besoins */
}
.z-index-11 {
    position: relative; /* Nécessaire pour que le z-index fonctionne */
    z-index: 11; /* Ajustez la valeur de z-index selon vos besoins */
}

/* Conteneur de l'image avec overflow: hidden pour masquer les parties dépassantes */
.img-zoom-container {
    position: relative;  /* Positionner le conteneur relativement pour bien contenir l'image */
    overflow: hidden;    /* Masquer tout ce qui dépasse */
}

/* Image avec effet de zoom */
.img-zoom {
    transition: transform 0.3s ease; /* Transition pour un zoom fluide */
    display: block;     /* Assurer que l'image se comporte comme un bloc pour éviter des espacements supplémentaires */
    width: 100%;        /* Assurer que l'image occupe tout l'espace disponible */
    height: auto;       /* Maintenir la proportion de l'image */
}

.img-zoom:hover {
    transform: scale(1.1); /* Zoom au survol, ajustez le facteur selon vos besoins */
}

.tilt-on-hover {
    
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}

.tilt-on-hover:hover {
    transform: rotateY(60deg);
}

.section-hover:hover .image-to-rotate {
    transform: rotateY(50deg); /* Pivote l'image de 20 degrés sur l'axe Y */
    transition: transform 0.5s ease; /* Transition douce de 0.5s */
    transform-style: preserve-3d; /* Active l'effet 3D */
}

/* Style initial du bouton */
.wpforms-submit.envoyer {
    background-color: #ff3b00 !important;
    color: #ffffff !important;
    border: none !important; /* Supprime les bordures si nécessaire */
    padding: 10px 20px !important; /* Ajustez le padding pour la taille du bouton */
    font-size: 16px !important; /* Ajustez la taille du texte */
    cursor: pointer !important; /* Change le curseur en mode "pointer" */
    transition: background-color 0.3s ease !important; /* Animation de transition */
}

/* Style au survol du bouton */
.wpforms-submit.envoyer:hover {
    background-color: #cc3200 !important; /* Une teinte plus sombre de la couleur initiale */
    color: #ffffff !important;
}

#wpforms-814-field_3, .width-contact {
    width: 100% !important; /* Correspond à la largeur du champ e-mail */
    max-width: 60%; /* Limite la largeur au conteneur */
    box-sizing: border-box; /* Assure que les marges et paddings sont pris en compte */
}
/*
.kb-button .kb-svg-icon-wrap {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.kb-button:hover .kb-svg-icon-wrap {
    opacity: 1;
}



.header-button-inner-wrap .button {
    transition: transform 0.3s ease;
}

.header-button-inner-wrap .button:hover {
    transform: scale(1.05); /* Augmente la taille de 5% */
}
*/
/* Par défaut, aligner à gauche */
.alignable-text {
  text-align: left !important;
}

.mobile-br {
  display: none;
}

/* Sur mobile, aligner au centre (max-width: 768px pour tablettes et téléphones) */
@media (max-width: 768px) {
  .alignable-text {
    text-align: center !important;
  }
	.mobile-br {
    display: block;
  }
}

.kt-adv-heading37_9d18c0-e4 {
    text-align: justify;
}

.envoyer:hover {
    background-color: white; /* Couleur de fond au survol */
    color: orange; /* Couleur du texte au survol */
    border: 2px solid orange; /* Bordure au survol */
}