body { font-family: "Roboto", Arial, sans-serif; margin: 0; background: #f5f5f5; color: #444; }
        
header { text-align: center; padding: 40px 20px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
header img { width: 420px; height: auto; }
h1 { color: #362b4b; margin-top: 15px; font-size: 2rem; }
.container { max-width: 75%; margin: 40px auto; padding: 0 20px; }
.presentation { background: white; padding: 25px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 40px; }
.cards { display: flex; gap: 20px; flex-wrap: wrap; }

.card {
    flex: 1;
    min-width: 250px;
    background: white;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.card:hover { transform: scale(1.03); }
.card img { width: auto; height: 100px; }
.card a { text-decoration: none; color: #362b4b; font-weight: bold; font-size: 1.2rem; }
a { text-decoration: none; color: #362b4b; font-weight: bold;  }
.text { line-height: 35px; vertical-align: super; }

.coordonnees-wrapper { display: flex; align-items: center; gap: 20px; }
.coordonnees { flex: 1; }
.image-coordonnees { flex: 1; }
.image-coordonnees img { width: 100%; object-fit: cover; }

@media (max-width: 1200px) {
    .container { max-width: 85%;  }
}
@media (max-width: 900px) {
    .coordonnees-wrapper { display: block;  }
}

footer { text-align: center; padding: 40px 20px; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-size:14px; }