/*
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
*/

/* =========================================================
   LOGIA — SOCLE COMMUN (Hello Elementor Child)
   ---------------------------------------------------------
   Base réutilisable extraite des projets MG+, Anouvo et
   le-sanctuaire. Ne contient que les règles qui reviennent
   d'un projet à l'autre, en gardant la version la plus
   aboutie de chacune.

   À coller en haut du style.css du child theme, AVANT les
   règles spécifiques au projet.
   ---------------------------------------------------------
   SOMMAIRE
   1. CORRECTIONS ELEMENTOR DE BASE
   2. MENU DE NAVIGATION
      2.1 Item actif
      2.2 Navbar custom Logia (desktop)
      2.3 Sous-menus
      2.4 Menu responsive (< 1024px)
      2.5 Bouton Contact (mobile uniquement)
   3. HEADER — Z-index & bannière icônes
   4. WIDGETS D'ICÔNES
      4.1 Liste d'icônes
      4.2 Widget Icône (line-height SVG)
   5. BOUTONS — Animation flèche
   6. SWIPER — Débordement des slides
   7. FOOTER — Menu centré (mobile)
   8. BASELINE H1 (gabarit à paramétrer)
   ========================================================= */


/* =========================================================
   1. CORRECTIONS ELEMENTOR DE BASE
   ========================================================= */

/* Bloque le scroll horizontal sans couper les débordements verticaux internes */
html,
body {
    overflow-x: clip; /* clip plutôt que hidden : ne crée pas de contexte de défilement */
}

/* Supprime la marge en bas du dernier élément d'un É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. MENU DE NAVIGATION
   ========================================================= */

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

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

/* 2.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;
}

/* 2.4 Menu responsive (mobile/tablette < 1024px) */
@media (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;
    }
}

/* 2.5 Bouton Contact — masqué sur desktop (≥ 1025px), visible en mobile.
   Breakpoint à 1025px (et non 1024) pour rester aligné sur le menu
   responsive : à 1024px pile, le menu mobile est encore actif. */
@media (min-width: 1025px) {
    .customNavbar .menuContact,
    .contact-menu-item {
        display: none !important;
    }
}


/* =========================================================
   3. HEADER — Z-index & bannière icônes
   ========================================================= */

header[data-elementor-type="header"] {
    position: relative;
    z-index: 999;
}

.banner-icon-list {
    transition: opacity 0.2s ease-in-out;
}

/* Masque la bannière quand un popup/dialog bloque le scroll */
body.dialog-prevent-scroll .banner-icon-list {
    opacity: 0;
}


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

/* 4.1 Liste d'icônes (.elementor-icon-wrapper) */

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

.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 icône/texte dans une liste d'icônes */
.elementor-widget.elementor-widget-icon-list.no-icon-margin {
    --e-icon-list-icon-margin: 0;
}

/* 4.2 Widget Icône — correction line-height SVG */
.elementor-widget-icon,
.elementor-widget-icon * {
    line-height: 0;
}

.elementor-widget-icon svg {
    display: block;
}


/* =========================================================
   5. BOUTONS — Animation flèche
   ---------------------------------------------------------
   Version ciblée : seules les flèches s'animent (translateX),
   pas de scale sur tout le bouton.
   ========================================================= */

.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);
}


/* =========================================================
   6. SWIPER — Débordement des slides (sur demande via .swiper-overflow)
   ========================================================= */
/* Laisse déborder les slides hors du conteneur */
.swiper-overflow .swiper {
    overflow: visible !important;
}
/* Mobile : marge à droite pour entrevoir la slide suivante */
@media (max-width: 767px) {
    .swiper-overflow .swiper {
        padding-right: 10% !important;
    }
}

/* Tablette/mobile : débordement pour le carrousel d'avis */
@media (max-width: 1024px) {
    .swiper-overflow-avis .swiper {
        overflow: visible !important;
    }
}

