/*
Theme Name: Divi Child
Theme URI: https://fabien-seo.com
Description: Thème enfant de divi par Fabien SEO
Author: Fabien SCHNEIDER - Fabien SEO
Author URI: https://fabien-seo.com
Template: Divi
Text Domain: mosaique
Version: 1.0
*/

/* Généraliser le gras à 600 sur TOUT le site */
strong {
    font-weight: 600 !important;
}

/* Gros module style FAQ des Services */
.faq-module {
  display: flex;
  gap: 40px;
}

.faq-left {
  flex: 1;
}

.faq-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.faq-right img {
  width: 100%;
  height: auto; /* ne jamais couper l'image */
  max-width: 100%;
  max-height: 800px;
  transition: opacity 0.5s ease;
  object-fit: contain;
}

.faq-title {
	color: white;
	font-weight:600;
	padding-bottom: 0px;
	font-size: 20px !important;
}

/*BLOC FAQ*/
.faq-item {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
/* Effet bump + ombre porté sur tout le bloc */
.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

/*HEADER (ENCART ORANGE)*/
.faq-header {
  background-color: #f28705 !important;
  color: white !important;        /* titre toujours blanc */
  font-weight: 700 !important;    /* titre toujours gras */
  font-size: 18px;
  padding: 8px 25px; /* Was 18 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px 20px 0 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

/* Effet balayage lumineux */
.faq-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transition: left 0.6s ease;
}

.faq-header:hover::before {
  left: 100%;
}

/*ICÔNE +*/
.faq-icon {
  width: 36px;
  height: 36px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

/* Le signe + disparaît quand ouvert */
.faq-item.active .faq-icon {
  opacity: 0;
  visibility: hidden;
}

/*CONTENU (ENCART BLEU)*/
.faq-content {
  background-color: #2c4964;
  color: white;
  font-size: 16px;
  font-weight: 300;
  padding: 0 25px;
  max-height: 0;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  transition: all 0.4s ease;
}

/* Contenu visible */
.faq-item.active .faq-content {
  padding: 20px 25px;
  max-height: 1200px; /* suffisant pour texte long */
}

/*IMAGE MOBILE*/
.faq-image-mobile {
  display: none;
  margin-top: 10px;
}

.faq-image-mobile img {
  width: 100%;
  height: auto;
  max-height: 400px; /* limite raisonnable pour mobile */
  object-fit: contain;
  border-radius: 20px;
}

/*RESPONSIVE*/
@media (max-width: 980px) {
  .faq-module {
    flex-direction: column;
  }

  .faq-right {
    display: none;
  }

  .faq-image-mobile {
    display: block;
  }
}

/* Read more link button */
.et_pb_posts .et_pb_post .post-content .more-link, 
.et_pb_blog_grid .et_pb_post .post-content .more-link {
color: white !important;
  border-radius: 60px;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  background-color: rgba(255,255,255,0.12);
border: solid 2px white;
	width: 150px;
  text-align: center;
	margin-top: 20px;
	display: block;
	padding: 5px;
}
.button-blog-news-grid .more-link {
	margin-top: 20px;
  display: block;
}

/* Forcer la fonction du footer BG aléatoire */
.et_pb_footer {
    min-height: 400px; /* Ajuste selon ton design */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/* Fin custom footer */

/* Créer de l'espace entre les éléments du menu */
.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
  margin-right: 40px !important;
}

/* Header fixe en haut */
.custom-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 20px 0;
    transition: all 0.3s ease;
    background-color: transparent;
}

/* Effet sticky après scroll */
.custom-header.shrink {
	/*height: 104px !important;*/
    padding: 20px 0;
    background-color: rgba(21, 49, 75, 0.5) !important;
    backdrop-filter: blur(10px) brightness(1.05);
}
.et_pb_section_0_tb_header.et_pb_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background-color: none !important;
}

/* Logo */
.custom-header img {
    transition: all 0.3s ease;
    width: 200px;
    height: auto;
}

.custom-header.shrink img {
    width: 150px;
}

/* Conteneur global */
.floating-buttons {
    position: fixed;
    top: 120px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

/* Bouton */
.floating-btn {
    display: flex;
    align-items: center;
    height: 50px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    background-color: #5191cd;
    width: 50px;
    justify-content: flex-start;
    transition: width 0.3s ease;
    margin-left: auto; /* force chaque bouton à rester collé à droite */
}

/* Icône */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.btn-icon svg {
    width: 24px;
    height: 24px;
}

/* Texte */
.btn-text {
    white-space: nowrap;
    padding: 0 15px;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    font-weight: bold;
}

/* Survol : le bouton s’élargit uniquement vers la gauche */
.floating-btn:hover {
    width: 180px; /* largeur languette dépliée */
}

/* Texte devient visible uniquement sur le bouton survolé */
.floating-btn:hover .btn-text {
    opacity: 1;
}

/* Mobile : placer en bas à droite */
@media (max-width: 767px) {
    .floating-buttons {
        top: auto;
        bottom: 50%; /* was 20px */
        right: 0;
    }
}

/* MENU MOBILE : S'applique uniquement sur mobile (écrans < 981px) et hors éditeur visuel */
@media (max-width: 980px) {
    .mobile_nav.opened .et_mobile_menu, 
    .mobile_nav.opened #mobile_menu1 {
        display: block !important;
        max-height: 75vh !important; 
        overflow-y: auto !important;
        overflow-x: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
        -webkit-overflow-scrolling: touch; /* Scroll fluide sur iPhone */
    }

    /* 2. ÉTAT FERMÉ DES SOUS-MENUS */
    .et_mobile_menu li.menu-item-has-children > ul.sub-menu,
    #mobile_menu1 li.menu-item-has-children > ul.sub-menu {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transition: max-height 0.4s ease, opacity 0.3s ease;
    }

    /* 3. ÉTAT OUVERT */
    .et_mobile_menu li.menu-ouvert > ul.sub-menu,
    #mobile_menu1 li.menu-ouvert > ul.sub-menu {
        max-height: 2000px !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 10px 0 10px 15px !important;
    }

    /* 4. STYLE DES FLÈCHES */
    li.menu-item-has-children { position: relative !important; }

    .vrai-toggle {
        position: absolute !important;
        top: 0;
        right: 0;
        width: 50px;
        height: 45px;
        z-index: 999;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .vrai-toggle::before {
        content: "\f078" !important;
        font-family: "Font Awesome 6 Solid", "Font Awesome 7 Solid", "Font Awesome 5 Free" !important;
        font-weight: 900;
        color: #5191cd !important;
        font-size: 16px;
        transition: transform 0.3s ease;
    }

    li.menu-ouvert > .vrai-toggle::before {
        transform: rotate(180deg);
    }
}