diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0b78131
--- /dev/null
+++ b/index.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="fr">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Accueil Wi-Fi</title>
+		<style>
+			:root {
+				--bg: #eef2ff;
+				--card: #ffffff;
+				--text: #111827;
+				--muted: #475569;
+				--accent: #1e3a8a;
+				--accent-soft: #dbeafe;
+				--border: #d1d5db;
+			}
+
+			* {
+				box-sizing: border-box;
+			}
+
+			body {
+				margin: 0;
+				font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+				color: var(--text);
+				background: radial-gradient(circle at top, #e0e7ff 0%, var(--bg) 45%, #f8fafc 100%);
+				min-height: 100vh;
+				display: grid;
+				place-items: center;
+				padding: 24px;
+			}
+
+			.container {
+				width: min(860px, 100%);
+			}
+
+			.hero {
+				background: var(--card);
+				border: 1px solid var(--border);
+				border-radius: 16px;
+				padding: 26px;
+				box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
+				margin-bottom: 16px;
+			}
+
+			.badge {
+				display: inline-block;
+				padding: 4px 10px;
+				margin-bottom: 10px;
+				border-radius: 999px;
+				font-size: 0.8rem;
+				font-weight: 700;
+				color: var(--accent);
+				background: var(--accent-soft);
+			}
+
+			h1 {
+				margin: 0 0 8px;
+				font-size: clamp(1.5rem, 2.4vw, 2.1rem);
+			}
+
+			.subtitle {
+				margin: 0;
+				color: var(--muted);
+			}
+
+			.links {
+				display: grid;
+				gap: 14px;
+				grid-template-columns: repeat(2, minmax(0, 1fr));
+			}
+
+			.link-card {
+				display: block;
+				text-decoration: none;
+				background: #fff;
+				border: 1px solid var(--border);
+				border-radius: 14px;
+				padding: 18px;
+				color: inherit;
+				box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
+				transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+			}
+
+			.link-card:hover {
+				transform: translateY(-1px);
+				border-color: #93c5fd;
+				box-shadow: 0 12px 24px rgba(30, 58, 138, 0.16);
+			}
+
+			.link-title {
+				font-size: 1.05rem;
+				font-weight: 700;
+				color: #0f172a;
+				margin: 0 0 5px;
+			}
+
+			.link-desc {
+				margin: 0;
+				color: var(--muted);
+				font-size: 0.95rem;
+			}
+
+			@media (max-width: 740px) {
+				.links {
+					grid-template-columns: 1fr;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<section class="hero">
+				<div class="badge">Accueil</div>
+				<h1>Portail Wi-Fi</h1>
+				<p class="subtitle">Choisissez la version à afficher ou imprimer.</p>
+			</section>
+
+			<section class="links" aria-label="Liens vers les versions Wi-Fi">
+				<a class="link-card" href="classique.html">
+					<h2 class="link-title">Version Classique</h2>
+					<p class="link-desc">Carte grand format, idéale pour affichage à l'écran.</p>
+				</a>
+
+				<a class="link-card" href="a6.html">
+					<h2 class="link-title">Version A6</h2>
+					<p class="link-desc">Carte compacte, optimisée pour impression et découpe.</p>
+				</a>
+			</section>
+		</div>
+	</body>
+</html>