/* Tablette et moins : masquer les flèches de navigation */
@media (max-width: 1024px) {
    .swiper-overflow .elementor-swiper-button {
        display: none !important;
    }
}

/* =========================================================
   SWIPER — Aperçu atténué de la slide qui déborde
   (à combiner avec .swiper-overflow)
   ========================================================= */
/* Toutes atténuées par défaut */
.swiper-fade-preview .swiper-slide {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

/* Les 3 slides pleinement affichées : active + 2 suivantes */
.swiper-fade-preview .swiper-slide-active,
.swiper-fade-preview .swiper-slide-active + .swiper-slide,
.swiper-fade-preview .swiper-slide-active + .swiper-slide + .swiper-slide {
    opacity: 1;
}


/* =========================================================
   7. FOOTER — Menu centré (mobile)
   ========================================================= */

@media (max-width: 767px) {
    .menu-footer-centre .elementor-nav-menu--layout-vertical > ul > li > a {
        justify-content: center;
    }
}


/* =========================================================
   8. BASELINE H1 — gabarit à paramétrer
   ---------------------------------------------------------
   Reprend une typographie globale Elementor dédiée. Remplace
   l'ID de variable (--e-global-typography-XXXXXXX-*) par celui
   du projet courant (chaque site a ses propres globales).
   ========================================================= */

.baseline_h1 {
    font-family: var(--e-global-typography-XXXXXXX-font-family), sans-serif;
    font-size: var(--e-global-typography-XXXXXXX-font-size);
    font-weight: var(--e-global-typography-XXXXXXX-font-weight);
    line-height: var(--e-global-typography-XXXXXXX-line-height);
    letter-spacing: var(--e-global-typography-XXXXXXX-letter-spacing);
    text-transform: none; /* Annule le text-transform de la variable globale */
    display: block;
}


/* =========================================================
   ==========  SPÉCIFIQUE PROJET — AIM SOLUTIONS  ==========
   ---------------------------------------------------------
   SOMMAIRE
   A. ACCENT TITRE (mot surligné)
   B. SECTION HERO — largeur & arrondis (grand écran)
   C. HOVER CARDS — inversion de fond
      C.1 Transitions (commun)
      C.2 Card light : clair → foncé
      C.3 Card dark  : foncé → clair
   D. AVIS CLIENTS — Voir plus / Voir moins
   ========================================================= */


/* =========================================================
   A. ACCENT TITRE (mot surligné)
   ========================================================= */

.accent-titre {
    color: var(--e-global-color-primary); /* le bleu */
    font-weight: 500;
    background-image: linear-gradient(var(--e-global-color-ac97a5c), var(--e-global-color-ac97a5c));
    background-repeat: no-repeat;
    background-position: 0 100%;        /* en bas */
    background-size: 100% 3.6px;        /* épaisseur du surlignage jaune */
}

/* Variante sur fond sombre : juste le bleu clair */
.accent-titre.accent-titre--clair {
    color: var(--e-global-color-6e82357);
}


/* =========================================================
   B. SECTION HERO — largeur & arrondis (≥ 1720px)
   ========================================================= */

@media all and (min-width: 1720px) {
    .section {
        max-width: 1380px !important;
    }

    .section .left {
        padding-left: 0px;
    }

    .section.right {
        padding-right: 50px;
    }

    .section .colMax {
        border-radius: 32px;
    }
}


/* =========================================================
   C. HOVER CARDS — INVERSION DE FOND
   ---------------------------------------------------------
   Classes : .card-light (clair → foncé)
             .card-dark  (foncé → clair)
   ========================================================= */

/* C.1 Transitions (état de repos, commun aux deux) */
.card-light,
.card-dark,
.card-light .elementor-icon-box-title span,
.card-dark .elementor-icon-box-title span,
.card-light .elementor-icon-box-description,
.card-dark .elementor-icon-box-description,
.card-light .elementor-widget-icon .elementor-icon svg rect,
.card-dark .elementor-widget-icon .elementor-icon svg rect,
.card-light .elementor-widget-icon .elementor-icon svg path,
.card-dark .elementor-widget-icon .elementor-icon svg path {
    transition: all 0.3s ease;
}
.card-light::before,
.card-dark::before {
    transition: background-color 0.3s ease;
}

/* C.2 CARD LIGHT : clair → foncé */

/* Fond */
.card-light:hover {
    background-color: var(--e-global-color-bf65070) !important;
}
.card-light:hover::before {
    background-color: var(--e-global-color-bf65070) !important;
}

/* Titre */
.card-light:hover .elementor-icon-box-title span {
    color: var(--e-global-color-6e82357);
}

/* Description */
.card-light:hover .elementor-icon-box-description {
    color: #FFFFFF !important;
}

/* Bouton flèche : cercle rouge, flèche blanche */
.card-light:hover .elementor-widget-icon .elementor-icon svg rect {
    fill: var(--e-global-color-accent);
    stroke: var(--e-global-color-accent);
}
.card-light:hover .elementor-widget-icon .elementor-icon svg path {
    fill: #FFFFFF;
}

/* C.3 CARD DARK : foncé → clair */

/* Fond */
.card-dark:hover {
    background-color: #FFFFFF !important;
}
.card-dark:hover::before {
    background-color: #FFFFFF !important;
}

/* Titre */
.card-dark:hover .elementor-icon-box-title span {
    color: var(--e-global-color-primary);
}

/* Description */
.card-dark:hover .elementor-icon-box-description {
    color: var(--e-global-color-text) !important;
}

/* Bouton flèche : cercle rouge, flèche noire */
.card-dark:hover .elementor-widget-icon .elementor-icon svg rect {
    fill: var(--e-global-color-accent);
    stroke: var(--e-global-color-accent);
}
.card-dark:hover .elementor-widget-icon .elementor-icon svg path {
    fill: #000000;
}


/* =========================================================
   D. AVIS CLIENTS — Voir plus / Voir moins
   ========================================================= */

/* Texte de l'avis : tronqué à 4 lignes tant que .open n'est pas posé */
.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container:not(.open) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    max-height: calc(4 * 1.5em);
}

