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

/* =========================================================
   MASTER SOLUTIONS — style.css (Hello Elementor Child)
   =========================================================
   SOMMAIRE
   ---------------------------------------------------------
   A. SOCLE UNIVERSEL LOGIA
      1. Corrections Elementor de base
      2. Widgets d'icônes
         2.1 Liste d'icônes (wrapper)
         2.2 Widget Icône (line-height SVG)
         2.3 Utilitaire no-icon-margin
      3. Swiper — Débordement des slides
      4. Footer — Menu centré (mobile)
      5. Phantom — Éléments décoratifs

   B. HEADER & FOOTER
      6. Header — Structure & z-index
      7. Header — Fond de la navbar (par contexte + au scroll)
      8. Header — Menu de navigation
         8.1 Liens (couleur pilotée par variables)
         8.2 Item actif (gras)
         8.3 Sous-menus (dropdown desktop)
         8.4 Menu responsive (< 1024px)
         8.5 Bouton Contact mobile
         8.6 Icônes mobile/tablette (burger + téléphone)
         8.7 Menu déroulant mobile/tablette (fond blanc)
      9. Header — Pattern en indicateur de sous-menu (masque SVG)
      10. Header — Bouton CTA (offset shadow)
      11. Header — Contextes couleur (variables par page/type)
          11.1 404
          11.2 Single réalisation
          11.3 Contraste au scroll (single réalisation)
      12. Footer — Pattern en indicateur de sous-menu (masque SVG)

   C. SPÉCIFIQUE MASTER SOLUTIONS
      13. Typographie marque (Hero accueil)
      14. Surtitre avec icône (masque SVG)
      15. Titre avec icône — ligne simple (masque SVG)
      16. Titre avec pattern — gros titre multiligne
      17. Accent titre (mot mis en avant)
      18. Avis clients — Voir plus / Voir moins
      19. Méthodologie — Masquer la flèche du dernier slide
      20. Section Corps de métier (grille + flip au survol)
      21. Formes décoratives (accent visuel ::after)
      22. Hero accueil — hauteur pleine écran (svh)
      23. Cartes prestations — couleurs via ACF (.carte-metier)
      24. Btn repli — ombre solide qui se replie
      25. Load more (Loop Grid) — repli de l'ombre

   POINTS DE VIGILANCE :
   - 8.2 Menu actif : poids 600. Le socle historique utilisait 700.
   - 8.5 Bouton Contact : breakpoint 1025px (aligné sur menu < 1024px).
   - 8.6 Icônes burger/téléphone : icône en #fff fixe. OK sur les
     contextes marine/jaune actuels. Si un contexte a une ombre
     CLAIRE, passer l'icône en variable pour garder le contraste.
   - HEADER : les couleurs (menu, pattern, bouton) sont pilotées par
     des variables --e-global-color-*-header, injectées par page via
     ACF (fonction logia_header_custom_colors en PHP). Les blocs
     contextuels (404, single réalisation) surchargent ces variables
     en CSS car ces contextes n'ont pas de champs ACF.
   - 19 Méthodologie : règle GLOBALE (fichier chargé partout). Elle
     masque le ::after du dernier slide de TOUS les carrousels du
     site. À scoper avec une classe si un autre carrousel utilise
     un ::after sur ses conteneurs.
   - 23 Cartes prestations : couleurs pilotées par des variables
     --carte-* injectées via ACF sur chaque carte, avec fallback sur
     les couleurs globales. Le titre utilise !important pour passer
     devant la couleur inline d'Elementor : pour recolorer, toujours
     passer par la variable, jamais par le color picker du widget.
   - 24 Btn repli : ne JAMAIS combiner avec .btn-header (section 10,
     déjà géré). Sur .btn-carte, la transition 23.4 doit inclure
     transform. Neutralise le Transformer Elementor au hover.

   Version AGNOSTIQUE : section 1 compatible avec et sans la couche
   .elementor-widget-container (réglage "Balisage optimisé").
   ========================================================= */


/* =========================================================
   ============  A. SOCLE UNIVERSEL LOGIA  =================
   ========================================================= */

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


