<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aventure Marine Bleue</title>
<link rel="stylesheet" href="styles.css">
<!-- Utilisation de Google Fonts pour une police similaire, si besoin (alternative open-source) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<a href="#main-content" class="skip-link">Passer au contenu principal</a>
<header role="banner">
<h1>Aventure Marine Bleue</h1>
<p>Port Imaginaire, Ville Fictive, France</p>
</header>
<nav role="navigation">
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#activites">Activités</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main id="main-content" role="main">
<section id="accueil">
<h2>Bienvenue à bord !</h2>
<p>Depuis mon enfance, je suis passionné par l'océan. En 2010, j'ai lancé cette initiative pour explorer les mers.</p>
</section>
<section id="activites">
<h2>Nos Activités</h2>
<p>Nous collaborons dans des domaines scientifiques et sportifs pour protéger l'environnement marin.</p>
<p>Découvrez nos bateaux et sorties : croisières, formations en plongée, et ateliers éducatifs.</p>
<p>Participez à des conférences et reportages sur la préservation des océans.</p>
</section>
<section id="contact">
<h2>Contactez-nous</h2>
<p>Rejoignez l'aventure ! Envoyez-nous un message pour plus d'informations.</p>
<!-- Formulaire simple (ajout mineur pour interactivité basique) -->
<form aria-label="Formulaire de contact">
<label for="email">Votre email :</label>
<input type="email" id="email" name="email" required>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
<footer role="contentinfo">
<p>© 2026 Aventure Marine Bleue. Tous droits réservés.</p>
</footer>
<script src="script.js"></script>
</body>
</html>