/* ===================================================================================

* Theme Name: Brickox Child
* Theme URI: https://themeforest.net/user/xpressbuddy
* Author: XpressBuddy
* Author URI: https://wp.xpressbuddy.com/brickox/
* Description: Brickox is a professional, fully responsive Elementor-based WordPress theme designed for construction, architecture, factory, and industrial engineering websites. Highly customizable, modern, and performance optimized for business growth.
* Version: 1.0.0
* Template: brickox
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

/* ============================================================
   TGI - Personnalisations Technique General Installation
   ============================================================ */

/* Service : fondu plus rapide pour éviter le chevauchement des listes au survol */
.service-content-image .item{ transition: 0.25s !important; }

/* Couleur d'accent de la charte TGI (remplace l'orange démo #ff3d00) */
html:root{
    --color-primary: #3C4FAB;
}

/* Hero : photo ascenseurs en fond plein + voile bleu de la charte */
.hero-area-one{
    background-image:
        linear-gradient(120deg, rgba(46,149,190,0.74) 0%, rgba(60,79,171,0.90) 100%),
        url('images/hero-ascenseurs-1600.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
@media (max-width: 767px){
    .hero-area-one{
        background-image:
            linear-gradient(120deg, rgba(46,149,190,0.74) 0%, rgba(60,79,171,0.90) 100%),
            url('images/hero-ascenseurs-960.webp') !important;
    }
}

/* on masque l'ancienne image du bas (silhouette) : la photo est maintenant le fond */
.hero-area-one .xb-hero-img{ display: none !important; }

/* Fiches projet : images plus contenues et uniformes (rendu plus pro) */
.single-brickox_project .elementor-widget-image img{
    max-height: 440px;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Projet escalator : les 2 photos côte à côte, en carré (rendu plus pro) */
.single-brickox_project .elementor-element-2ee624ba,
.single-brickox_project .elementor-element-5b152c5c{
    display: inline-block !important;
    width: 49% !important;
    vertical-align: top;
}
.single-brickox_project .elementor-element-2ee624ba{ margin-right: 2%; }
.single-brickox_project .elementor-element-2ee624ba img,
.single-brickox_project .elementor-element-5b152c5c img{
    max-height: none !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100% !important;
    display: block;
    border-radius: 6px;
}
/* mobile : l'une sous l'autre, centrées */
@media (max-width: 767px){
    .single-brickox_project .elementor-element-2ee624ba,
    .single-brickox_project .elementor-element-5b152c5c{
        display: block !important;
        width: 100% !important;
        max-width: 340px;
        margin: 0 auto 14px !important;
    }
}

/* Slider réalisations : l'image remplit toute la hauteur (supprime l'espace vide) */
.xb-project-row .xb-project-img{ height: 100%; }
.xb-project-row .xb-project-img .xb-img{ height: 100%; }
.xb-project-row .xb-project-img .xb-img img{ width: 100%; height: 100%; object-fit: cover; }

/* Voile indigo léger sur les images de réalisations (cohérence charte) */
.xb-project-img{ position: relative; }
.xb-project-img::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(60,79,171,0.30);
    z-index:2;
    pointer-events:none;
    transition: background .3s ease;
}
.xb-project-img:hover::after{ background: rgba(60,79,171,0.15); }

/* Fond des bannières de page : image ascenseurs + voile indigo #3C4FAB */
.breadcrumb.page-banner,
.breadcrumb.project-single-banner,
.breadcrumb.service-single-banner,
.breadcrumb.archive-banner{
    background-color: #3C4FAB;
    background-image: linear-gradient(rgba(60,79,171,0.72), rgba(60,79,171,0.72)), url('images/banniere.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Signature cursive du hero : blanche (lisible sur fond bleu), sous le mot géant */
.xb-hero-heading .xb-signager-img{
    display: block !important;
    top: 82% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 460px !important;
}
.xb-hero-heading .xb-signager-img{ top: 62% !important; }
@media (max-width: 767px){
    .xb-hero-heading .xb-signager-img{ max-width: 300px !important; top: 82% !important; }
}

/* Centrer le mot géant « Ascenseurs » */
.xb-hero-heading{ text-align: center !important; }
.xb-hero-heading .title{ text-align: center !important; margin-left: 0 !important; }

/* Hero moins haut : supprime la grande zone bleue vide sous le texte
   (le thème forçait min-height:1082px). L'image s'arrête juste sous le contenu. */
.hero-area-one{ min-height: 660px !important; }
@media (max-width: 1500px){ .hero-area-one{ min-height: 620px !important; } }
@media (max-width: 1199px){ .hero-area-one{ min-height: 560px !important; } }
@media (max-width: 991px){  .hero-area-one{ min-height: 500px !important; } }
@media (max-width: 767px){  .hero-area-one{ min-height: 430px !important; } }

/* À propos - Carrousel de chiffres : sur mobile on neutralise le carrousel Swiper
   (marges négatives + slides qui se chevauchent + fond noir des photos) et on
   empile les cartes proprement en pleine largeur. Indépendant du JS/cache. */
@media (max-width: 767px){
    /* contenir : supprimer le débordement négatif du slider */
    .ap-value-slider{ margin: 0 !important; overflow: hidden !important; }
    /* neutraliser le déplacement Swiper -> empilement vertical */
    .ap-value-slider .swiper-wrapper{
        transform: none !important;
        display: block !important;
        height: auto !important;
    }
    .ap-value-slider .swiper-slide{
        width: 100% !important;
        margin: 0 0 14px 0 !important;
        float: none !important;
    }
    /* pas de doublons créés par le mode loop */
    .ap-value-slider .swiper-slide-duplicate{ display: none !important; }
    /* cartes stats : hauteur raisonnable, plein largeur */
    .ap-value-item{ display: block !important; width: 100%; }
    .ap-value-item .xb-item--inner{ min-height: auto !important; width: 100%; }
    .ap-value-item .xb-item--box{ padding: 32px 26px !important; min-height: 200px; }
    /* photos : remplir la carte (fini les bandes noires) */
    .ap-value-item .xb-item--img{ height: 210px !important; width: 100%; }
    .ap-value-item .xb-item--img img{ height: 100% !important; width: 100% !important; object-fit: cover; }
}

/* Notre histoire (frise) - mobile : chiffre d'année un peu plus petit,
   photos un peu plus grandes (remplissent mieux la largeur) */
@media (max-width: 767px){
    .work-details-content-item .xb-item--year h2{ font-size: 66px !important; }
    .work-details-content-item .xb-item--box{ gap: 6px !important; }
    .work-details-content-item .xb-item--holder{ flex: 1 1 0 !important; min-width: 0 !important; }
    .work-details-content-item .xb-item--img{ max-width: none !important; width: 100% !important; }
    .work-details-content-item .xb-item--img .image,
    .work-details-content-item .xb-item--img img{ width: 100% !important; height: auto !important; }
}