/* =========================================================
   1. CORRECTIONS ELEMENTOR DE BASE
   ---------------------------------------------------------
   Supprime la marge en bas du dernier élément d'un Éditeur de
   texte, d'un Extrait d'article (theme-post-excerpt) OU du
   Contenu d'article (theme-post-content).
   Compatible avec ou sans .elementor-widget-container
   (Balisage optimisé).
   ========================================================= */

/* Structure classique : le contenu est dans .elementor-widget-container */
.elementor-widget-text-editor > .elementor-widget-container > *:last-child,
.elementor-widget-text-editor > .elementor-widget-container > *:last-child > *:last-child,
.elementor-widget-theme-post-excerpt > .elementor-widget-container > *:last-child,
.elementor-widget-theme-post-excerpt > .elementor-widget-container > *:last-child > *:last-child,
.elementor-widget-theme-post-content > .elementor-widget-container > *:last-child,
.elementor-widget-theme-post-content > .elementor-widget-container > *:last-child > *:last-child,

/* Structure optimisée : le contenu est enfant direct du widget */
.elementor-widget-text-editor > *:last-child:not(.elementor-widget-container),
.elementor-widget-text-editor > *:last-child:not(.elementor-widget-container) > *:last-child,
.elementor-widget-theme-post-excerpt > *:last-child:not(.elementor-widget-container),
.elementor-widget-theme-post-excerpt > *:last-child:not(.elementor-widget-container) > *:last-child,
.elementor-widget-theme-post-content > *:last-child:not(.elementor-widget-container),
.elementor-widget-theme-post-content > *:last-child:not(.elementor-widget-container) > *:last-child {
    margin-bottom: 0;
    margin-block-end: 0;
}

/* Marge en bas du <p> généré par RankMath dans le breadcrumb */
.rank-math-breadcrumb p {
    margin-bottom: 0;
    margin-block-end: 0;
}


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

/* 2.1 Liste d'icônes (.elementor-icon-wrapper) — reset des 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;
}

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

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

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


/* =========================================================
   3. SWIPER — Débordement des slides (via .swiper-overflow)
   ---------------------------------------------------------
   Version ciblée par classe plutôt que sur .swiper global :
   évite de casser les autres carrousels du site.
   ========================================================= */

.swiper-overflow .swiper {
    overflow: visible !important;
}

@media (max-width: 767px) {
    .swiper-overflow .swiper {
        padding-right: 10% !important;
    }
}

/* Carrousel prestations : flèches masquées tablette/mobile */
@media (max-width: 1024px) {
    .swiper-overflow.elementor-widget-loop-carousel .elementor-swiper-button-prev,
    .swiper-overflow.elementor-widget-loop-carousel .elementor-swiper-button-next {
        display: none;
    }
}


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

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


/* =========================================================
   5. PHANTOM — Éléments décoratifs
   ---------------------------------------------------------
   Classe "phantom" sur un élément décoratif positionné.
   ========================================================= */

/* Le container qui contient un phantom crée son contexte
   d'empilement ET passe au-dessus des sections voisines,
   débordements décoratifs inclus */
.e-con:has(> .phantom),
.e-con:has(> .e-con-inner > .phantom) {
    position: relative;
    z-index: 1;
}

/* L'élément décoratif : sous le contenu de sa section,
   au-dessus du background de sa section */
.phantom {
    z-index: -1;
    pointer-events: none;
    user-select: none;
}


/* =========================================================
   ============  B. HEADER & FOOTER  =======================
   ========================================================= */


/* =========================================================
   6. HEADER — Structure & z-index
   ========================================================= */

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

/* Espacement sous la navbar (variable calculée en JS) + transitions.
   ATTENTION : #navBar est un ID (pas une classe). Le header a
   id="navBar", il n'existe aucun élément avec class="navBar" dans
   le DOM. */
#navBar {
    margin-bottom: var(--nav-height) !important;
    transition: background-color 300ms ease, background-image 300ms ease;
}

/* Bannière d'icônes : masquée quand un popup bloque le scroll */
.banner-icon-list {
    transition: opacity 0.2s ease-in-out;
}

body.dialog-prevent-scroll .banner-icon-list {
    opacity: 0;
}


