1 line
62 KiB
HTML
1 line
62 KiB
HTML
<!DOCTYPE html><html lang="fr"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="/assets/banquise_server.svg"/><link rel="preload" as="image" href="/assets/wikijs.png"/><link rel="preload" as="image" href="/assets/Gitea_Logo.png"/><link rel="preload" as="image" href="/assets/pelican.png"/><link rel="preload" as="image" href="/path/to/ssp-image.jpg"/><link rel="preload" as="image" href="/assets/opencloud_logo_white.png"/><link rel="preload" as="image" href="/path/to/intra-image.jpg"/><link rel="preload" as="image" href="/path/to/panel-image.jpg"/><link rel="preload" as="image" href="/path/to/mails-image.jpg"/><link rel="stylesheet" href="/_next/static/css/42dfb7eda7c856d4.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-c81f7fd28659d64f.js"/><script src="/_next/static/chunks/fd9d1056-0ff392f7c03a948a.js" async=""></script><script src="/_next/static/chunks/117-e4a05cc4fa1974fe.js" async=""></script><script src="/_next/static/chunks/main-app-741f9f025b2fde52.js" async=""></script><script src="/_next/static/chunks/145-7efb8ef7bc9ac179.js" async=""></script><script src="/_next/static/chunks/app/page-c46de648578fb029.js" async=""></script><title>La Banquise - Hébergement et Communauté Tech</title><meta name="description" content="Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA. Services Wiki, Gitea, Panel de jeux."/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><div class="min-h-screen relative overflow-x-hidden"><div class="fixed inset-0 pointer-events-none"><div class="absolute inset-0 bg-gradient-to-b from-banquise-blue-light via-banquise-blue via-banquise-blue-dark to-banquise-blue-dark"></div><div class="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/60 to-banquise-blue-dark transition-opacity duration-500" style="opacity:0"></div><div class="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/70 to-banquise-blue-dark transition-opacity duration-500" style="opacity:0"></div><div class="absolute inset-0 bg-gradient-to-b from-transparent via-banquise-blue-dark/80 to-slate-900 transition-opacity duration-500" style="opacity:0"></div><div class="absolute inset-0 bg-gradient-to-b from-banquise-blue-dark/50 to-slate-900 transition-opacity duration-500" style="opacity:0"></div><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/4 via-transparent to-transparent"></div><div class="absolute inset-0 bg-gradient-to-bl from-transparent via-banquise-blue-lightest/2 to-transparent"></div><div class="absolute inset-0"><div class="absolute top-0 left-1/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/20 via-banquise-blue-lightest/8 to-transparent animate-ocean-shimmer"></div><div class="absolute top-0 left-2/3 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/15 via-banquise-blue-lightest/6 to-transparent animate-ocean-shimmer delay-1000"></div><div class="absolute top-0 left-3/4 w-px h-full bg-gradient-to-b from-banquise-blue-lightest/10 via-banquise-blue-lightest/4 to-transparent animate-ocean-shimmer delay-2000"></div></div><div class="absolute inset-0"><div class="absolute top-1/6 left-1/5 w-2 h-2 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float"></div><div class="absolute top-1/4 left-3/4 w-1 h-1 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-500"></div><div class="absolute top-1/3 left-1/3 w-3 h-3 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-slow"></div><div class="absolute top-1/2 left-4/5 w-1.5 h-1.5 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-1000"></div><div class="absolute top-2/3 left-1/6 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-slow delay-1500"></div><div class="absolute top-3/4 left-2/3 w-1 h-1 bg-banquise-blue-lightest/22 rounded-full animate-bubble-float-fast delay-700"></div><div class="absolute top-5/6 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-300"></div><div class="absolute top-11/12 left-3/5 w-2 h-2 bg-banquise-blue-lightest/6 rounded-full animate-bubble-float-slow delay-2000"></div><div class="absolute top-1/8 left-1/2 w-1.5 h-1.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float-fast delay-800"></div><div class="absolute top-3/8 left-1/8 w-2 h-2 bg-banquise-blue-lightest/12 rounded-full animate-bubble-float delay-1200"></div><div class="absolute top-5/8 left-7/8 w-1 h-1 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-600"></div><div class="absolute top-7/8 left-1/4 w-2.5 h-2.5 bg-banquise-blue-lightest/8 rounded-full animate-bubble-float-fast delay-1800"></div><div class="absolute top-1/7 left-5/6 w-1 h-1 bg-banquise-blue-lightest/28 rounded-full animate-bubble-float delay-400"></div><div class="absolute top-2/7 left-2/5 w-1.5 h-1.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-slow delay-900"></div><div class="absolute top-4/7 left-3/8 w-2 h-2 bg-banquise-blue-lightest/10 rounded-full animate-bubble-float-fast delay-1400"></div><div class="absolute top-6/7 left-4/5 w-1 h-1 bg-banquise-blue-lightest/18 rounded-full animate-bubble-float delay-200"></div><div class="absolute top-1/10 left-3/10 w-0.5 h-0.5 bg-banquise-blue-lightest/30 rounded-full animate-bubble-float-fast delay-100"></div><div class="absolute top-3/10 left-7/10 w-0.5 h-0.5 bg-banquise-blue-lightest/25 rounded-full animate-bubble-float delay-1100"></div><div class="absolute top-7/10 left-1/10 w-0.5 h-0.5 bg-banquise-blue-lightest/20 rounded-full animate-bubble-float-slow delay-1700"></div><div class="absolute top-9/10 left-9/10 w-0.5 h-0.5 bg-banquise-blue-lightest/15 rounded-full animate-bubble-float-fast delay-2200"></div><div class="absolute top-1/5 left-4/7 w-3 h-3 bg-banquise-blue-lightest/5 rounded-full animate-bubble-float-slow delay-1600"></div><div class="absolute top-2/5 left-6/7 w-2.5 h-2.5 bg-banquise-blue-lightest/7 rounded-full animate-bubble-float delay-800"></div><div class="absolute top-4/5 left-2/7 w-3.5 h-3.5 bg-banquise-blue-lightest/4 rounded-full animate-bubble-float-slow delay-2400"></div></div></div><div class="relative z-10 text-white"><nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-out bg-banquise-blue-dark/90 backdrop-blur-lg shadow-xl border-b border-banquise-blue-lightest/20 will-change-auto"><div class="max-w-7xl mx-auto"><div class="flex justify-between items-center px-4 sm:px-6 lg:px-8 transition-all duration-300 h-18 lg:h-20"><div class="flex items-center group cursor-pointer"><div class="relative flex items-center"><div class="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/30 to-banquise-blue/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110"></div><div class="relative flex items-center justify-center rounded-full p-2 bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 group-hover:bg-white/20 group-hover:scale-105 group-hover:border-white/30"><img src="/assets/banquise_server.svg" alt="Logo La Banquise" class="transition-all duration-300 group-hover:scale-110 h-10 w-10" style="filter:drop-shadow(0 4px 12px rgba(168, 218, 255, 0.4))"/></div></div><div class="ml-3 hidden sm:block"><h1 class="font-heading font-bold text-white tracking-tight transition-all duration-300 text-xl lg:text-2xl group-hover:text-banquise-blue-lightest">La Banquise</h1><p class="text-banquise-blue-lightest/70 font-medium transition-all duration-300 text-sm group-hover:text-banquise-blue-lightest/90">Communauté • Hébergement</p></div></div><nav class="hidden md:flex items-center space-x-1 flex-1 justify-center ml-8"><a href="#home" class="relative px-4 py-2 text-sm font-medium transition-all duration-300 rounded-lg group hover:text-white focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50 text-white bg-white/20 shadow-lg"><span class="relative z-10">Accueil</span><div class="absolute inset-0 rounded-lg bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100"></div><div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-0.5 bg-banquise-blue-lightest rounded-full"></div></a><a href="#services" class="relative px-4 py-2 text-sm font-medium transition-all duration-300 rounded-lg group hover:text-white focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50 text-white/80 hover:bg-white/10"><span class="relative z-10">Services</span><div class="absolute inset-0 rounded-lg bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100"></div></a><a href="#about" class="relative px-4 py-2 text-sm font-medium transition-all duration-300 rounded-lg group hover:text-white focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50 text-white/80 hover:bg-white/10"><span class="relative z-10">À propos</span><div class="absolute inset-0 rounded-lg bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100"></div></a><a href="mailto:contact@la-banquise.fr" class="relative px-4 py-2 text-sm font-medium transition-all duration-300 rounded-lg group hover:text-white focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50 text-white/80 hover:bg-white/10"><span class="relative z-10">Contact</span><div class="absolute inset-0 rounded-lg bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-all duration-300 scale-95 group-hover:scale-100"></div></a></nav><div class="hidden md:flex items-center space-x-3"><div class="relative"><div class="relative"><button class="flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200 bg-white/10 hover:bg-white/20 border border-white/20 hover:border-white/30 text-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50 group" aria-expanded="false" aria-haspopup="listbox"><span class="text-lg">🇫🇷</span><span class="hidden sm:inline">FR</span><svg class="w-4 h-4 transition-transform duration-200 rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button></div></div><button class="inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95 px-3 py-1.5 text-sm bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 hover:shadow-indigo-500/25 hidden lg:flex"><span class="mr-2"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"></path></svg></span>Discord</button><button class="inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95 px-3 py-1.5 text-sm bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 hover:shadow-indigo-500/25 lg:hidden" aria-label="Rejoindre Discord"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"></path></svg></button><button class="inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95 px-3 py-1.5 text-sm bg-gradient-to-r from-banquise-blue to-banquise-blue-light hover:shadow-banquise-blue/25 transition-all duration-300 shadow-lg hover:shadow-xl"><span class="mr-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></span><span class="hidden lg:inline">Connexion</span><span class="lg:hidden">Se connecter</span></button></div><button class="md:hidden relative p-3 rounded-xl transition-all duration-300 group bg-white/10 hover:bg-white/20 active:bg-white/25 border border-white/20 hover:border-white/30 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50" aria-label="Ouvrir le menu" aria-expanded="false"><div class="w-6 h-6 relative flex flex-col justify-center items-center"><span class="absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform -translate-y-2"></span><span class="absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out opacity-100 scale-100"></span><span class="absolute block h-0.5 w-6 bg-white rounded-full transition-all duration-300 ease-out transform translate-y-2"></span></div><div class="absolute inset-0 rounded-xl bg-gradient-to-r from-banquise-blue-light/20 to-banquise-blue/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div></button></div></div><div class="absolute bottom-0 left-0 right-0"><div class="h-px bg-gradient-to-r from-transparent via-banquise-blue-lightest/40 to-transparent"></div><div class="h-px bg-gradient-to-r from-transparent via-banquise-blue-light/20 to-transparent blur-sm"></div></div><div class="absolute inset-0 pointer-events-none transition-opacity duration-500 bg-gradient-to-b from-banquise-blue-light/5 to-transparent opacity-100"></div></nav><div class="transition-all duration-300 h-18 lg:h-20"></div><div class="md:hidden fixed inset-0 z-[100] transition-all duration-300 invisible"><div class="absolute inset-0 transition-all duration-300 bg-gradient-to-br from-black/80 via-banquise-blue-dark/60 to-black/80 backdrop-blur-lg opacity-0"></div><div class="absolute top-0 right-0 h-full w-80 max-w-[90vw] bg-gradient-to-b from-banquise-blue-dark/98 via-banquise-blue-dark/95 to-banquise-blue-dark/90 backdrop-blur-2xl shadow-2xl border-l border-banquise-blue-lightest/20 transition-transform duration-300 ease-out translate-x-full"><div class="flex items-center justify-between p-6 pt-8 border-b border-banquise-blue-lightest/20"><div class="flex items-center group cursor-pointer"><div class="relative flex items-center"><div class="absolute inset-0 bg-gradient-to-r from-banquise-blue-light/30 to-banquise-blue/30 rounded-full blur-md opacity-0 group-hover:opacity-100 transition-all duration-300 scale-110"></div><div class="relative flex items-center justify-center rounded-full p-2 bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 group-hover:bg-white/20 group-hover:scale-105 group-hover:border-white/30"><img src="/assets/banquise_server.svg" alt="Logo La Banquise" class="transition-all duration-300 group-hover:scale-110 h-10 w-10" style="filter:drop-shadow(0 4px 12px rgba(168, 218, 255, 0.4))"/></div></div><div class="ml-3 hidden sm:block"><h1 class="font-heading font-bold text-white tracking-tight transition-all duration-300 text-xl lg:text-2xl group-hover:text-banquise-blue-lightest">La Banquise</h1><p class="text-banquise-blue-lightest/70 font-medium transition-all duration-300 text-sm group-hover:text-banquise-blue-lightest/90">Communauté • Hébergement</p></div></div><button class="group relative p-3 rounded-xl transition-all duration-300 bg-white/10 hover:bg-white/20 active:bg-white/25 border border-white/20 hover:border-white/30 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-banquise-blue-light/50" aria-label="Fermer le menu"><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="flex flex-col h-full overflow-y-auto p-6 space-y-4"><div class="space-y-3"><a href="#home" class="group flex items-center justify-between p-4 rounded-xl transition-all duration-300 bg-white/5 hover:bg-white/10 active:bg-white/15 border border-white/10 hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-banquise-blue/20"><div class="flex items-center space-x-4"><div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20 border border-banquise-blue-lightest/20 group-hover:scale-110 transition-transform duration-300"><svg class="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg></div><div class="flex-1"><span class="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">Accueil</span><p class="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">Retour à l'accueil</p></div></div><div class="flex items-center justify-center w-6 h-6 rounded-full text-white/40 group-hover:text-white/80 transition-all duration-300 group-hover:translate-x-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></a><a href="#services" class="group flex items-center justify-between p-4 rounded-xl transition-all duration-300 bg-white/5 hover:bg-white/10 active:bg-white/15 border border-white/10 hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-banquise-blue/20"><div class="flex items-center space-x-4"><div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20 border border-banquise-blue-lightest/20 group-hover:scale-110 transition-transform duration-300"><svg class="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg></div><div class="flex-1"><span class="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">Services</span><p class="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">Découvrir notre offre</p></div></div><div class="flex items-center justify-center w-6 h-6 rounded-full text-white/40 group-hover:text-white/80 transition-all duration-300 group-hover:translate-x-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></a><a href="#about" class="group flex items-center justify-between p-4 rounded-xl transition-all duration-300 bg-white/5 hover:bg-white/10 active:bg-white/15 border border-white/10 hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-banquise-blue/20"><div class="flex items-center space-x-4"><div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20 border border-banquise-blue-lightest/20 group-hover:scale-110 transition-transform duration-300"><svg class="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div><div class="flex-1"><span class="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">À propos</span><p class="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">En savoir plus sur nous</p></div></div><div class="flex items-center justify-center w-6 h-6 rounded-full text-white/40 group-hover:text-white/80 transition-all duration-300 group-hover:translate-x-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></a><a href="mailto:contact@la-banquise.fr" class="group flex items-center justify-between p-4 rounded-xl transition-all duration-300 bg-white/5 hover:bg-white/10 active:bg-white/15 border border-white/10 hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-banquise-blue/20"><div class="flex items-center space-x-4"><div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20 border border-banquise-blue-lightest/20 group-hover:scale-110 transition-transform duration-300"><svg class="w-5 h-5 text-banquise-blue-lightest" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></div><div class="flex-1"><span class="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">Contact</span><p class="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">Nous envoyer un email</p></div></div><div class="flex items-center justify-center w-6 h-6 rounded-full text-white/40 group-hover:text-white/80 transition-all duration-300 group-hover:translate-x-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></a></div><div class="border-t border-banquise-blue-lightest/20 my-6"></div><div class="space-y-3"><a href="https://discord.gg/bJhM97wans" class="group flex items-center justify-between p-4 rounded-xl transition-all duration-300 bg-white/5 hover:bg-white/10 active:bg-white/15 border border-white/10 hover:border-white/20 hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-banquise-blue/20" target="_blank" rel="noopener noreferrer"><div class="flex items-center space-x-4"><div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-banquise-blue-light/20 to-banquise-blue/20 border border-banquise-blue-lightest/20 group-hover:scale-110 transition-transform duration-300"><svg class="w-5 h-5 text-[#5865F2]" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"></path></svg></div><div class="flex-1"><span class="block text-white font-semibold text-base group-hover:text-banquise-blue-lightest transition-colors">Discord</span><p class="text-white/60 text-sm mt-0.5 group-hover:text-white/80 transition-colors">Rejoindre la communauté</p></div></div><div class="flex items-center justify-center w-6 h-6 rounded-full text-white/40 group-hover:text-white/80 transition-all duration-300 group-hover:translate-x-1"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></a></div><div class="mt-8 pb-6"><button class="inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95 px-6 py-3 text-base lg:text-lg bg-gradient-to-r from-banquise-blue to-banquise-blue-light hover:shadow-banquise-blue/25 w-full shadow-xl"><span class="mr-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg></span>Se connecter</button></div></div><div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-banquise-blue-dark/10 pointer-events-none"></div></div></div><section id="home" class="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8 relative z-3"><div class="mb-8 sm:mb-10 md:mb-12 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-4 sm:p-5 md:p-6 shadow-2xl backdrop-blur-sm border border-banquise-blue-lightest/30 relative group"><img src="/assets/banquise_server.svg" alt="Logo La Banquise" class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-110" style="filter:drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))"/></div><h1 class="text-banquise-gray text-3xl sm:text-4xl md:text-5xl lg:text-6xl mb-6 sm:mb-7 md:mb-8 font-extrabold leading-tight max-w-4xl font-heading px-2 relative z-10" style="text-shadow:0 2px 10px rgba(0, 0, 0, 0.3)">Bienvenue chez La Banquise</h1><p class="text-banquise-gray text-lg sm:text-xl md:text-2xl mb-8 sm:mb-10 md:mb-12 max-w-3xl font-normal opacity-90 leading-relaxed px-2 relative z-10" style="text-shadow:0 1px 4px rgba(0, 0, 0, 0.2)">Hébergeur, pour les étudiants, par des étudiants.</p><a href="#services" class="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark border-0 py-4 sm:py-5 px-8 sm:px-10 md:px-12 rounded-2xl text-base sm:text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-48 sm:min-w-56 md:min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20 mx-4 group relative z-10"><span class="text-center text-banquise-blue-dark">Découvrir nos services</span><span class="ml-2 sm:ml-3 text-lg sm:text-xl transition-transform duration-300 group-hover:translate-x-1 text-banquise-blue-dark">→</span></a></section><section id="services" class="relative z-2 py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8"><div class="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div><h2 class="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style="text-shadow:0 2px 4px rgba(0, 0, 0, 0.2)">Nos Services</h2><p class="text-banquise-gray text-lg sm:text-xl opacity-90 mb-12 sm:mb-14 md:mb-16 max-w-4xl text-center mx-auto leading-relaxed px-2" style="text-shadow:0 1px 3px rgba(0, 0, 0, 0.2)">Cliquez sur un service pour découvrir toutes ses fonctionnalités</p><div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8 w-full"><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/assets/wikijs.png" alt="📚" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Wiki</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Plateforme collaborative de documentation technique et de partage de connaissances<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/assets/Gitea_Logo.png" alt="🔧" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Gitea</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Service Git auto-hébergé lightweight et performant pour vos projets de développement<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/assets/pelican.png" alt="🐧" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Pelican</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Gestion de serveurs de jeux avec serveurs dédiés (Minecraft, CS2, Palworld, et bien d'autres)<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/path/to/ssp-image.jpg" alt="🔐" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Changement de mot de passe</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Interface sécurisée pour la gestion autonome de vos mots de passe<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/assets/opencloud_logo_white.png" alt="☁️" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">OpenCloud</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Plateforme cloud collaborative open-source pour le stockage, le partage et la synchronisation de fichiers<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/path/to/intra-image.jpg" alt="🏢" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Intranet</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Espace privé sécurisé de l'association pour centraliser les ressources internes, communications et outils de collaboration entre membres<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/path/to/panel-image.jpg" alt="🎮" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Panel Gaming</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Interface de gestion centralisée pour tous vos serveurs de jeux<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div><div class="group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95"><div class="mb-6 sm:mb-8 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-3xl sm:text-4xl shadow-lg group-hover:scale-110 transition-transform duration-300 mx-auto"><img src="/path/to/mails-image.jpg" alt="📧" class="h-10 sm:h-12 lg:h-14 w-auto relative z-10 transition-transform duration-300 group-hover:scale-130 m-10" style="filter:drop-shadow(0 0 12px rgba(168, 218, 255, 0.4))"/></div><h3 class="text-xl sm:text-2xl font-bold text-banquise-gray mb-4 sm:mb-6 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">Mails</h3><p class="text-banquise-gray/80 leading-relaxed text-center text-sm sm:text-base">Service de messagerie électronique professionnel avec interface web moderne<!-- -->.</p><div class="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div></div></div></section><section class="py-12 sm:py-16 md:py-20 relative z-2 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8"><div class="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div><h2 class="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style="text-shadow:0 2px 4px rgba(0, 0, 0, 0.2)">Notre Infrastructure</h2><p class="text-banquise-gray text-lg sm:text-xl opacity-90 mb-12 sm:mb-14 md:mb-16 max-w-4xl text-center mx-auto leading-relaxed px-2" style="text-shadow:0 1px 3px rgba(0, 0, 0, 0.2)">25+ serveurs pour répondre à vos besoins</p><div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 sm:gap-6 w-full"><div class="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group"><div class="text-3xl sm:text-4xl mb-4 sm:mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">🚀</div><h3 class="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Serveurs performants</h3><p class="text-banquise-gray/80 leading-relaxed text-sm">Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications</p></div><div class="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group"><div class="text-3xl sm:text-4xl mb-4 sm:mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">💾</div><h3 class="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Stockage sécurisé</h3><p class="text-banquise-gray/80 leading-relaxed text-sm">Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données</p></div><div class="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group"><div class="text-3xl sm:text-4xl mb-4 sm:mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">🌐</div><h3 class="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Réseau optimisé</h3><p class="text-banquise-gray/80 leading-relaxed text-sm">Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques</p></div><div class="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-6 sm:p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group"><div class="text-3xl sm:text-4xl mb-4 sm:mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-16 h-16 sm:w-20 sm:h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">🛡️</div><h3 class="text-lg sm:text-xl mb-3 sm:mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Sécurité renforcée</h3><p class="text-banquise-gray/80 leading-relaxed text-sm">Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières</p></div></div></section><section id="about" class="relative py-16 sm:py-20 md:py-24 px-4 sm:px-6 md:px-8 z-2 w-full box-border"><div class="max-w-4xl mx-auto"><div class="text-center mb-12 sm:mb-16 md:mb-20"><h2 class="text-3xl sm:text-4xl md:text-5xl text-banquise-gray font-heading font-bold tracking-tight mb-6 sm:mb-8 px-2" style="text-shadow:0 2px 4px rgba(0, 0, 0, 0.2)">À Propos de La Banquise</h2><p class="text-banquise-gray/90 leading-relaxed text-lg sm:text-xl max-w-3xl mx-auto px-2" style="text-shadow:0 1px 2px rgba(0, 0, 0, 0.1)">Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.</p></div><div class="space-y-4 sm:space-y-6"><h3 class="text-2xl sm:text-3xl md:text-4xl text-banquise-gray font-heading font-bold tracking-tight mb-8 sm:mb-12 flex items-center justify-center px-2"><span class="text-2xl sm:text-3xl mr-3">❓</span><span class="text-center">Questions Fréquentes</span></h3><div class="bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm hover:shadow-lg hover:border-banquise-blue-lightest/40"><div class="p-4 sm:p-6 md:p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-base sm:text-lg select-none hover:bg-banquise-blue-dark/10 active:bg-banquise-blue-dark/15"><span class="flex items-center flex-1 mr-4 font-heading">🎯 Notre Mission</span><span class="text-xl sm:text-2xl transition-transform duration-300 text-banquise-blue-lightest flex-shrink-0 ">▼</span></div><div class="transition-all duration-500 overflow-hidden max-h-0"><div class="text-banquise-gray/90 leading-relaxed text-sm sm:text-base"><div class="space-y-4"><p class="text-banquise-gray/90 leading-relaxed">Former les étudiants au déploiment et a la gestion d'une infra, et de maitriser des technologies entreprise grade. Cela permet de fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble !</p><p class="text-banquise-gray/90 leading-relaxed">Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe.</p><div class="flex flex-wrap gap-2 mt-4"><span class="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Collaboration</span><span class="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Innovation</span><span class="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Accessibilité</span></div></div></div></div></div><div class="bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm hover:shadow-lg hover:border-banquise-blue-lightest/40"><div class="p-4 sm:p-6 md:p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-base sm:text-lg select-none hover:bg-banquise-blue-dark/10 active:bg-banquise-blue-dark/15"><span class="flex items-center flex-1 mr-4 font-heading">🛠️ Nos Services</span><span class="text-xl sm:text-2xl transition-transform duration-300 text-banquise-blue-lightest flex-shrink-0 ">▼</span></div><div class="transition-all duration-500 overflow-hidden max-h-0"><div class="text-banquise-gray/90 leading-relaxed text-sm sm:text-base"><div class="space-y-6"><div class="grid gap-4"><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">📚</div><div><h4 class="font-semibold text-banquise-gray mb-1">Wiki</h4><p class="text-banquise-gray/80 text-sm">Documentation collaborative et guides détaillés</p></div></div><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">🔧</div><div><h4 class="font-semibold text-banquise-gray mb-1">Gitea</h4><p class="text-banquise-gray/80 text-sm">Gestion de versions Git auto-hébergée</p></div></div><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">🎮</div><div><h4 class="font-semibold text-banquise-gray mb-1">Panel de Jeux</h4><p class="text-banquise-gray/80 text-sm">Interface de gestion pour serveurs de jeux</p></div></div><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">🐧</div><div><h4 class="font-semibold text-banquise-gray mb-1">Pelican</h4><p class="text-banquise-gray/80 text-sm">Générateur de sites statiques</p></div></div><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">🏢</div><div><h4 class="font-semibold text-banquise-gray mb-1">Intranet</h4><p class="text-banquise-gray/80 text-sm">Espace privé de l'association</p></div></div><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">📧</div><div><h4 class="font-semibold text-banquise-gray mb-1">Webmail</h4><p class="text-banquise-gray/80 text-sm">Service de messagerie électronique</p></div></div><div class="flex items-start space-x-4 p-4 bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 rounded-xl backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300"><div class="w-10 h-10 rounded-lg flex items-center justify-center text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light font-bold">☁️</div><div><h4 class="font-semibold text-banquise-gray mb-1">OpenCloud</h4><p class="text-banquise-gray/80 text-sm">Plateforme cloud collaborative</p></div></div></div><p class="text-banquise-gray/90 leading-relaxed mt-4">Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.</p></div></div></div></div><div class="bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm hover:shadow-lg hover:border-banquise-blue-lightest/40"><div class="p-4 sm:p-6 md:p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-base sm:text-lg select-none hover:bg-banquise-blue-dark/10 active:bg-banquise-blue-dark/15"><span class="flex items-center flex-1 mr-4 font-heading">🤝 Rejoindre l'association</span><span class="text-xl sm:text-2xl transition-transform duration-300 text-banquise-blue-lightest flex-shrink-0 ">▼</span></div><div class="transition-all duration-500 overflow-hidden max-h-0"><div class="text-banquise-gray/90 leading-relaxed text-sm sm:text-base"><div class="space-y-6"><p class="text-banquise-gray/90 leading-relaxed">Rejoignez notre serveur Discord pour rejoindre l'asso, échanger avec nous, obtenir de l'aide et rester informé des dernières nouveautés !</p><div class="backdrop-blur-lg rounded-2xl border border-banquise-blue-lightest/30 transition-all duration-300 bg-gradient-to-r from-banquise-blue-dark/20 to-banquise-blue/10 rounded-2xl p-6"><h4 class="font-semibold text-banquise-gray mb-3 flex items-center"><span class="text-xl mr-2">💬</span>Comment rejoindre l'asso ?</h4><ul class="space-y-2 text-banquise-gray/80 text-sm mb-6"><li class="flex items-center"><span class="text-banquise-blue-light mr-2">•</span> Creez un ticket banquise</li><li class="flex items-center"><span class="text-banquise-blue-light mr-2">•</span> Donnez votre login EPITA ou expliquez votre situation</li><li class="flex items-center"><span class="text-banquise-blue-light mr-2">•</span> Un moderateur validera votre demande et vous donnera acces aux salons discord de l'asso !</li></ul><a href="https://discord.gg/bJhM97wans" class="inline-flex items-center justify-center font-bold text-white border-0 rounded-2xl transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 active:scale-95 bg-gradient-to-r from-banquise-blue to-banquise-blue-light py-3 px-6 rounded-xl"><span class="mr-3 text-lg">🚀</span>Rejoindre Discord</a></div></div></div></div></div></div></div></section><footer class="bg-banquise-blue-dark/95 backdrop-blur-sm text-white py-8 px-4 sm:px-6 md:px-8 relative z-10 border-t border-banquise-blue-lightest/10 w-full box-border"><div class="max-w-6xl mx-auto"><div class="flex flex-col md:flex-row justify-between items-center gap-6 mb-6"><div class="flex items-center gap-3"><div class="w-8 h-8 bg-gradient-to-br from-banquise-blue-light to-banquise-blue rounded-lg flex items-center justify-center"><span class="text-white font-bold text-sm">B</span></div><span class="text-banquise-blue-lightest font-semibold text-lg">La Banquise</span></div><div class="flex flex-wrap items-center gap-6 text-sm"><a href="https://wiki.la-banquise.fr" class="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200">Wiki</a><a href="https://git.la-banquise.fr" class="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200">Gitea</a><a href="https://panel.la-banquise.fr" class="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200">Panel</a><a href="https://opencloud.la-banquise.fr" class="text-banquise-gray/80 hover:text-banquise-blue-lightest transition-colors duration-200">OpenCloud</a></div><div class="flex items-center gap-4"><a href="https://discord.gg/bJhM97wans" class="w-10 h-10 bg-banquise-blue/20 hover:bg-banquise-blue/30 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110" aria-label="Discord"><span class="text-banquise-blue-lightest text-sm"><svg class="w-4 h-4 lg:w-5 lg:h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.211.375-.445.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"></path></svg></span></a><a href="mailto:contact@la-banquise.fr" class="w-10 h-10 bg-banquise-blue/20 hover:bg-banquise-blue/30 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110" aria-label="Email"><span class="text-banquise-blue-lightest text-sm">📧</span></a></div></div><div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-6 border-t border-banquise-blue-lightest/5"><p class="text-banquise-gray/60 text-xs text-center sm:text-left">© 2025 <!-- -->La Banquise<!-- -->. Hébergement communautaire pour développeurs et gamers.</p><div class="flex items-center gap-4 text-xs text-banquise-gray/60"><span>Fait avec ❤️ par Banquise</span><div class="w-1 h-1 bg-banquise-gray/40 rounded-full"></div><span>EPITA 2025</span></div></div></div></footer></div><button class="fixed bottom-6 right-6 z-50 w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center group border border-banquise-blue-lightest/30 backdrop-blur-sm opacity-0 translate-y-4 scale-95 pointer-events-none" aria-label="Retour en haut de page"><svg class="w-5 h-5 sm:w-6 sm:h-6 transition-transform duration-300 group-hover:-translate-y-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M7 11l5-5m0 0l5 5m-5-5v12"></path></svg><div class="absolute inset-0 bg-gradient-to-r from-banquise-blue-light to-banquise-blue rounded-full opacity-0 group-hover:opacity-75 transition-opacity duration-300 blur-sm"></div></button></div><script src="/_next/static/chunks/webpack-c81f7fd28659d64f.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/42dfb7eda7c856d4.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"2:I[2846,[],\"\"]\n4:I[9107,[],\"ClientPageRoot\"]\n5:I[1702,[\"145\",\"static/chunks/145-7efb8ef7bc9ac179.js\",\"931\",\"static/chunks/app/page-c46de648578fb029.js\"],\"default\",1]\n6:I[4707,[],\"\"]\n7:I[6423,[],\"\"]\n9:I[1060,[],\"\"]\na:[]\n0:[\"$\",\"$L2\",null,{\"buildId\":\"DZh67IdLwneUTXJQ7pzS6\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"__PAGE__\",{},[[\"$L3\",[\"$\",\"$L4\",null,{\"props\":{\"params\":{},\"searchParams\":{}},\"Component\":\"$5\"}],null],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/42dfb7eda7c856d4.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"fr\",\"children\":[[\"$\",\"head\",null,{}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0"])</script><script>self.__next_f.push([1,"},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L8\"],\"globalErrorComponent\":\"$9\",\"missingSlots\":\"$Wa\"}]\n"])</script><script>self.__next_f.push([1,"8:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"La Banquise - Hébergement et Communauté Tech\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Association d'hébergement et lab réseau pour tous les étudiants et associations de l'EPITA. Services Wiki, Gitea, Panel de jeux.\"}]]\n3:null\n"])</script></body></html> |