body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f4f4f4; line-height: 1.6; }
header { background: #004085; color: white; padding: 20px; text-align: center; }
header img { max-width: 150px; height: auto; }
nav { background: #002752; padding: 10px 0; text-align: center; }
nav a { color: white; text-decoration: none; padding: 15px; display: inline-block; font-size: 16px; transition: background 0.3s; }
nav a:hover, nav a:focus { background: #0056b3; outline: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; background: white; }
.banner { background: url('banner.jpg') center/cover no-repeat; padding: 60px; color: white; text-align: center; font-size: 28px; font-weight: bold; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); }
.btn { background: #28a745; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: inline-block; margin-top: 10px; transition: background 0.3s; }
.btn:hover, .btn:focus { background: #218838; outline: none; }
.categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.categorie { background: #f8f9fa; padding: 15px; border-radius: 5px; text-align: center; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); }
iframe { width: 100%; height: 400px; border: none; margin-top: 20px; }
.btn-maps { background: #dc3545; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; display: block; width: fit-content; margin: 20px auto; text-align: center; transition: background 0.3s; }
.btn-maps:hover, .btn-maps:focus { background: #c82333; outline: none; }
footer { background: #333; color: white; text-align: center; padding: 10px; margin-top: 20px; }
.contact-info { text-align: left; margin-top: 20px; }
.contact-info a { color: #004085; text-decoration: none; font-weight: bold; transition: color 0.3s; }
.contact-info a:hover, .contact-info a:focus { color: #002752; outline: none; }

/* Carrousel */
.carousel-container { position: relative; max-width: 1100px; margin: 20px auto; overflow: hidden; }
.carousel { display: flex; transition: transform 0.5s ease; }
.carousel-item { min-width: 100%; }
.carousel-item img { width: 100%; height: auto; object-fit: cover; }
.carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; font-size: 18px; }
.carousel-control:hover, .carousel-control:focus { background: rgba(0, 0, 0, 0.8); outline: none; }
.prev { left: 10px; }
.next { right: 10px; }
.carousel-dots { text-align: center; margin-top: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; background: #bbb; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: background 0.3s; }
.dot.active { background: #717171; }
.dot:hover, .dot:focus { background: #999; outline: none; }

/* Formulaire */
.contact-form label { display: block; margin: 5px 0; font-weight: bold; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px; margin: 5px 0 10px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #28a745; outline: none; }
.btn-submit { background: #28a745; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; }
.btn-submit:hover, .btn-submit:focus { background: #218838; outline: none; }
.form-message.success { color: green; }
.form-message.error { color: red; }

/* Responsive */
@media (max-width: 768px) { .categories { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
@media (max-width: 480px) { .banner { font-size: 20px; padding: 40px; } }
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f4f4f4; line-height: 1.6; }
header { background: #004085; color: white; padding: 20px; text-align: center; }
header img { max-width: 150px; height: auto; }
nav { background: #002752; padding: 10px 0; text-align: center; }
nav a { color: white; text-decoration: none; padding: 15px; display: inline-block; font-size: 16px; transition: background 0.3s; }
nav a:hover, nav a:focus { background: #0056b3; outline: none; }
nav a[aria-current="page"] { background: #0056b3; }
.container { max-width: 1100px; margin: 20px auto; padding: 20px; background: white; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
footer { background: #333; color: white; text-align: center; padding: 10px; margin-top: 20px; }

h2 { color: #004085; margin-top: 30px; }
p { color: #666; }
.mission-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.mission-vision article { background: #f8f9fa; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.why-choose-us ul { list-style: none; padding: 0; }
.why-choose-us li { background: url('https://via.placeholder.com/20?text=✓') no-repeat left center; padding-left: 30px; margin: 10px 0; font-size: 16px; }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; }
.team-member { text-align: center; background: #f8f9fa; padding: 10px; border-radius: 5px; cursor: pointer; transition: transform 0.3s; border: none; }
.team-member:hover, .team-member:focus { transform: scale(1.05); outline: none; }
.team-member img { width: 100%; height: 200px; object-fit: cover; border-radius: 50%; }
.team-member h3 { font-size: 18px; margin: 10px 0 5px; color: #004085; }
.team-member p { font-size: 14px; color: #666; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; }
.modal-content { background: white; margin: 10% auto; padding: 20px; width: 90%; max-width: 400px; border-radius: 5px; position: relative; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #666; }
.close-btn:hover, .close-btn:focus { color: #000; outline: none; }
.card-details { text-align: center; }
.card-details h3 { color: #004085; margin-bottom: 10px; }
.card-details p { margin: 5px 0; }
.card-details a { color: #004085; text-decoration: none; }
.card-details a:hover, .card-details a:focus { color: #002752; text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) { 
    .mission-vision { grid-template-columns: 1fr; }
    .team { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
@media (max-width: 480px) { 
    .team { grid-template-columns: 1fr; }
}