/* =========================================================
   7. HEADER — Fond de la navbar
   ---------------------------------------------------------
   Fond par contexte (pages à exceptions + 404 + single) et
   apparence au scroll (classe .scrollHeader ajoutée en JS).

   TODO : remplacer les IDs de page en dur (page-id-XX) par des
   classes body dédiées si de nouvelles pages rejoignent la liste.
   ========================================================= */

/* Fond coloré sur pages spécifiques + 404 (fond marine) */
body.page-id-14 #navBar,
body.error404 #navBar,
body.page-id-3 #navBar,
body.page-id-5735 #navBar {
    background: var(--e-global-color-primary);
}

/* Fond jaune sur les single réalisation */
body.single-realisation #navBar {
    background: var(--e-global-color-secondary);
}

/* Apparence au scroll (fond = fond du bouton CTA de la page) */
#navBar.scrollHeader {
    background-color: var(--e-global-color-btn-header-bg) !important;
    background-image: none !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* Recalage du hero de page-id-14 (compense une hauteur de section différente) */
body.page-id-14 .elementor-459 .elementor-element.elementor-element-350811c:not(.elementor-motion-effects-element-type-background),
.elementor-459 .elementor-element.elementor-element-350811c > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 0px -60px;
}


/* =========================================================
   8. HEADER — Menu de navigation
   ========================================================= */

/* 8.1 Liens : couleur pilotée par variables + transitions douces */
.customNavbar .elementor-item {
    color: var(--e-global-color-texte-menu) !important;
    line-height: 1.6rem !important;
    transition: color 300ms ease !important;
}

.customNavbar .elementor-item:hover,
.customNavbar .elementor-item:focus,
.customNavbar .elementor-item.elementor-item-active {
    color: var(--e-global-color-texte-menu-hover) !important;
}

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

/* 8.3 Sous-menus (dropdown desktop) */
.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;
}

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

/* 8.5 Bouton Contact — masqué sur desktop (>= 1025px), visible en mobile */
@media (min-width: 1025px) {
    .customNavbar .menuContact,
    .contact-menu-item {
        display: none !important;
    }
}

/* 8.6 Icônes mobile/tablette (burger + téléphone)
   ---------------------------------------------------------
   Fond = ombre du bouton CTA (--btn-header-shadow) pour
   contraster quel que soit le fond du header (marine/jaune).
   Icône SVG en blanc. Transition de couleur douce au scroll. */

/* Fond des deux boutons (burger + téléphone) */
#navBar .elementor-menu-toggle,
#navBar .elementor-widget-icon {
    background-color: var(--e-global-color-btn-header-shadow);
    transition: background-color 300ms ease;
}

/* Icône SVG blanche dans les deux boutons */
#navBar .elementor-menu-toggle svg,
#navBar .elementor-widget-icon .elementor-icon svg {
    fill: #fff !important;
}

/* 8.7 Menu déroulant mobile/tablette (fond blanc)
   ---------------------------------------------------------
   Le menu déroulant a un fond blanc FIXE quel que soit le
   contexte de page. On force donc des couleurs fixes ici,
   sans passer par les variables contextuelles du header
   (calibrées pour la navbar, pas pour ce panneau).
   !important obligatoire : la règle 8.1 (couleur contextuelle
   en !important) gagnerait sinon sur ce panneau. */

/* Fond du panneau déroulant */
#navBar .elementor-nav-menu--dropdown {
    background-color: #ffffff !important;
}

/* Liens : marine sur blanc, quel que soit le contexte */
#navBar .elementor-nav-menu--dropdown .elementor-item {
    color: var(--e-global-color-primary) !important;
}

/* Survol + actif : texte jaune (pas de fond) */
#navBar .elementor-nav-menu--dropdown .elementor-item:hover,
#navBar .elementor-nav-menu--dropdown .elementor-item:focus,
#navBar .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    color: var(--e-global-color-secondary) !important;
    background-color: transparent !important;
}

/* Pattern SVG masqué dans le déroulant : pensé pour coiffer une
   lettre en ligne horizontale (desktop), pas un menu vertical. */
#navBar .elementor-nav-menu--dropdown .elementor-item::after {
    display: none !important;
}


