/*
Theme Name: Lithium Marketing Elementor Child
Template:   lithium-elementor
Description:  Theme enfant pour Lithium Marketing Elementor
Author: Lithium Marketing
Version: 0.0.2
*/

/* ==========================================================================
   GOUTTIERES GOULET & FORTIER - Correctifs responsive
   --------------------------------------------------------------------------
   Breakpoints Elementor actifs sur ce site (kit 336) :
     mobile        : <= 575px   (mobile portrait)
     mobile_extra  : <= 880px   (mobile landscape)
     tablet        : <= 1024px  (tablette portrait)

   Specificite : on prefixe par `body.page-id-XYZ` afin de battre les regles
   Elementor `.elementor-117 .elementor-element.elementor-element-XXX`
   (specificite 0,3,0). Le fichier child-theme est charge AVANT le post-CSS
   d'Elementor dans le head, donc on doit gagner par specificite.
   ========================================================================== */


/* ==========================================================================
   1) ACCUEIL (page id 117) - Section "Le specialiste 100% dedie..."
   --------------------------------------------------------------------------
   Probleme :
   - Le bouton (.elementor-element-02f3523) est en position absolute ;
     sur mobile il vient se superposer au texte / sortir du conteneur.
   - L'image (.elementor-element-313d330) est en position absolute avec
     top:-220px sur mobile : elle est totalement hors viewport.
   - Le widget paragraphe (.elementor-element-c24923a) est force a
     max-width:125px sur <=575px : le texte est ecrase en colonne
     verticale d'une lettre.
   - Le conteneur texte (.elementor-element-8336ae6) garde un padding
     horizontal de 109px sur mobile : il ne reste presque plus de place
     pour le contenu sur un ecran de 375px.
   - Le wrapper (.elementor-element-5d692df) est en flex-direction:row
     avec --flex-wrap-mobile:wrap : sans hauteur fixe sur la colonne
     image, l'image absolue n'est jamais visible.
   ========================================================================== */

@media (max-width: 1024px) {

    /* Forcer le wrapper a empiler verticalement (image en haut, texte en bas) */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-5d692df {
        --flex-direction: column;
        --container-widget-width: 100%;
        --container-widget-height: initial;
        --container-widget-flex-grow: 0;
        --container-widget-align-self: initial;
    }

    /* Marge basse du sous-conteneur reduite : l'image desktop deborde de
       123px en bas, ce qui n'a plus de sens en stack vertical */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-0e7b702 {
        --margin-bottom: 0px;
    }

    /* Conteneur image : devient un flux normal avec une hauteur intrinseque */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-a561763 {
        --display: flex;
        --width: 100%;
        --container-widget-width: 100%;
        position: relative;
        min-height: 0;
        order: -1; /* image en premier en mode mobile */
        aspect-ratio: 1 / 1;
        max-height: 60vh;
        overflow: hidden;
    }

    /* Image elle-meme : on enleve l'absolute et on la rend normale */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-313d330.elementor-absolute,
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-313d330 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 100%;
    }

    body.page-id-117 .elementor-117 .elementor-element.elementor-element-313d330 .lm-ratio-image {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    body.page-id-117 .elementor-117 .elementor-element.elementor-element-313d330 .lm-ratio-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

    /* Conteneur texte : on reduit fortement le padding horizontal,
       on laisse de la place pour le bouton qui repasse en flux normal */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-8336ae6 {
        --padding-top: 48px;
        --padding-bottom: 48px;
        --padding-left: 32px;
        --padding-right: 32px;
        --width: 100%;
        position: relative;
    }

    /* Titre h3 : repasse a 100% sur mobile */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-bce6c2e {
        width: 100%;
        max-width: 100%;
        --container-widget-width: 100%;
    }

    /* Paragraphe : casse le max-width:125px qui ecrase tout le bloc */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-c24923a,
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-c24923a.elementor-element {
        width: 100%;
        max-width: 100%;
        --container-widget-width: 100%;
        --flex-grow: 1;
        --flex-shrink: 1;
    }

    /* Bouton "A PROPOS" : ramene en flux normal, sous le texte */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-02f3523.elementor-absolute,
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-02f3523 {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        align-self: flex-start;
        margin-top: 16px;
    }

    body.page-id-117 .elementor-117 .elementor-element.elementor-element-02f3523 .elementor-button {
        padding: 18px 28px 18px 28px;
    }
}

/* Mobile landscape : on raffine les paddings */
@media (max-width: 880px) {
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-8336ae6 {
        --padding-top: 40px;
        --padding-bottom: 40px;
        --padding-left: 24px;
        --padding-right: 24px;
    }
}

/* Mobile portrait : maximum de surface utile pour le texte */
@media (max-width: 575px) {

    body.page-id-117 .elementor-117 .elementor-element.elementor-element-8336ae6 {
        --padding-top: 32px;
        --padding-bottom: 32px;
        --padding-left: 20px;
        --padding-right: 20px;
        --gap: 16px 16px;
        --row-gap: 16px;
        --column-gap: 16px;
    }

    /* Le conteneur image en aspect 1/1 plein viewport est trop grand sur
       petit ecran ; on le borne en hauteur */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-a561763 {
        max-height: 70vw;
    }

    body.page-id-117 .elementor-117 .elementor-element.elementor-element-313d330 .lm-ratio-image img {
        object-position: center 30%;
    }

    /* Le bouton occupe toute la largeur pour un meilleur tap target */
    body.page-id-117 .elementor-117 .elementor-element.elementor-element-02f3523 .elementor-button {
        width: 100%;
        justify-content: space-between;
    }

    body.page-id-117 .elementor-117 .elementor-element.elementor-element-02f3523 .elementor-button-content-wrapper {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
    }
}


