/* 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('https://mistralaichatupprodswe.blob.core.windows.net/chat-images/39/4d/e2/394de29c-45db-4497-b856-fef01c63119b/bbfa60b7-5921-48d6-82d9-ce477a515c13/9bf90be9-71e7-4a6c-b78a-38a2e568ea38?sv=2025-01-05&st=2025-10-12T16%3A34%3A44Z&se=2025-10-12T17%3A34%3A44Z&sr=b&sp=rade&sig=pwRQpA86uM0O2fnCt3d7OTWs8jjYsLCvIkseILgOszo%3D');
    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;
    }
}