/* =========================================================
   9. HEADER — Pattern en indicateur de sous-menu (masque SVG)
   ---------------------------------------------------------
   Remplace la flèche caret-down native d'Elementor par le
   pattern Master Solutions. SVG en mask : la couleur suit
   --e-global-color-pattern-menu (recolorable par page via ACF).
   ========================================================= */

/* On masque le SVG Font Awesome injecté par Elementor */
.customNavbar .sub-arrow svg {
    display: none;
}

/* Pattern via mask sur le span sub-arrow */
.customNavbar .sub-arrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: var(--e-global-color-pattern-menu);
    -webkit-mask: url("/wp-content/uploads/2026/07/pattern-menu-noir.svg") center / contain no-repeat;
    mask: url("/wp-content/uploads/2026/07/pattern-menu-noir.svg") center / contain no-repeat;
    pointer-events: none;
}

/* Dans le sous-menu : jaune obligatoire */
.customNavbar .elementor-nav-menu--dropdown .sub-arrow::before {
    background-color: var(--e-global-color-secondary);
}


/* =========================================================
   10. HEADER — Bouton CTA (offset shadow)
   ---------------------------------------------------------
   Fond, texte, bordure et ombre pilotés par variables (ACF).
   Le déplacement au survol (translate 3px/4px) est géré ici
   en CSS : il REMPLACE le Transformer Elementor, pour animer
   ensemble l'enfoncement et la disparition de l'ombre.
   ========================================================= */

.btn-header .elementor-button {
    background: var(--e-global-color-btn-header-bg) !important;
    color: var(--e-global-color-btn-header-text) !important;
    border: 1px solid var(--e-global-color-btn-header-shadow) !important;
    box-shadow: 3px 4px 0 0 var(--e-global-color-btn-header-shadow) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.btn-header .elementor-button-text {
    color: var(--e-global-color-btn-header-text) !important;
}

.btn-header .elementor-button:hover {
    background: var(--e-global-color-btn-header-bg-hover) !important;
    box-shadow: 0 0 0 0 var(--e-global-color-btn-header-shadow) !important;
    transform: translate(3px, 4px);
}


/* =========================================================
   11. HEADER — Contextes couleur (variables par contexte)
   ---------------------------------------------------------
   Les pages classiques reçoivent leurs couleurs via ACF (PHP).
   Les contextes sans champs ACF (404, single réalisation)
   surchargent ici les variables du header.
   ========================================================= */

/* 11.1 Page 404 — header fond marine */
body.error404 {
    --e-global-color-texte-menu: var(--e-global-color-ad6ae9d);          /* menu blanc */
    --e-global-color-texte-menu-hover: var(--e-global-color-secondary);  /* survol jaune */
    --e-global-color-pattern-menu: var(--e-global-color-secondary);      /* pattern jaune */
    --e-global-color-btn-header-bg: var(--e-global-color-primary);       /* bouton marine */
    --e-global-color-btn-header-bg-hover: var(--e-global-color-0052e1b); /* survol marine foncé */
    --e-global-color-btn-header-shadow: var(--e-global-color-secondary); /* ombre jaune */
    --e-global-color-btn-header-text: var(--e-global-color-ad6ae9d);     /* texte bouton blanc */
}

/* 11.2 Single réalisation — header fond jaune */
body.single-realisation {
    --e-global-color-texte-menu: var(--e-global-color-primary);          /* menu marine */
    --e-global-color-texte-menu-hover: var(--e-global-color-ad6ae9d);    /* survol blanc */
    --e-global-color-pattern-menu: var(--e-global-color-ad6ae9d);        /* pattern blanc */
    --e-global-color-btn-header-bg: var(--e-global-color-secondary);     /* bouton jaune */
    --e-global-color-btn-header-bg-hover: var(--e-global-color-aea76d5); /* survol jaune foncé */
    --e-global-color-btn-header-shadow: var(--e-global-color-primary);   /* ombre marine */
    --e-global-color-btn-header-text: var(--e-global-color-primary);     /* texte bouton marine */
}

/* 11.3 Single réalisation au scroll : le fond devient jaune
   (= btn-header-bg), mais le menu est en marine. Sur ce fond
   jaune le marine reste lisible, donc pas de surcharge
   nécessaire ici. Bloc conservé pour référence si le fond au
   scroll évolue vers le marine. */
/*
body.single-realisation #navBar.scrollHeader .customNavbar .elementor-item {
    color: var(--e-global-color-ad6ae9d) !important;
}
body.single-realisation #navBar.scrollHeader .customNavbar .elementor-item::after {
    background-color: var(--e-global-color-ad6ae9d) !important;
}
*/


/* =========================================================
   12. FOOTER — Pattern en indicateur de sous-menu (masque SVG)
   ---------------------------------------------------------
   Même technique que le header (section 9) : caret Elementor
   masqué, pattern MS injecté en mask sur .sub-arrow.
   Base et sous-menus en jaune. La règle dropdown est conservée
   pour verrouiller le jaune si la couleur de base évolue
   (même logique que le header).
   ========================================================= */

.footerNav .sub-arrow svg {
    display: none;
}

.footerNav .sub-arrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 18px;
    background-color: var(--e-global-color-secondary);
    -webkit-mask: url("/wp-content/uploads/2026/07/pattern-menu-noir.svg") center / contain no-repeat;
    mask: url("/wp-content/uploads/2026/07/pattern-menu-noir.svg") center / contain no-repeat;
    pointer-events: none;
}

