/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
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: 2.0.0
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
*/

/* =========================================================
   SOMMAIRE
   =========================================================
   1. Corrections générales Elementor
   2. Section Hero (overlay et dégradés)
   3. Typographies personnalisées
      3.1 Baseline H1
   4. Éléments décoratifs
      4.1 Titre avec ligne de soulignement
      4.2 Image avec overlay dégradé
   5. Menu de navigation
      5.1 État actif
      5.2 Navbar custom Logia (desktop)
      5.3 Sous-menus
      5.4 Menu responsive (mobile/tablette)
   6. Widgets d'icônes
   7. Boutons (animation flèche)
   8. Carousel équipe
      8.1 Desktop (≥ 1025px)
      8.2 Mobile + Tablette — règles communes (≤ 1024px)
      8.3 Tablette (768px – 1024px)
      8.4 Mobile (≤ 767px)
      8.5 Global — anti-scroll horizontal
   9. Footer
      9.1 Menu centré (mobile)
   ========================================================= */


/* =========================================================
   1. CORRECTIONS GÉNÉRALES ELEMENTOR
   ========================================================= */

/* Supprime la marge en bas du dernier élément dans un widget Éditeur de texte */
.elementor-widget-text-editor .elementor-widget-container > *:last-child,
.elementor-widget-text-editor .elementor-widget-container > *:last-child > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   2. SECTION HERO (OVERLAY ET DÉGRADÉS)
   ========================================================= */

/* Conteneur principal de la section Hero */
#hero-section {
    position: relative;
    min-height: 100vh;        /* fallback */
    min-height: 100svh;       /* safe — barre toujours comptée */
}

/* Overlay dégradé appliqué par-dessus l'image/fond du Hero */
#hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(83, 75, 62, 0) 63.45%, #534B3E 100%),
        linear-gradient(201deg, rgba(0, 0, 0, 0) 51.47%, rgba(0, 0, 0, 0.5) 88.8%);
}

#hero-section .elementor-background-video-container {
    width: 100%;
    height: 100%;
}
#hero-section .elementor-background-video-container video,
#hero-section .elementor-background-video-hosted {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* =========================================================
   3. TYPOGRAPHIES PERSONNALISÉES
   ========================================================= */

/* 3.1 Baseline H1 — applique la typographie globale Elementor */
.baseline_h1 {
    font-family: var(--e-global-typography-ac65991-font-family), sans-serif;
    font-size: var(--e-global-typography-ac65991-font-size);
    font-weight: var(--e-global-typography-ac65991-font-weight);
    line-height: var(--e-global-typography-ac65991-line-height);
    letter-spacing: var(--e-global-typography-ac65991-letter-spacing);
    text-transform: none; /* Forcé à none pour annuler le text-transform de la variable globale */
    display: block;
	margin-top:-10px;
}


/* =========================================================
   4. ÉLÉMENTS DÉCORATIFS
   ========================================================= */

/* 4.1 Titre avec ligne de soulignement décorative */
.title-with-line {
    position: relative;
    padding-bottom: 40px;
}

.title-with-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 80px);
    height: 3px;
    background-color: #9A938640;
}

/* Sur tablette, la ligne dépasse moins */
@media all and (max-width: 1024px) {
    .title-with-line::after {
        width: calc(100% + 30px);
    }
}

/* Sur mobile, la ligne ne dépasse plus du titre */
@media all and (max-width: 767px) {
    .title-with-line::after {
        width: 100%;
    }
	.title-with-line {
    position: relative;
    padding-bottom: 40px;
}
}

/* 4.2 Image avec overlay dégradé en bas */
.image-with-overlay {
    position: relative;
}

.image-with-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(83, 75, 62, 0) 63.45%, #534B3E 100%);
}


/* =========================================================
   5. MENU DE NAVIGATION
   ========================================================= */

/* 5.1 Élément de menu actif en gras */
.elementor-nav-menu .elementor-item-active {
    font-weight: 600 !important;
}

/* 5.2 Navbar custom Logia — style desktop */
.customNavbar a {
    line-height: 1.6rem !important;
}

/* Masque le bouton "Contact" sur desktop (visible uniquement en mobile) */
@media all and (min-width: 1024px) {
    .customNavbar .menuContact {
        display: none;
    }
}

/* 5.3 Sous-menus (dropdown) */
.customNavbar ul.sub-menu {
    padding: 5px !important;
}

.customNavbar ul.sub-menu li a {
    border-radius: 5px;
}

.customNavbar ul.sub-menu li.menu-item {
    margin-bottom: 5px;
}

.customNavbar ul.sub-menu li.menu-item:last-child {
    margin-bottom: 0;
}

/* 5.4 Menu responsive (mobile/tablette < 1024px) */
@media all and (max-width: 1024px) {
    .customNavbar ul {
        padding: 5px !important;
    }

    .customNavbar ul li a {
        border-radius: 5px;
    }

    .customNavbar ul li.menu-item {
        margin-bottom: 5px;
    }

    .customNavbar ul li.menu-item:last-child {
        margin-bottom: 0;
    }
}


/* =========================================================
   6. WIDGETS D'ICÔNES
   ========================================================= */

/* Reset du wrapper pour éviter les espaces parasites */
.elementor-icon-wrapper {
    line-height: 0;
    font-size: 0;
}

