[alt+tab] ajout de la dernière section (contact)

branches/alt+tab/index.html

@@ -13,6 +13,7 @@
 
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
 </head>
 
@@ -96,7 +97,8 @@
 
     <div class="community-right">
         <h2>Qui sommes-nous ?</h2>
-        <p>Bienvenue dans l'atmosphère vibrante et décontractée de notre communauté <b>Alt Tab</b> (anciennement <i>Zaap Sufokien</i>). Nos guildes sont bien plus que de simples regroupements de joueurs ; ce sont des familles virtuelles où règnent la camaraderie, le fun et l'aventure. Que vous soyez un novice enthousiaste ou un vétéran aguerri, vous trouverez ici un refuge où vous pouvez être vous-même, explorer des mondes fantastiques et relever des défis épiques. Rejoignez-nous pour des soirées endiablées, des événements communautaires et des échanges enjoués où l'humour (douteux) et la bonne humeur sont toujours au rendez-vous. Dans nos guildes, chaque joueur est une pièce essentielle d'un puzzle plus grand, où l'amusement et la convivialité sont les maîtres mots !</p>
+        <p>Bienvenue dans l'atmosphère vibrante et décontractée de notre communauté <b>Alt Tab</b> (anciennement <i>Zaap Sufokien</i>). Nos guildes sont bien plus que de simples regroupements de joueurs ; ce sont des familles virtuelles où règnent la camaraderie, le fun et l'aventure. Que vous soyez un novice enthousiaste ou un vétéran aguerri, vous trouverez ici un refuge où vous pouvez être vous-même, explorer des mondes fantastiques et relever des défis épiques. Rejoignez-nous pour des soirées endiablées, des événements communautaires et des échanges enjoués où l'humour (douteux) et la bonne humeur sont toujours au rendez-vous. Dans nos guildes, chaque joueur est une pièce essentielle d'un puzzle plus grand, où l'amusement et la convivialité sont les maîtres mots.</p>
+        <p><b>Alt Tab</b> est une branche de l'association <b>Camélia Studio</b>, vous pouvez en savoir plus à son sujet en consultant sa page web <a href="https://camelia-studio.org/" target="_blank">juste ici</a>.</p>
 
         <h2>Où nous trouver ?</h2>
         <p>Nous avons actuellement des guildes sur :</p>
@@ -149,8 +151,33 @@
     </div>
 </section>
 
-<section class="third-section" id="section-3">
+<!-- Third Section (Nous Contacter) -->
-    <!-- Contenu de la section 3 -->
+<section id="section-3" class="contact-section">
+    <div class="contact-container">
+        <h2>À voir également</h2>
+        <ul class="contact-links">
+            <li>
+                <a href="https://tsubakimono.camelia-studio.org/category/zaap-sufokien/" target="_blank">
+                    <i class="fa-brands fa-wordpress"></i> Nos articles sur Tsubakimono
+                </a>
+            </li>
+            <li>
+                <a href="https://ico.camelia-studio.org/gallery/jMr107O4hFJqcKwyqds2epX8" target="_blank">
+                    <i class="fa-solid fa-image"></i> Nos galeries d'images sur ICO
+                </a>
+            </li>
+            <li>
+                <a href="https://discord.gg/nBuZ9vJ" target="_blank">
+                    <i class="fa-brands fa-discord"></i> Le serveur Discord de Camélia Studio
+                </a>
+            </li>
+            <li>
+                <a href="https://shelter.moe/@Camelia" target="_blank">
+                    <i class="fa-brands fa-mastodon"></i> La page Mastodon de Camélia Studio
+                </a>
+            </li>
+        </ul>
+    </div>
 </section>
 
 <div class="pagination-dots">

branches/alt+tab/style.css

@@ -292,6 +292,66 @@ a {
     border-radius: 2px;
 }
 
+/* Contact Section */
+.contact-section {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #2682C4;
+    color: white;
+}
+
+.contact-container {
+    text-align: center;
+}
+
+.contact-section h2 {
+    font-size: 3rem;
+    margin-bottom: 40px;
+    position: relative;
+}
+
+/* Ligne bleue sous le titre */
+.contact-section h2::after {
+    content: '';
+    display: block;
+    width: 80px;
+    height: 3px;
+    background-color: white;
+    margin: 20px auto;
+}
+
+/* Liste des liens */
+.contact-links {
+    list-style: none;
+    padding: 0;
+}
+
+.contact-links li {
+    margin: 20px 0;
+}
+
+.contact-links a {
+    text-decoration: none;
+    font-size: 1.5rem;
+    color: white;
+    display: inline-flex;
+    align-items: center;
+    transition: color 0.3s ease;
+}
+
+.contact-links a:hover {
+    color: #ccc;
+}
+
+/* Icônes */
+.contact-links i {
+    margin-right: 10px;
+    font-size: 2rem;
+}
+
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .community-section {