/* Sous-menus imbriqués : jaune verrouillé */
.footerNav .elementor-nav-menu--dropdown .sub-arrow::before {
    background-color: var(--e-global-color-secondary);
}


/* =========================================================
   ==========  C. SPÉCIFIQUE MASTER SOLUTIONS  =============
   ========================================================= */


/* =========================================================
   13. TYPOGRAPHIE MARQUE (Hero accueil)
   ---------------------------------------------------------
   Reprend la typographie globale Elementor "Titre marque".
   text-transform: lowercase porté par la variable 008c18a.
   ========================================================= */

.titre-marque {
    font-family: var(--e-global-typography-008c18a-font-family), Sans-serif;
    font-size: var(--e-global-typography-008c18a-font-size);
    font-weight: var(--e-global-typography-008c18a-font-weight);
    line-height: var(--e-global-typography-008c18a-line-height);
    letter-spacing: var(--e-global-typography-008c18a-letter-spacing);
    color: var(--e-global-color-secondary);
    display: block;
}


/* =========================================================
   14. SURTITRE AVEC ICÔNE (masque SVG)
   ---------------------------------------------------------
   Classe "surtitre" sur un Heading. Icône pattern à gauche
   via ::before en masque SVG (recolorable).
   Variantes : --jaune (fonds sombres), --blanc (fonds colorés).
   ========================================================= */

.surtitre .elementor-heading-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-left: 15px;
}

.surtitre .elementor-heading-title::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 35px;
    left: 0;
    top: 0.25em;
    transform: translateY(-50%);
    background-color: var(--e-global-color-a3d23f1);
    -webkit-mask: url("/wp-content/uploads/2026/06/pattern-surtitre-currentcolor.svg") center / contain no-repeat;
    mask: url("/wp-content/uploads/2026/06/pattern-surtitre-currentcolor.svg") center / contain no-repeat;
}

.surtitre--jaune .elementor-heading-title::before {
    background-color: var(--e-global-color-secondary);
}

.surtitre--blanc .elementor-heading-title::before {
    background-color: var(--e-global-color-ad6ae9d);
}


/* =========================================================
   15. TITRE AVEC ICÔNE — ligne simple (masque SVG)
   ---------------------------------------------------------
   Classe "titre-icone" sur un Heading. Icône centrée
   verticalement sur la ligne, pour titres COURTS.
   Variante --jaune pour fonds sombres.
   ========================================================= */

.titre-icone .elementor-heading-title {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-left: 20px;
}

.titre-icone .elementor-heading-title::before {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 35px;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    background-color: var(--e-global-color-a3d23f1);
    -webkit-mask: url("/wp-content/uploads/2026/06/pattern-surtitre-currentcolor.svg") center / contain no-repeat;
    mask: url("/wp-content/uploads/2026/06/pattern-surtitre-currentcolor.svg") center / contain no-repeat;
}