/* ==========================================================================
   2) REALISATIONS (page id 353) - Carrousel "Voir nos produits"
   --------------------------------------------------------------------------
   Probleme :
   - La regle inline (HTML widget id aaa7988) place les fleches en absolute :
       .elementor-swiper-button-prev { right: 84px !important; top: 0 !important; }
       .elementor-swiper-button-next { right: 10px !important; top: 0 !important; }
     Sur mobile portrait, les deux fleches s'entassent dans le coin haut-
     droit du carrousel, decollees du contenu et impossibles a cibler au
     pouce.
   - La regle inline est dans le <body>, donc elle gagne automatiquement
     sur n'importe quelle regle externe a specificite egale.

   Specificite : on bat (0,2,0)+!important en passant a (0,3,1)+!important.
                 `body.page-id-353 .custom-loop-carousel .elementor-swiper-button-prev`
                 = body (element 1) + 3 classes = 0,3,1
   ========================================================================== */

@media (max-width: 880px) {

    /* On enleve le decalage haut de 60px qui creait un trou visuel sur mobile */
    body.page-id-353 .elementor-element.custom-loop-carousel {
        padding-top: 0 !important;
        position: relative;
    }

    /* On reactive un containing block pour le footer flex de fleches */
    body.page-id-353 .elementor-element.custom-loop-carousel .elementor-widget-container {
        position: relative;
        padding-bottom: 72px;
    }

    /* Fleches : on quitte le coin haut-droit, on les centre sous le carrousel */
    body.page-id-353 .custom-loop-carousel .elementor-swiper-button {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        width: 56px !important;
        height: 56px !important;
        margin: 0 !important;
        transform: none !important;
    }

    body.page-id-353 .custom-loop-carousel .elementor-swiper-button-prev {
        left: calc(50% - 64px) !important;
        right: auto !important;
    }

    body.page-id-353 .custom-loop-carousel .elementor-swiper-button-next {
        left: calc(50% + 8px) !important;
        right: auto !important;
    }

    /* On garde l'icone svg de fond (definie en inline) ; on l'agrandit
       legerement pour rester lisible au format reduit */
    body.page-id-353 .custom-loop-carousel .elementor-swiper-button::before {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Mobile portrait : touch-target XL et legerement plus serre */
@media (max-width: 575px) {

    body.page-id-353 .elementor-element.custom-loop-carousel .elementor-widget-container {
        padding-bottom: 80px;
    }

    body.page-id-353 .custom-loop-carousel .elementor-swiper-button {
        width: 60px !important;
        height: 60px !important;
    }

    body.page-id-353 .custom-loop-carousel .elementor-swiper-button-prev {
        left: calc(50% - 68px) !important;
    }

    body.page-id-353 .custom-loop-carousel .elementor-swiper-button-next {
        left: calc(50% + 8px) !important;
    }

    body.page-id-353 .custom-loop-carousel .elementor-swiper-button::before {
        width: 36px !important;
        height: 36px !important;
    }
}


/* ==========================================================================
   3) REALISATIONS - Icone "+" (loop template 528) flush bas-droite
   --------------------------------------------------------------------------
   Probleme :
   Chaque vignette (affa044) est un `e-con-boxed`. Son enfant `.e-con-inner`
   porte le padding (bloc + inline). L'image (a60071b) vit DANS le content
   box du `.e-con-inner` (donc au-dessus du padding-bottom). L'icone
   `+` (8c01aa1) est `position:absolute` ancre sur `affa044` (qui n'a pas
   de padding) avec `right:0; bottom:0` injectes inline. Resultat :
   l'icone tombe a la base de `affa044`, sous la bande de padding-bottom
   du `.e-con-inner`, decollee du bord visuel de l'image.

   Fix :
   - On supprime le padding-block-end et padding-inline-end du
     `.e-con-inner` pour que l'image atteigne le coin bas-droit.
   - On laisse l'icone a droite (right:0; bottom:0).

   Specificite : la regle inline (loop-528) est (0,4,1). On utilise donc
   `!important` pour gagner.
   ========================================================================== */

body.page-id-353 .elementor-528 .elementor-element.elementor-element-affa044 > .e-con-inner {
    padding-block-end: 0 !important;
    padding-inline-end: 0 !important;
}

body:not(.rtl).page-id-353 .elementor-528 .elementor-element.elementor-element-8c01aa1,
body.page-id-353 .elementor-528 .elementor-element.elementor-element-8c01aa1 {
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
}

body.page-id-353 .elementor-528 .elementor-element.elementor-element-8c01aa1 .elementor-widget-container {
    padding: 0 !important;
    line-height: 0;
}

body.page-id-353 .elementor-528 .elementor-element.elementor-element-8c01aa1 .elementor-icon-wrapper {
    line-height: 0;
}

body.page-id-353 .elementor-528 .elementor-element.elementor-element-8c01aa1 .elementor-icon {
    display: block;
    line-height: 0;
}

body.page-id-353 .elementor-528 .elementor-element.elementor-element-8c01aa1 .elementor-icon svg {
    display: block;
}