/* General Styles */
:root {
    --bleu-electrique: #00d4ff;
    --bleu-clair: #66c2ff;
    --bleu-profond: #0072c6;
    --blanc-casse: #f5f9ff;
    --gris-clair: #e6f2ff;
    --bg-dark-custom: rgba(10, 25, 47, 0.7); /* Transparence ajustée pour voir l'image */
    --bg-light-custom: #f0f8ff;
    --bg-white-custom: #ffffff;
}

/* Corps de la page */
body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: var(--blanc-casse);
}

/* Section Hero : Fond semi-transparent pour voir l'image */
.hero {
    background:
        linear-gradient(
            135deg,
            rgba(10, 25, 47, 0.6) 0%,
            rgba(0, 30, 60, 0.6) 100%
        ),
        url('../images/architecture-si.jpg'); /* Chemin relatif */
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    padding-top: 80px;
    color: white;
}


/* Texte et boutons dans la section Hero */
.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* Ombre pour améliorer la lisibilité */
    margin-bottom: 20px;
}

.hero p.lead {
    font-size: 1.25rem;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 30px;
}

.hero .btn-primary {
    background-color: var(--bleu-electrique);
    border-color: var(--bleu-electrique);
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.hero .btn-primary:hover {
    background-color: var(--bleu-clair);
    border-color: var(--bleu-clair);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.hero .btn-outline-light {
    border-color: white;
    color: white;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 5px;
    transition: all 0.3s;
}

.hero .btn-outline-light:hover {
    background-color: white;
    color: var(--bleu-profond);
    border-color: white;
}

/* Sections suivantes */
.bg-light-custom {
    background-color: var(--bg-light-custom);
}

.bg-white-custom {
    background-color: var(--bg-white-custom);
}

/* Cartes et éléments */
.card, .feature-box {
    background-color: var(--bg-white-custom);
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.card:hover, .feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Boutons généraux */
.btn-primary {
    background-color: var(--bleu-electrique);
    border-color: var(--bleu-electrique);
    color: white;
    font-weight: 500;
    transition: all 0.3s;
}

.btn-primary:hover {
    background-color: var(--bleu-clair);
    border-color: var(--bleu-clair);
}

/* Pied de page */
footer {
    background-color: var(--bleu-profond);
    color: white;
    padding: 30px 0;
}

footer a {
    color: var(--bleu-electrique);
}

/* Formulaire de contact */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--bg-white-custom);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        text-align: center;
        padding-top: 120px;
    }

    .hero h1 {
        font-size: 2.25rem;
    }

    .hero p.lead {
        font-size: 1.1rem;
    }
}
.logo-img {
    width: 50px; /* Ajustez la taille du logo */
    height: auto; /* Conserve les proportions */
}

.logo-text {
    font-size: 1.2rem; /* Ajustez la taille du texte */
    font-weight: bold; /* Texte en gras (optionnel) */
    color: #333; /* Couleur du texte (optionnel) */
}