.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container:not(.open) p {
    margin: 0;
}

.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container.open p {
    margin: 0 0 0.8em 0;
}

.loop-avis-client .swiper-slide .elementor-widget-text-editor .elementor-widget-container.open p:last-child {
    margin-bottom: 0;
}

/* Bouton "Voir plus / Voir moins" */
button.avis-toggle,
button.avis-toggle:hover,
button.avis-toggle:focus {
    background: none !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: block;
    margin-left: auto;
    margin-top: 0.5em;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

button.avis-toggle,
button.avis-toggle:focus {
    color: var(--e-global-color-accent);
}

button.avis-toggle:hover {
    color: var(--e-global-color-ac97a5c);
}

/* =========================================================
   SURTITRES — base commune + variantes de traits
   ========================================================= */

/* Base : layout + variables par défaut (aucun trait posé ici) */
.surtitre .elementor-heading-title {
    --trait-longueur: 24px;
    --trait-epaisseur: 3px;
    --trait-couleur: var(--e-global-color-ac97a5c); /* jaune #FFCB04 */
    --trait-gap: 20px;

    display: inline-flex;
    align-items: center;
    gap: var(--trait-gap);
}

/* Le trait, factorisé */
.surtitre--gauche .elementor-heading-title::before,
.surtitre--traits .elementor-heading-title::before,
.surtitre--traits .elementor-heading-title::after {
    content: "";
    width: var(--trait-longueur);
    height: var(--trait-epaisseur);
    background-color: var(--trait-couleur);
    flex: 0 0 auto;
}

/* Variante surtitre H2 : trait foncé, plus fin et plus court */
.surtitre--gauche .elementor-heading-title {
    --trait-longueur: 20px;
    --trait-epaisseur: 1px;
	--trait-gap: 16px;
    --trait-couleur: var(--e-global-color-bf65070); /* foncé #101E24 */
}