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

/* =========================================================
   READ PARTNERS — 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 — Menu de navigation
         7.1 Item actif (gras)
         7.2 Sous-menus (dropdown desktop)
         7.3 Menu responsive (< 1024px)
         7.4 Bouton Contact mobile
         7.5 Icônes mobile/tablette (burger + téléphone)
         7.6 Menu déroulant mobile/tablette (fond blanc)

   C. SPÉCIFIQUE READ PARTNERS
      8.  Boutons — Variantes
      9.  Typographie (gras)
      10. Surtitres (trait vertical)
      11. Titre H2 avec trait décoratif
      12. Titre de service (barre verticale)
      13. Footer — Séparateurs verticaux entre colonnes
      14. Avis clients — Voir plus / Voir moins
      15. Accordéon FAQ
      16. Hero — Bordures arrondies + bande bordeaux en fond

   POINTS DE VIGILANCE :
   - 7.1 Menu actif : poids 600.
   - 7.4 Bouton Contact : breakpoint 1025px (aligné sur menu < 1024px).
   - 7.5 Icônes burger/téléphone : icône en #fff fixe, fond =
     --btn-header-shadow. Si un contexte a une ombre CLAIRE, passer
     l'icône en variable pour garder le contraste.
   - 8. Boutons : variantes .btn-rp-* réservées aux fonds sombres
     (hero). Le bouton principal Vintage Rose est dans Style du thème.
     Recolorer via les variables globales, pas via le color picker.
   - 14. Avis clients : le texte doit être enveloppé dans .avis-texte
     (seule zone clippée/animée) ; le bouton .avis-toggle est un FRÈRE
     de .avis-texte, inséré en fin de widget → jamais coupé par
     l'animation. Le clamp est porté par le <p>, pas par le widget.
     Scopé sur .loop-avis-client (même conteneur que Master Solutions).
   - 16. Hero : bande bordeaux sur ::after (z-index:-1, derrière la
     photo), voile Elementor sur ::before (au-dessus de la photo).
     Chacun son pseudo-élément → pas de conflit.

   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/tablette)
   ========================================================= */

@media (max-width: 1024px) {
    .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 — Menu de navigation
   ========================================================= */

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

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

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

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

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

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


/* =========================================================
   ==========  C. SPÉCIFIQUE READ PARTNERS  ===============
   ========================================================= */


/* =========================================================
   8. BOUTONS — Variantes
   ---------------------------------------------------------
   (le bouton principal Vintage Rose est dans Style du thème)
   ========================================================= */

/* Variante Bordeau plein — CTA sur fond sombre (hero) */
.btn-rp-bordeau .elementor-button {
    background-color: var(--e-global-color-primary) !important;   /* Bordeau #470507 */
    color: var(--e-global-color-7f83691) !important;              /* Blanc */
    border-color: var(--e-global-color-7f83691) !important;       /* Blanc */
}
.btn-rp-bordeau .elementor-button:hover {
    background-color: var(--e-global-color-ddc28e3) !important;   /* Rouge #6D181B */
    color: var(--e-global-color-7f83691) !important;              /* Blanc */
}

/* Variante Blanche — sur fond sombre, contraste inverse */
.btn-rp-blanc .elementor-button {
    background-color: var(--e-global-color-7f83691) !important;   /* Blanc */
    color: var(--e-global-color-primary) !important;              /* Bordeau */
    border-color: var(--e-global-color-7f83691) !important;       /* Blanc */
}
.btn-rp-blanc .elementor-button:hover {
    background-color: var(--e-global-color-secondary) !important; /* Vintage Rose */
    color: var(--e-global-color-7f83691) !important;              /* Blanc */
}

/* Variante Rouge — accent fort */
.btn-rp-rouge .elementor-button {
    background-color: var(--e-global-color-ddc28e3) !important;   /* Rouge #6D181B */
    color: var(--e-global-color-7f83691) !important;              /* Blanc */
    border-color: var(--e-global-color-primary) !important;       /* Bordeau */
}
.btn-rp-rouge .elementor-button:hover {
    background-color: var(--e-global-color-primary) !important;   /* Bordeau */
    color: var(--e-global-color-7f83691) !important;              /* Blanc */
}

/* Variante bordure rouge */
.btn-rp-bordure-rouge .elementor-button {
    border-color: var(--e-global-color-ddc28e3) !important;       /* Rouge #6D181B */
}

/* Le texte du bouton doit hériter de la couleur (sinon Elementor le force) */
.btn-rp-bordeau .elementor-button-text,
.btn-rp-blanc .elementor-button-text,
.btn-rp-rouge .elementor-button-text {
    color: inherit !important;
}

/* Animation de l'icône flèche au survol */
.elementor-button .elementor-button-icon {
    transition: transform 0.3s ease;
}
.elementor-button:hover .elementor-button-icon {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .elementor-button .elementor-button-icon {
        transition: none;
    }
}


/* =========================================================
   9. TYPOGRAPHIE
   ========================================================= */

p strong,
p b,
.elementor-widget-text-editor strong,
.elementor-widget-text-editor b {
    font-weight: 600;
}


/* =========================================================
   10. SURTITRES
   ========================================================= */

.rp-surtitre {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--e-global-color-secondary); /* Vintage Rose — ou la couleur voulue */
}