.titre-icone--jaune .elementor-heading-title::before {
    background-color: var(--e-global-color-secondary);
}


/* =========================================================
   16. TITRE AVEC PATTERN — gros titre multiligne
   ---------------------------------------------------------
   Classe "titre-pattern" sur un Heading. Icône débordante à
   gauche, calée sur la 1ère ligne. Calage vertical en "em"
   (suit la police, stable tablette/mobile). Le conteneur doit
   avoir un padding-left suffisant et PAS d'overflow:hidden.
   Réglage hauteur : jouer UNIQUEMENT sur "top" (en em).
   ========================================================= */

.titre-pattern .elementor-heading-title {
    position: relative;
    display: block;
    margin: 0;
    padding-left: 0;
}

.titre-pattern .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0.25em;
    transform: translateY(-50%);
    width: 28px;
    height: 40px;
    background-color: var(--e-global-color-a3d23f1);
    -webkit-mask: url("/wp-content/uploads/2026/06/pattern-surtitre-currentcolor.svg") center / contain no-repeat;
    mask: url("/wp-content/uploads/2026/06/pattern-surtitre-currentcolor.svg") center / contain no-repeat;
}

.titre-pattern--jaune .elementor-heading-title::before {
    background-color: var(--e-global-color-secondary);
}

.titre-pattern--blanc .elementor-heading-title::before {
    background-color: #ffffff;
}


/* =========================================================
   17. ACCENT TITRE (mot mis en avant)
   ---------------------------------------------------------
   <span class="accent-titre">mot</span> dans un H1/H2/H3.
   ========================================================= */

.accent-titre {
    color: var(--e-global-color-secondary);
    font-weight: inherit;
}


/* =========================================================
   18. AVIS CLIENTS — Voir plus / Voir moins
   ---------------------------------------------------------
   Le texte est enveloppé dans .avis-texte (seule zone
   clippée/animée). Le bouton est un FRÈRE de .avis-texte,
   inséré à la fin du widget → jamais coupé par l'animation.
   Le clamp est porté par le <p>, pas par le widget.
   ========================================================= */

.loop-avis-client .swiper-slide .elementor-widget-text-editor .avis-texte {
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.loop-avis-client .swiper-slide .elementor-widget-text-editor .avis-texte:not(.avis-open) p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 0;
}

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

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

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


/* =========================================================
   19. MÉTHODOLOGIE — Masquer la flèche du dernier slide
   ---------------------------------------------------------
   Règle au niveau PAGE : ".swiper-slide:last-of-type" ne peut
   cibler le dernier slide réel qu'à ce niveau.
   ATTENTION : règle globale — masque le ::after du dernier
   slide de TOUS les carrousels du site (cf. vigilance 19).
   ========================================================= */

.swiper-slide:last-of-type .e-con.e-parent::after {
    display: none;
}


/* =========================================================
   20. SECTION CORPS DE MÉTIER (grille + flip au survol)
   ---------------------------------------------------------
   Chaque card contient .ms-front (réduit) et .ms-back
   (solutions) superposés en absolu. Au survol (desktop) le
   front s'efface, le back apparaît. Mobile : back affiché
   directement. On n'anime JAMAIS le transform des couches
   (fond blanc séparateur) : on anime l'opacité des couches
   + le transform du CONTENU interne.
   ========================================================= */

/* 20.1 Card : référence de position pour les couches absolues */
.ms-card {
    position: relative;
}

/* 20.2 Flip front/back au survol — opacité seule sur les couches */
.ms-card .ms-front,
.ms-card .ms-back {
    transition: opacity .4s ease;
}

.ms-card .ms-back {
    opacity: 0;
    pointer-events: none;
}

.ms-card:hover .ms-front {
    opacity: 0;
    pointer-events: none;
}

.ms-card:hover .ms-back {
    opacity: 1;
    pointer-events: auto;
}

/* 20.3 Effet : le CONTENU bouge, pas les couches. On N'ANIME PAS le bouton. */
.ms-front > * {
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    transform: translateY(0);
}

.ms-card:hover .ms-front > * {
    transform: translateY(-20px);
}

