/* Couleurs extraites de votre logo et harmonisées */
:root {
    --bleu-bc2i: #0000FF; /* Bleu vif du logo */
    --gris-bc2i: #8E9DA2; /* Gris du logo */
    --noir: #1a252f;      /* Noir bleuté pour le texte */
    --blanc: #ffffff;
    --fond-leger: rgba(244, 247, 246, 0.95); /* Fond gris très clair, presque opaque */
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    color: var(--noir);
    line-height: 1.6;

    /* --- AJOUT DE L'IMAGE DE FOND --- */
    /* 1. La couleur de fond de base */
    background-color: #f4f7f6; 
    
    /* 2. L'image de fond (assurez-vous du nom du fichier) */
    background-image: url('fond-informatique.svg'); 
    
    /* 3. L'image se répète pour couvrir tout l'écran */
    background-repeat: repeat; 
    
    /* 4. L'image reste fixe lors du défilement (optionnel, donne un effet sympa) */
    background-attachment: fixed; 
    
    /* 5. On centre l'image si elle est grande */
    background-position: center;
}

/* --- AJOUT D'UN VOILE DE TRANSPARENCE SUR LE CONTENU --- */
/* Pour s'assurer que le texte reste parfaitement lisible, 
   nous ajoutons un fond semi-transparent aux conteneurs de texte principal. */
.container, .hero {
    position: relative;
    z-index: 1;
}

.container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--fond-leger); /* Voile blanc/gris très clair */
    z-index: -1; /* Place le voile derrière le texte */
    border-radius: 10px; /* Optionnel : pour arrondir les coins du voile */
}

/* --- RESTE DU CODE CSS (Inchangé mais répété pour le fichier complet) --- */

header {
    background: var(--blanc);
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo img { height: 70px; }

nav ul { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; }
nav ul li a { 
    text-decoration: none; 
    color: var(--bleu-bc2i); 
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s;
}
nav ul li a:hover { color: var(--gris-bc2i); }

.hero {
    /* Superposition de dégradé bleu/noir sur l'image hero pour le texte */
    background: linear-gradient(rgba(0, 0, 255, 0.8), rgba(26, 37, 47, 0.9)), 
                url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 120px 10%;
}

.hero h1 { font-size: 2.5rem; margin-bottom: 15px; }
.hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 30px auto; }

.btn {
    background: var(--bleu-bc2i);
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
    transition: background 0.3s;
}
.btn:hover { background: #0000cc; }

.container { padding: 80px 10%; max-width: 1200px; margin: auto; position: relative; }
h2 { color: var(--bleu-bc2i); border-bottom: 2px solid var(--gris-bc2i); padding-bottom: 15px; margin-bottom: 40px; }
h3 { color: var(--bleu-bc2i); margin-top: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.card { background: var(--blanc); padding: 40px; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: transform 0.3s; }
.card:hover { transform: translateY(-5px); }

footer { background: #111; color: rgba(255,255,255,0.7); text-align: center; padding: 50px; margin-top: 80px; font-size: 0.9rem; }

/* Responsive basics */
@media (max-width: 768px) {
    header { flex-direction: column; padding: 20px; }
    nav ul { margin-top: 20px; flex-wrap: wrap; justify-content: center; }
    .hero h1 { font-size: 2rem; }
}



.contact-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 30px;
}
.info-box {
	background: #f9f9f9;
	padding: 20px;
	border-left: 5px solid var(--bleu-bc2i);
	border-radius: 4px;
}
.info-box h3 { margin-top: 0; color: var(--bleu-bc2i); }
.map-container {
	width: 100%;
	height: 400px;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 768px) {
	.contact-content { grid-template-columns: 1fr; }
}