:root {
    /* Le fond sombre de l'image de référence */
    --primary-background: #121212; 
    --secondary-background: #1c1c1c; /* Pour le footer ou sections */
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa; /* Texte secondaire moins brillant */
}

body {
    background-color: var(--primary-background);
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
}

.hero-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* Style de l'image (légers arrondis et ombre) */
.hero-section img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Texte secondaire */
.hero-section h3.text-muted {
    color: #cccccc !important;
}
.hero-section p.text-secondary {
    color: var(--text-secondary) !important;
}

/* Boutons d'action */
.action-buttons .btn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-width: 2px;
}

/* Style spécifique pour la page expertises (fond clair) */
.expertise-banner {
    background-color: #f8f9fa;
    border-left-color: #ffc107 !important; /* Couleur or/jaune de l'étoile */
}

.text-dark h1, .text-dark h2 {
    color: #333333;
}

/* On s'assure que les images d'expertises sont bien cadrées */
.img-fluid.rounded {
    border-radius: 12px !important;
}

.text-primary {
    color: #004a99 !important; /* On reprend le bleu pro de ton logo/header */
}

.rounded-circle {
    border: 5px solid #f8f9fa; /* Un léger cadre pour faire ressortir les portraits */
    transition: transform 0.3s ease;
}

.rounded-circle:hover {
    transform: scale(1.05); /* Petit effet de zoom au survol */
}

.border-bottom {
    border-color: #eee !important;
}

.lead {
    color: #212529 !important; /* Un noir élégant utilisé par Bootstrap */
}