.rp-surtitre::before {
    content: "";
    width: 1px;
    height: 16px;
    background-color: currentColor;
}

.rp-surtitre-clair {
    color: var(--e-global-color-6268a84); /* Baby Pink #E4AFAF */
}

.rp-surtitre-blanc {
    color: var(--e-global-color-7f83691); /* Blanc */
}


/* =========================================================
   11. TITRE H2 AVEC TRAIT DÉCORATIF
   ========================================================= */

/* Le titre H2 sur deux lignes */
.rp-titre-trait {
    display: flex;
    flex-direction: column;
}

/* La dernière ligne + le trait alignés */
.rp-titre-trait .derniere-ligne {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
}

/* Le trait */
.rp-titre-trait .derniere-ligne::after {
    content: "";
    flex: 1;
    height: 3px;
    background-color: var(--e-global-color-accent); /* #CA6969 */
}


/* =========================================================
   12. TITRE DE SERVICE — Barre verticale
   ========================================================= */

.rp-titre-service .elementor-heading-title {
    position: relative;
    padding-left: 15px;
    display: flex;
    align-items: center;
    min-height: 48px;
}

.rp-titre-service .elementor-heading-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 48px;
    background-color: var(--e-global-color-primary);
}


/* =========================================================
   13. FOOTER — Séparateurs verticaux entre colonnes
   ========================================================= */

/* Conteneur footer — gap fluide */
.rp-footer-cols {
    gap: clamp(40px, 8vw, 140px);
}

/* Séparateurs verticaux entre colonnes */
.rp-col-separator {
    position: relative;
}

.rp-col-separator::before {
    content: "";
    position: absolute;
    left: calc(clamp(40px, 8vw, 140px) / -2);
    top: 4px;
    height: 21px;
    width: 2px;
    background-color: var(--e-global-color-accent); /* Rose #CA6969 */
}

/* Neutralisation en mobile (colonnes empilées) */
@media (max-width: 1024px) {
    .rp-col-separator::before {
        display: none;
    }
}


/* =========================================================
   14. 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.
   Repli par HAUTEUR sur .avis-texte (4 lignes AU TOTAL, tous
   <p> confondus) : le déclenchement du bouton ne dépend plus
   du nombre de paragraphes. Le JS anime max-height.
   --avis-lh doit matcher le line-height réel du texte (1.2em).
   Scopé sur .loop-avis-client (même conteneur que Master
   Solutions).
   ========================================================= */

.loop-avis-client .swiper-slide .elementor-widget-text-editor .avis-texte {
    --avis-lh: 1.2em;   /* line-height du texte des avis */
    --avis-lignes: 4;   /* nb de lignes visibles en replié */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.loop-avis-client .swiper-slide .elementor-widget-text-editor .avis-texte:not(.avis-open) {
    max-height: calc(var(--avis-lh) * var(--avis-lignes) - 0.6em);
}

/* Ouvert : marges normales entre paragraphes */
.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;
}


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


/* =========================================================
   15. ACCORDÉON FAQ
   ========================================================= */

/* Item ouvert — coins bas non arrondis */
.rp-faq .e-n-accordion-item[open] > .e-n-accordion-item-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* =========================================================
   16. HERO — Bordures arrondies + bande bordeaux en fond
   ---------------------------------------------------------
   .hero-radius   : commun à tous les hero (accueil + internes)
                    → radius asymétrique + margin-top sous header
                    → bande bordeaux (::after) DERRIÈRE le hero,
                      visible dans le coin arrondi haut-gauche
                    → ::before (voile/overlay Elementor) forcé à
                      suivre le radius, sinon ses coins carrés
                      débordent sur le coin arrondi et assombrissent
                      le bordeaux
   #hero-section  : accueil uniquement
                    → pleine hauteur (svh) + liseré (box-shadow)
   svh : hauteur "safe", barre d'adresse mobile toujours comptée.
   Le +2px compense le liseré blanc (0 -2px) masqué sous le header.
   NB : bande sur ::after (z-index:-1, derrière la photo),
        voile Elementor sur ::before (au-dessus de la photo).
        Chacun son pseudo-élément → plus de conflit.
   ========================================================= */

/* --- Commun à tous les hero --- */
.hero-radius {
    position: relative;
    margin-top: calc(var(--nav-height-positive) + 2px);
    border-top-left-radius: 65px;
    border-bottom-right-radius: 65px;
}

/* Voile/overlay Elementor (::before) : épouse le radius du hero */
.hero-radius::before {
    border-top-left-radius: 65px !important;
    border-bottom-right-radius: 65px !important;
}

/* Bande bordeaux derrière le hero (dépasse en haut) */
.hero-radius::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--e-global-color-primary);
    z-index: -1;
}

/* --- Accueil uniquement : pleine hauteur + liseré --- */
#hero-section {
    min-height: 100vh;
    min-height: calc(100svh - var(--nav-height-positive) - 2px);
    box-shadow: 0 -2px 0 0 rgba(255, 255, 255, 0.80),
                0 3px 0 0 rgba(109, 24, 27, 0.80);
}

.entete-page {
    position: relative;
    margin-top: var(--nav-height-positive);
    border-top-left-radius: 65px;
}
.entete-page::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--e-global-color-primary);  /* bordeaux */
    z-index: -1;
}