:root {
    /* Palette COBIA */
    --brand-blue: #092442;  /* Bleu Nuit Profond */
    --brand-yellow: #ffdd57; /* Jaune Sécurité */

    /* Surcharge Bulma Primary */
    --bulma-primary-h: 212;
    --bulma-primary-s: 76%; 
    --bulma-primary-l: 15%;
}

/* Transition Douce pour les Ancres */
html { scroll-behavior: smooth; }

/* 1. TEXTURES & FONDS (Anti-vide) */
.technical-bg {
    background-color: #f8f9fa;
    background-image: radial-gradient(#dee2e6 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 2. TITRES DE SECTIONS (Signature visuelle) */
.section-underlined::after {
    content: ''; display: block; width: 60px; height: 4px;
    background: var(--brand-yellow); margin: 10px auto 0;
}

/* 3. HERO BANNIERE */
/* 1. CONFIGURATION DE BASE (Pour tout le monde) */
.banner-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* Transition douce si on redimensionne la fenêtre (optionnel) */
    transition: background-image 0.3s ease-in-out;
}

/* 2. IMAGE BUREAU (Écrans larges > 768px) */
@media screen and (min-width: 769px) {
    .banner-bg {
        background-image: url('/img/hero.webp');
        /* On peut fixer le background pour un effet sympa sur PC */
        background-attachment: fixed; 
    }
}

/* 3. IMAGE MOBILE (Écrans étroits <= 768px) */
@media screen and (max-width: 768px) {
    .banner-bg {
        /* On charge l'image verticale ici */
        background-image: url('/img/hero-mobile.webp');
        
        /* Sur mobile, on évite 'fixed' qui peut bugger, on reste sur scroll */
        background-attachment: scroll;
        
        /* On s'assure que le haut de l'image (têtes) est prioritaire */
        background-position: center top;
    }
}
.banner-bg::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(9, 36, 66, 0.85); /* Bleu très dense pour la lisibilité */
}

/* 4. CARTES "IMMERSIVE" (Dark Mode - Pour les Services) */
.immersive-card {
    background-color: var(--brand-blue);
    border-radius: 6px;
    border-bottom: 6px solid var(--brand-yellow);
    box-shadow: 0 10px 30px rgba(9, 36, 66, 0.25);
    transition: transform 0.3s ease;
}
.immersive-card:hover { transform: translateY(-5px); }
.immersive-card hr { background-color: rgba(255,255,255,0.1); height: 1px; border: none; }

/* 5. CARTES "PRO" (Light Mode - Pour Engagement & Portfolio) */
.pro-card {
    background-color: white;
    border-radius: 6px;
    border-top: 4px solid var(--brand-yellow); /* Rappel de couleur en haut */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.pro-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px rgba(9, 36, 66, 0.15);
}

/* 6. CUBES INTERACTIFS */
.cube-card {
    aspect-ratio: 1 / 1;
    background-size: cover; background-position: center;
    border-radius: 6px; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.cube-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background-color: rgba(9, 36, 66, 0.85); /* Bleu marque */
    color: white; transition: padding 0.3s ease;
}
.cube-card:hover .cube-overlay { padding-bottom: 2rem !important; }

/* UTILITAIRES */
.icon-circle {
    background: rgba(255,255,255,0.1); width: 80px; height: 80px; border-radius: 50%;
}
/*.footer a { transition: color 0.2s; }
.footer a:hover { color: #ffdd57 !important; text-decoration: underline; }*/
.footer a:hover { color: var(--brand-yellow) !important; }
.footer-separator { border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0; }
.h-100 { height: 100%; }

/* Navbar fix couleur */
.navbar.is-primary { background-color: var(--brand-blue); }
/*.navbar.is-primary { background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)); }*/

/* Style simple pour la lecture */
.legal-content h1 { color: #092442; margin-bottom: 1.5rem; }
.legal-content h2 { color: #092442; margin-top: 2rem; font-size: 1.25rem; border-bottom: 2px solid #ffdd57; display: inline-block; padding-bottom: 5px;}
.legal-content p { margin-bottom: 1rem; text-align: justify; }