.ms-back .elementor-widget-heading,
.ms-back .elementor-widget-text-editor {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    transform: translateY(20px);
}

.ms-card:hover .ms-back .elementor-widget-heading,
.ms-card:hover .ms-back .elementor-widget-text-editor {
    transform: translateY(0);
}

/* 20.4 Taille de titre fluide (clamp) front + back */
.ms-front .elementor-heading-title,
.ms-back .elementor-heading-title {
    font-size: clamp(1.25rem, 2vw, 1.875rem) !important;
}

/* Tablette uniquement (breakpoints Elementor : 768px → 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .ms-front .elementor-heading-title,
    .ms-back .elementor-heading-title {
        font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
    }
}

/* 20.5 Centrage du titre dans le front (align-self compacte le widget) */
.ms-front .elementor-widget-heading {
    width: auto !important;
    max-width: 100% !important;
    align-self: center !important;
}

.ms-front .elementor-widget-heading .elementor-heading-title {
    text-align: left !important;
}

/* 20.6 MOBILE (< 768px) : back affiché directement, animations neutralisées */
@media (max-width: 767px) {
    .ms-card .ms-front {
        display: none;
    }

    .ms-card .ms-back {
        position: relative !important;
        inset: auto;
        height: auto !important;
        opacity: 1;
        pointer-events: auto;
    }

    .ms-back .elementor-widget-heading,
    .ms-back .elementor-widget-text-editor {
        transform: none;
        transition: none;
    }

    .ms-back .e-con,
    .ms-back .e-con * {
        justify-content: flex-start;
    }

    .ms-card {
        min-height: 0 !important;
        height: auto !important;
    }
}


/* =========================================================
   21. FORMES DÉCORATIVES (accent visuel ::after)
   ---------------------------------------------------------
   Classe "forme-decorative" + modificateur ("--orange",
   "--bleu", "--violet") sur un conteneur Elementor. Nécessite
   "position: relative" (ajouté par la classe de base).
   NB : la valeur 125px du clip-path est un calage en dur
   (pointe centrale), lié à --ve: 90px.
   ========================================================= */

.forme-decorative {
    position: relative;
}

.forme-decorative::after {
    content: '';
    position: absolute;
    top: -90px;
    right: -45px;
    width: 350px;
    max-width: 95%;
    height: auto;
    aspect-ratio: 4 / 3;
    z-index: 99;

    --ve: 90px;

    clip-path: polygon(25% 0, 50% 0, 50% var(--ve), 75% 0, 100% 0, 100% 70%, 75% 100%, 75% var(--ve), 50% var(--ve), 37.5% 125px, 25% var(--ve), 0 var(--ve));
}

.forme-decorative--orange::after {
    background: var(--e-global-color-secondary);
}

.forme-decorative--bleu::after {
    background: var(--e-global-color-primary);
}

.forme-decorative--violet::after {
    background: var(--e-global-color-c55fe95);
}

@media (max-width: 767px) {
    .forme-decorative::after {
        right: -20px;
        max-width: 85%;
        height: 250px;
    }
}


/* =========================================================
   22. HERO ACCUEIL — Hauteur pleine écran (svh)
   ---------------------------------------------------------
   Conteneur principal de la section Hero (id="hero-section").
   svh : hauteur "safe", barre d'adresse mobile toujours comptée.
   ========================================================= */

#hero-section {
    position: relative;
    min-height: 100vh;        /* fallback navigateurs anciens */
    min-height: 100svh;       /* safe — barre toujours comptée */
}


/* =========================================================
   23. CARTES PRESTATIONS — Couleurs via ACF (.carte-metier)
   ---------------------------------------------------------
   Couleurs pilotées par des variables --carte-* injectées par
   carte via ACF, avec fallback sur les couleurs globales :
   --carte-bg, --carte-texte, --carte-titre-accent,
   --carte-titre-pattern, --carte-btn-bg(-hover),
   --carte-btn-texte(-hover), --carte-btn-bordure(-hover).
   Le titre force !important pour passer devant la couleur
   inline d'Elementor : recolorer via la variable, jamais via
   le color picker du widget.
   ========================================================= */

