/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

@font-face {
  font-family: "Modern No. 20";
  src: url("http://bm-avocats.ethiko.io/wp-content/uploads/2025/11/Modern-Regular.woff2") format("woff2"),
       url("http://bm-avocats.ethiko.io/wp-content/uploads/2025/11/Modern-Regular.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

span.styl-font {
    font-family: "Modern No. 20", Serif !important;
    font-weight: 200 !important;
}

span.forminator-description {
    display: none !important;
}

input.forminator-input {
    padding: 15px 10px !important;
    border-radius: 5px !important;
}

div.forminator-field-textarea .forminator-textarea {
    border-radius: 5px !important;
}

button.forminator-button.forminator-button-submit {
    background-color: #26342E;
    color: #fff !important;
    padding: 10px 30px !important;
    border-radius: 5px !important;
}

.cust_flip .elementor-flip-box__front h3.elementor-flip-box__layer__title {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
	padding: 20px !important;
    margin-bottom: 0 !important;
}

.cust_flip .elementor-flip-box__layer.elementor-flip-box__back {
    height: 50%;
    bottom: 0;
}

.cust_flip .elementor-flip-box:hover .elementor-flip-box__front h3.elementor-flip-box__layer__title {
    opacity: 0;
    transition: all 0.2s linear;
}

.cust_flip .elementor-flip-box .elementor-flip-box__front h3.elementor-flip-box__layer__title {
    opacity: 1;
    transition: all 0.6s linear;
}

.cust_flip a.elementor-flip-box__button.elementor-button {
    padding: 0 !important;
}

.cust_flip .elementor-flip-box__layer__description {
    border-bottom: 1px solid #fff;
    padding-bottom: 20px !important;
}

.elementor-flip-box__button,
.elementor-flip-box_button.elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.elementor-flip-box__button::after,
.elementor-flip-box_button.elementor-button::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("/wp-content/uploads/2025/11/ic-arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  position: relative;
  top: 3px;
}

.elementor-flip-box__button:hover::after,
.elementor-flip-box_button.elementor-button:hover::after {
  transform: translateX(3px);
}


/* ===== Preview à droite, carré ===== */
.services-hover {
  position: relative;
}

/* Lignes de la liste */
.hover-service {
  position: relative;
  display: block;
  padding: 18px 0;
  color: #6C6C6C;
  text-transform: uppercase;
  font-weight: 400;
  font-family: "Poppins", Sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  transition: color .35s ease, letter-spacing .35s ease, background-color .35s ease;
  cursor: pointer;
  z-index: 1;
}
.hover-service:hover {
  color: #0E2F28;
  letter-spacing: .4px;
}

/* Soulignement discret (optionnel) */
.hover-service .elementor-heading-title { position: relative; }
.hover-service .elementor-heading-title::after {
  content: "";
  position: absolute; left: 0; 
	bottom: -10px;
  height: 2px; width: 0; 
	/*background: currentColor;*/
  transition: width .35s ease;
}
.hover-service:hover .elementor-heading-title::after { width: 90px; }

/* Boîte d’aperçu à droite */
.services-preview{
  position: absolute;
  right: 0;                         /* accrochée à droite du conteneur */
  top: var(--preview-top, 0px);     /* y dynamique défini en JS */
  width: clamp(220px, 28vw, 360px); /* s’adapte, tout en restant carré */
  aspect-ratio: 1/1;
  background-image: var(--preview-image);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(0) scale(.98);
  transition: opacity .3s ease, top .25s ease, transform .3s ease;
  pointer-events: none;             /* ne bloque pas le hover */
  overflow: hidden;
}

/* On n’affiche la preview que quand on survole la zone liste */
.services-hover:hover .services-preview{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Espace à droite pour ne pas chevaucher le texte (si nécessaire) */
@media (min-width: 992px){
  /*.services-hover { padding-right: clamp(240px, 30vw, 380px); }*/
}

/* Mobile : on peut masquer la preview */
@media (max-width: 767px){
  .services-preview{ display: none; }
}

.hover-service:hover {
    padding-left: 20px;
    transition: all 0.2s linear;
}

.hover-service {
    transition: all 0.2s linear;
}

.hover-service:hover p.elementor-heading-title.elementor-size-default {
    color: #83A697 !important;
}