@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* ========================================
   STERAS - Custom CSS
   ======================================== */

/* Hero content box - fond bleu transparent */
.hero-content-box.uk-card-primary {
    background: rgba(84, 152, 187, 0.7) !important;
}

/* Cible UNIQUEMENT la card avec la classe hero-content-box */
.hero-content-box .uk-tile-primary{
    background-color: rgba(84, 152, 187, 0.7) !important;
    background-image: none !important;
}

.section-muted-bg {
    background-color: #E6F5F5 !important;
}

.section-muted-bg-blue {
    background-color: #B0D0DF !important;
}

/* =================================================================
   1. FLUIDITÉ GLOBALE (Smooth Scroll)
   Force le défilement doux sur tout le site
   ================================================================= */
html {
    scroll-behavior: smooth !important;
}

/* =================================================================
   2. GESTION DU DÉCALAGE MENU (SCROLL OFFSET)
   Empêche le titre d'être caché sous le menu fixe lors du clic
   ================================================================= */
/* Règle par défaut (PC/Desktop) */
#gtc, #incendie, #electricite, #surete {
    scroll-margin-top: 100px; /* Ajustez cette valeur selon la hauteur de votre menu PC */
}

/* =================================================================
   3. CORRECTIF GLOBAL SOLUTIONS (MOBILE & TABLETTE)
   Applique le fix validé sur toutes les sections
   ================================================================= */

@media (max-width: 959px) {

    /* A. SECTIONS : SUPPRESSION MARGES & OFFSET MOBILE */
    #gtc.uk-section, #gtc.uk-section-muted,
    #incendie.uk-section, #incendie.uk-section-muted,
    #electricite.uk-section, #electricite.uk-section-muted,
    #surete.uk-section, #surete.uk-section-muted {
        padding-top: 0px !important;  
        padding-bottom: 0px !important;
        
        /* Vos réglages pour remonter le contenu */
        margin-top: -40px !important;
        margin-bottom: -40px !important;

        /* OFFSET SPÉCIFIQUE MOBILE (Menu souvent plus petit sur mobile) */
        scroll-margin-top: 100px; 
    }

    /* B. IMAGES : MODE COVER & HAUTEUR FIXE */
    #gtc .el-image,
    #incendie .el-image,
    #electricite .el-image,
    #surete .el-image {
        height: 300px !important;        /* Hauteur fixe mobile */
        width: 100% !important;          /* Pleine largeur */
        object-fit: cover !important;    /* Remplissage parfait */
        object-position: center center !important;
        margin: 0 !important;            /* Sécurité anti-marge */
    }
}

/* ==========================================================
   FORCE LARGEUR COLONNE 1 (Même si vide/cachée)
   ========================================================== */

/* Uniquement sur Grand Écran (XL) et plus */
@media (min-width: 1200px) {
    
    /* Cible la 1ère colonne de la grille principale pour Incendie et Sûreté */
    /* Note : Adaptez les IDs si besoin (#electricite, etc.) */
    
    #incendie .uk-grid > div:first-child,
    #surete .uk-grid > div:first-child {
        width: 33.333% !important; /* Force 1/3 largeur */
        min-height: 1px;           /* Empêche le collapse hauteur 0 */
        display: block !important; /* Force l'existence du bloc */
    }
    
    /* Pour les sections inversées (Image à Droite), on force aussi */
    #gtc .uk-grid > div:last-child,
    #electricite .uk-grid > div:last-child {
        width: 33.333% !important;
    }
}