/* 23.1 Fond et texte de la carte */
.carte-metier {
    background-color: var(--carte-bg, var(--e-global-color-secondary));
    color: var(--carte-texte, var(--e-global-color-primary));
}

.carte-metier p {
    color: var(--carte-texte, var(--e-global-color-primary));
}

.carte-metier .elementor-widget-heading .elementor-heading-title {
    color: var(--carte-texte, var(--e-global-color-primary)) !important;
}

/* Zone titre : hauteur réservée (3 lignes max), aligne les descriptifs */
.carte-metier .titre-pattern .elementor-heading-title {
    min-height: calc(3 * 0.93em);
}

/* 23.2 Titre : partie accentuée */
.carte-metier .accent-titre {
    color: var(--carte-titre-accent, var(--e-global-color-secondary));
}

/* 23.3 Pattern du titre : champ dédié, fallback sur l'accent */
.carte-metier .titre-pattern .elementor-heading-title::before {
    background-color: var(--carte-titre-pattern, var(--carte-titre-accent, var(--e-global-color-secondary)));
}

/* 23.4 Bouton découvrir (offset shadow + repli, même logique que le
   CTA header). La transition DOIT inclure transform (cf. btn-repli). */
.carte-metier .btn-carte .elementor-button {
    background-color: var(--carte-btn-bg, transparent);
    color: var(--carte-btn-texte, var(--carte-texte));
    border: 1px solid var(--carte-btn-bordure, var(--e-global-color-primary));
    box-shadow: 3px 4px 0 var(--carte-btn-bordure, var(--e-global-color-primary));
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease,
                transform 0.3s ease;
}

.carte-metier .btn-carte .elementor-button:hover,
.carte-metier .btn-carte .elementor-button:focus {
    background-color: var(--carte-btn-bg-hover, var(--carte-btn-bg, transparent));
    color: var(--carte-btn-texte-hover, var(--carte-btn-texte, var(--carte-texte)));
    border-color: var(--carte-btn-bordure-hover, var(--carte-btn-bordure, var(--e-global-color-primary)));
    box-shadow: 0 0 0 var(--carte-btn-bordure-hover, var(--carte-btn-bordure, var(--e-global-color-primary)));
    transform: translate(3px, 4px);
}


/* =========================================================
   24. BTN REPLI — effet ombre solide qui se replie
   ---------------------------------------------------------
   À poser sur le widget bouton : Avancé → Classes CSS →
   btn-repli. Les couleurs/fond/bordure restent gérés par
   Elementor. L'ombre de BASE (3px 4px 0 couleur) reste
   définie côté Elementor (Réglages du site → Boutons ou
   widget). --repli-x/y doivent matcher les offsets de cette
   ombre.
   NE PAS combiner avec .btn-header (section 10, déjà géré).
   Sur .btn-carte : la transition 23.4 doit inclure transform.
   ========================================================= */

.btn-repli {
    --repli-x: 3px;
    --repli-y: 4px;
    --repli-shadow: var(--e-global-color-secondary); /* couleur de l'ombre pendant la rétraction */
}

.btn-repli .elementor-button {
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn-repli .elementor-button:hover {
    transform: translate(var(--repli-x), var(--repli-y));
    /* offsets à 0 mais couleur conservée : l'ombre se rétracte
       sans passer par un fondu transparent/grisâtre */
    box-shadow: 0 0 0 0 var(--repli-shadow);
}

/* Neutralise le Décalage hover du Transformer Elementor posé
   sur le wrapper (déclencheur différent du :hover du <a>).
   Attention : neutralise aussi rotation/scale hover du Transformer. */
.btn-repli.e-transform:hover {
    transform: none !important;
}


/* =========================================================
   25. LOAD MORE (Loop Grid) — repli de l'ombre au survol
   ---------------------------------------------------------
   Cible tous les boutons "voir plus" des grilles de boucle,
   sans classe à poser dans Elementor.
   ========================================================= */

.e-loop__load-more .elementor-button {
    transition: transform .2s ease, box-shadow .2s ease;
}

.e-loop__load-more .elementor-button:hover {
    transform: translate(3px, 4px);
    box-shadow: 0 0 0 0 var(--e-global-color-secondary) !important;
}