/* Centrage et affichage correct de l'icône */
.elementor-icon-wrapper .elementor-icon {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.elementor-icon-wrapper .elementor-icon i {
    display: block;
    line-height: 1;
}

/* Classe utilitaire : supprime la marge entre l'icône et le texte dans une liste d'icônes */
.elementor-widget.elementor-widget-icon-list.no-icon-margin {
    --e-icon-list-icon-margin: 0;
}


/* =========================================================
   7. BOUTONS (ANIMATION FLÈCHE)
   ========================================================= */

/* Animation flèche uniquement (pas les autres icônes) */
.elementor-button .elementor-button-icon .fa-arrow-right,
.elementor-button .elementor-button-icon .fa-arrow-left,
.elementor-button .elementor-button-icon .fa-long-arrow-alt-right {
    display: inline-block;
    transition: transform 0.3s ease;
}

.elementor-button:hover .elementor-button-icon .fa-arrow-right,
.elementor-button:hover .elementor-button-icon .fa-long-arrow-alt-right {
    transform: translateX(4px);
}

.elementor-button:hover .elementor-button-icon .fa-arrow-left {
    transform: translateX(-4px);
}


/* =========================================================
   8. CAROUSEL ÉQUIPE
   ---------------------------------------------------------
   Structure :
   • Desktop (≥ 1025px) : plusieurs cards visibles, slide active
     plus grande, texte qui glisse à droite depuis derrière l'image.
   • Tablette (768 – 1024px) : 1 card centrée avec peek des
     voisines, texte en dessous, flèches masquées.
   • Mobile (≤ 767px) : 1 card avec peek léger, texte en
     dessous, flèches masquées.
   ========================================================= */

/* 8.1 Desktop (≥ 1025px) */
@media (min-width: 1025px) {
    .swiper {
        overflow-x: clip;
        overflow-y: visible;
    }

    .swiper-wrapper {
        align-items: flex-start;
    }

    .swiper-slide {
        position: relative;
        height: clamp(450px, 44vh, 560px);
    }

    .swiper-slide-active {
        height: clamp(500px, 40vh, 580px);
    }

    /* Parent direct : c'est lui qui s'anime */
    .swiper-slide > div {
        position: relative;
        height: 50% !important;
        overflow: visible;
        transition: height 800ms ease;
    }

    .swiper-slide-active > div {
        height: 100% !important;
    }

    /* Wrappers Elementor intermédiaires */
    .swiper-slide > div > div,
    .swiper-slide > div > div > div {
        height: 100% !important;
        overflow: visible;
    }

    /* Container qui porte l'image en background */
    .swiper-slide > div > div > div > .elementor-element-e293090 {
        position: relative;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        overflow: visible;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Texte de la card — glisse depuis derrière l'image */
    .swiper-slide .texte-carousel {
        position: absolute;
        top: auto;
        right: -10px;
        bottom: 0;
        left: auto;
        width: min(750px, 60vw);
        max-width: none !important;
        z-index: -1;
        pointer-events: none;
        opacity: 0;
        transform: translateX(150%);
        transition: opacity 400ms ease, transform 400ms ease;
    }

    .swiper-slide-active .texte-carousel {
        pointer-events: auto;
        animation: textSlideIn 600ms 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes textSlideIn {
        from {
            opacity: 0;
            transform: translateX(90%);
        }
        to {
            opacity: 1;
            transform: translateX(100%);
        }
    }

    /* Flèches de navigation en bas à droite */
    .elementor-swiper-button-prev,
    .elementor-swiper-button-next {
        top: auto !important;
        bottom: 0 !important;
        transform: none !important;
    }

    .elementor-swiper-button-prev {
        right: 60px !important;
        left: auto !important;
    }

    .elementor-swiper-button-next {
        right: 0 !important;
    }
}

/* 8.2 Mobile + Tablette — règles communes (≤ 1024px) */
@media (max-width: 1024px) {
    .swiper {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* Flèches masquées (navigation au swipe uniquement) */
    .elementor-swiper-button-prev,
    .elementor-swiper-button-next {
        display: none !important;
    }

    /* Texte de description positionné en dessous de l'image */
    .swiper-slide .texte-carousel {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
        width: 100%;
        max-width: none !important;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        transform: translateY(150%);
        transition: opacity 400ms ease, transform 400ms ease;
    }

    .swiper-slide-active .texte-carousel {
        pointer-events: auto;
        animation: textSlideInMobile 600ms 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes textSlideInMobile {
        from {
            opacity: 0;
            transform: translateY(90%);
        }
        to {
            opacity: 1;
            transform: translateY(100%);
        }
    }
}

/* 8.3 Tablette (768 – 1024px) — peek marqué des cards voisines */
@media (min-width: 768px) and (max-width: 1024px) {
    .swiper {
        padding-right: 30% !important;
        overflow: visible !important;
    }
}

/* 8.4 Mobile (≤ 767px) — peek discret des cards voisines */
@media (max-width: 767px) {
    .swiper {
        padding-right: 10% !important;
        overflow: visible !important;
    }
}

/* 8.5 Global — empêche la scrollbar horizontale due au peek */
.elementor-widget:has(.swiper),
.elementor-section:has(.swiper) {
    overflow-x: clip;
}

/* 8.6 Anti-FOUC — cache le carousel jusqu'à init de Swiper */
.carousel-team .swiper {
    opacity: 0;
    transition: opacity 400ms ease;
}

.carousel-team .swiper.swiper-initialized {
    opacity: 1;
}


/* =========================================================
   9. FOOTER
   ========================================================= */

/* 9.1 Menu centré sur mobile */
@media (max-width: 767px) {
    .menu-footer-centre .elementor-nav-menu--layout-vertical > ul > li > a {
        justify-content: center;
    }
}

@media (min-width: 1025px) {
  .contact-menu-item {
    display: none !important;
  }
}