diff --git a/Idées/03_SERVICES_ET_OFFRES/REFONTE_SITE_WEB_ET_INSPIRATIONS.md b/Idées/03_SERVICES_ET_OFFRES/REFONTE_SITE_WEB_ET_INSPIRATIONS.md new file mode 100644 index 0000000..44259f5 --- /dev/null +++ b/Idées/03_SERVICES_ET_OFFRES/REFONTE_SITE_WEB_ET_INSPIRATIONS.md @@ -0,0 +1,46 @@ +# Architecture & Documentation : Refonte Globale du Site Forgium Cloud + +*Date de mise en œuvre : 09 Septembre 2026* +*Statut : Déployé en Production & Actif sur CT 100 (`forgium.fr`)* + +--- + +## 1. Objectifs de la Refonte Complète +- **Transition Vitrine → Portail Fonctionnel** : Remplacement des maquettes statiques par un écosystème e-commerce d'hébergement interconnecté avec le portail client Paymenter (`client.forgium.fr`) et l'orchestrateur Pterodactyl (`panel.forgium.fr`). +- **Modèle Tarifaire Découverte** : Alignement de l'intégralité du catalogue actif sur **0.00 € / mois** sans engagement, sans carte bancaire requise. +- **Inspirations Graphiques et UX** : + - **OuiHeberg** : Bandeau d'annonce supérieur ("TopBar"), grille d'offres claire, transparence sur les technologies et le transit réseau en France. + - **OVHcloud** : Matrice comparative exhaustive des fonctionnalités matérielles (vCPU, RAM DDR4, SSD NVMe, protection L3/L4/L7), badges de conformité et réassurance client. + - **EternalZero** : Structure "Bento Grid" ultramoderne, bande de réassurance hero ("Livraison < 15s", "Anti-DDoS Shield", "Uptime 24/7"), design sombre HSL immersif. + - **PlanetHoster** : Tableau de spécifications techniques côte-à-côte avec boutons de commande directe vers le panier client. + +--- + +## 2. Arborescence du Site Refait à Neuf +- [index.html](file:///Users/mathias/Desktop/Forgium/site-web/index.html) : + - Topbar dynamique annonçant le lancement des offres libres à 0.00 €. + - Hero section avec badges réactifs, typographie Google Fonts *Plus Jakarta Sans* et *JetBrains Mono*. + - Grille des 3 offres phares (Minecraft Starter, Bot Discord Node.js, Bot Discord Python) à 0.00 €. + - Bento Grid à 4 modules : Architecture Ryzen/NVMe, Panel Pterodactyl avec Monaco VS Code Editor, Bouclier Anti-DDoS Forgium Shield, et Orchestration automatisée en moins de 15 secondes. + - Statistiques réelles du cluster (Disponibilité 99.9%, Latence < 10ms, 0% Surallocation, 0.00 €). +- [offres.html](file:///Users/mathias/Desktop/Forgium/site-web/offres.html) : + - Catalogue complet avec cartes de tarification détaillées à 0.00 €. + - Section Trust Strip réassurante. + - Tableau comparatif technique complet opposant chaque caractéristique par formule. + - Liens de commande directs vers le portail client Paymenter. +- [infrastructure.html](file:///Users/mathias/Desktop/Forgium/site-web/infrastructure.html) : + - Présentation technique de l'isolation Docker/LXC, de la grappe de calcul AMD Ryzen 7 3700X et du stockage NVMe PCIe 4.0. + - Bannière de transparence renvoyant vers le système de surveillance Uptime Kuma en direct (`status.forgium.fr`). +- [a-propos.html](file:///Users/mathias/Desktop/Forgium/site-web/a-propos.html) : + - Manifeste technique de souveraineté numérique : philosophie "zéro intermédiaire" et contrôle de bout en bout de l'infrastructure physique. +- [style.css](file:///Users/mathias/Desktop/Forgium/site-web/style.css) : + - Feuille de style entièrement réécrite en Vanilla CSS respectant le design system Forgium (dark mode HSL, bordures cyan néon, effet de flou backdrop-filter glassmorphism, grille CSS adaptative 12 colonnes, pleine compatibilité mobile). + +--- + +## 3. Flux Utilisateur & Automatisation Intégrée +1. Le visiteur découvre l'offre sur `https://forgium.fr`. +2. Il clique sur **"Créer un Serveur Gratuit (0.00 €)"** ou **"Portail Client"**. +3. Il est redirigé vers `https://client.forgium.fr` (CT 103) où il s'enregistre. +4. À la validation du panier à 0.00 €, le compte Pterodactyl est automatiquement approvisionné. +5. Le serveur est instantanément alloué sur le conteneur Wings (CT 102) et accessible via `https://panel.forgium.fr`. diff --git a/site-web/a-propos.html b/site-web/a-propos.html index 5247aa3..d9b86f5 100644 --- a/site-web/a-propos.html +++ b/site-web/a-propos.html @@ -1,17 +1,31 @@ + À Propos | Forgium Cloud + - + + + +
+ LANCEMENT OFFICIEL + Hébergeur indépendant souverain : Nos offres sont à 0.00 € / mois ! + Rejoindre la plateforme → +
+ +
- +

L'Excellence Technique en Action

-

Pourquoi nous construisons un hébergement indépendant et haute performance.

+

Pourquoi nous construisons un hébergement indépendant, performant et transparent.

-
-

Notre Philosophie : Zéro Intermédiaire

-

Forgium Cloud est né d'un constat simple : la quasi-totalité des services d'hébergement modernes sous-traitent leurs machines à des géants du cloud, multipliant les couches de revendeurs, les coûts cachés et la surallocation de ressources.

-
-

Chez Forgium, nous croyons à l'ingénierie pure et à la maîtrise complète de notre pile technique : nos serveurs physiques nous appartiennent, nos disques durs de sauvegarde sont dédiés, et nous garantissons une isolation totale de vos projets.

-
-

Que vous soyez un créateur de bot Discord, une guilde de joueurs passionnés ou une communauté grandissante, vous bénéficiez de performances réelles et d'un interlocuteur direct dédié à votre stabilité.

+
+
+
+
💡
+
Notre Philosophie : Zéro Intermédiaire
+

+ Forgium Cloud est né d'un constat simple : la quasi-totalité des services d'hébergement modernes sous-traitent leurs machines à des géants du cloud, + multipliant les couches d'intermédiaires, les coûts cachés et la surallocation de ressources qui bride les performances des serveurs de jeux. +

+
+

+ Chez Forgium, nous croyons à l'ingénierie pure et à la maîtrise complète de notre pile technique : nos serveurs physiques nous appartiennent, + nos volumes de stockage sont dédiés, et nous garantissons une isolation absolue de chaque conteneur. +

+
+
+ +
+
+
🛡️
+
Valeurs Fondatrices
+
    +
  • Souveraineté & Données en France
  • +
  • Conforme RGPD sans pistage invasif
  • +
  • Transparence totale du statut réseau
  • +
  • Support réactif direct sans bot générique
  • +
+
+
-
-

Besoin d'un accompagnement personnalisé ?

-

Pour toute question sur nos offres ou un besoin spécifique pour votre serveur :

- Nous Contacter par Email → +
+
+ SUPPORT & CONTACT +
+ Besoin d'un accompagnement personnalisé ou d'une configuration sur-mesure pour votre communauté ? +
+
+ Nous Contacter par Email →
+ + diff --git a/site-web/index.html b/site-web/index.html index 5ffccb6..81d2529 100644 --- a/site-web/index.html +++ b/site-web/index.html @@ -4,9 +4,9 @@ - Forgium Cloud | Hébergement Haute Performance + Forgium Cloud | Hébergement Haute Performance & Serveurs Libres + content="Hébergeur cloud nouvelle génération. Serveurs Minecraft Paper ultra-rapides, bots Discord 24/7 et infrastructure AMD Ryzen sur NVMe. Offres à 0.00 € sans engagement."> - + +
+ LANCEMENT OFFICIEL + Plateforme Forgium Cloud ouverte : Tous les serveurs sont à 0.00 € / mois sans engagement ! + Déployer en 1 clic → +
+ + - +
- Hébergement Haute Performance • Infrastructure Dédiée + ⚡ Matériel Dédié AMD Ryzen 7 • Provisionnement Instantané

- L'Hébergement Pur.
- Performance Sans Compromis. + L'Hébergement Sans Limite.
+ Performance Dédiée à 0.00 €.

- Serveurs Minecraft ultra-optimisés, exécution de bots Discord 24/7 et environnements cloud propulsés par - notre infrastructure matérielle dédiée et réseau Fibre très haut débit. + Créez votre serveur Minecraft ou hébergez vos bots Discord en quelques secondes. + Déploiement automatisé sur Pterodactyl, isolation totale et bande passante très haut débit.

-
- Découvrir les Offres → - Notre Architecture + +
+
+ + Livraison en < 15 secondes +
+
+ + Protection Anti-DDoS Forgium Shield +
+
+ + Disponibilité 99.9% 24/7 +
+
+ + Stockage SSD NVMe Pur +
- + + +
99.9%
-
Disponibilité Réseau
+
Disponibilité Réseau Garantie
< 10 ms
-
Latence Fibre Faible
+
Latence Fibre Faible en France
0%
-
Surallocation (Ressources Dédiées)
+
Surallocation (RAM & CPU Dédiés)
-
SSD NVMe
-
Haute Performance Pure
+
0.00 €
+
Prix Découverte Sans Frais Cachés
- +
OFFRE DE LANCEMENT
- Accès libre à nos infrastructures : 0.00 € / mois sur l'ensemble de notre catalogue. Déploiement automatique en 15 secondes. + Inscrivez-vous sur notre portail client : commandez sans carte bancaire et votre serveur est instantanément synchronisé avec le panel Pterodactyl.
- Créer mon compte → + Accéder à l'Espace Client →
- -

Des Solutions Pensées Pour Vous

-

Hébergez vos serveurs de jeux et vos applications sur du matériel dédié non partagé.

+ +

Nos Formules Stars Immédiates

+

Hébergez vos communautés de joueurs et vos applications sur une plateforme robuste et souveraine.

-
-
-
🎮
-

Serveurs Minecraft (0.00 €)

-

Paper, Fabric, Forge installables en 1 clic avec des performances sans lag pour vos joueurs.

- Déployer sur Pterodactyl → +
+ + -
-
🤖
-

Bots Discord & Apps (0.00 €)

-

Hébergez vos bots en Python, Node.js ou Java avec redémarrage automatique 24/7.

- Déployer mon bot → + + +
+
APPLICATION • 0.00 €
+

Discord Bot Node.js

+

Environnement Node.js 20/22 pour vos bots Discord.js et micro-services temps réel.

+
+ 0.00 € + / mois (Offert) +
+
    +
  • 1 vCPU Cœur Puissant
  • +
  • 512 Mo RAM Garantie
  • +
  • 2 Go SSD NVMe PCIe 4.0
  • +
  • Console interactive WebSocket directe
  • +
  • Auto-restart en cas de crash
  • +
  • Déploiement Git automatisé
  • +
+ Commander (0.00 €)
-
-
🛡️
-

Forge Shield Protection

-

Bouclier réseau multicouche et sauvegardes automatiques quotidiennes pour chaque serveur.

- Notre architecture → + + +
+
APPLICATION • 0.00 €
+

Discord Bot Python

+

Exécutez vos scripts Discord.py, Hikari ou vos APIs FastAPI 24h/24 sans interruption.

+
+ 0.00 € + / mois (Offert) +
+
    +
  • 1 vCPU Cœur Puissant
  • +
  • 512 Mo RAM Garantie
  • +
  • 2 Go SSD NVMe PCIe 4.0
  • +
  • Python 3.11 / 3.12 préconfiguré
  • +
  • Support des fichiers requirements.txt
  • +
  • Accès SFTP et explorateur de fichiers
  • +
+ Commander (0.00 €)
- + +
+
+ +

Une Infrastructure Bâtie Pour la Vitesse

+

Découvrez les technologies exclusives qui propulsent chaque serveur hébergé.

+
+ +
+ +
+
+
+
Processeurs AMD Ryzen 7 & SSD NVMe
+

+ Contrairement aux hébergeurs traditionnels qui surchargent des serveurs vieillissants, + Forgium s'appuie sur une architecture matérielle physique haute fréquence avec stockage SSD NVMe en PCIe 4.0 pour des temps de chargement records. +

+
    +
  • 0% de surallocation mémoire
  • +
  • Débit disque > 3500 Mo/s
  • +
  • Virtualisation LXC & Docker isolée
  • +
  • Refroidissement liquide constant
  • +
+
+
+ + +
+
+
🎮
+
Panel Pterodactyl Avancé
+

+ Gestionnaire de fichiers avec Monaco Code Editor (coloration syntaxique VS Code), + console temps réel fluide et gestionnaire de sauvegardes. +

+
+ Découvrir le Panel → +
+ + +
+
+
🛡️
+
Forgium Shield Anti-DDoS
+

+ Filtrage intelligent multicouche L3, L4 et L7 spécialisé dans le trafic UDP pour serveurs de jeu et requêtes applicatives. +

+
+
+ + +
+
+
🚀
+
Orchestration & Déploiement Instantané
+

+ Dès validation de votre commande à 0.00 € sur notre portail client, l'API Forgium génère automatiquement + votre conteneur isolé sur notre cluster Wings. Aucun délai d'attente, aucune validation manuelle. +

+
    +
  • Création automatique du compte Panel
  • +
  • Ports réseaux alloués automatiquement
  • +
  • Prêt à jouer en moins de 15 secondes
  • +
  • Redémarrage et arrêt en 1 clic
  • +
+
+
+
+
+ + diff --git a/site-web/infrastructure.html b/site-web/infrastructure.html index fb72ab2..dff04d4 100644 --- a/site-web/infrastructure.html +++ b/site-web/infrastructure.html @@ -1,17 +1,31 @@ + Architecture & Infrastructure | Forgium Cloud + - + + + +
+ LANCEMENT OFFICIEL + Infrastructure souveraine haute performance : Toutes nos offres sont à 0.00 € ! + Déployer sur le cluster → +
+ +
- -

Une Architecture Pensée Pour La Résilience

-

Découvrez les fondations techniques de notre infrastructure matérielle dédiée.

+ +

Une Infrastructure Bâtie Pour la Vitesse Pure

+

Découvrez les fondations techniques de notre cluster dédié AMD Ryzen 7, nos règles d'isolation et notre réseau Fibre.

-
-
-
🛡️
-

Bouclier Forge Shield

-

Système de filtrage réseau en temps réel avec bannissement automatique des attaques et cloisonnement strict de chaque serveur.

+ +
+
+
+
+
Calcul Haute Fréquence AMD Ryzen 7
+

+ Chaque cœur processeur délivre des cadences élevées idéales pour le moteur mono-thread de Minecraft et les micro-services asynchrones en Node.js et Python. +

+
    +
  • Architecture Zen 2 ultra-stable
  • +
  • Quotas CPU garantis sans contention
  • +
  • Refroidissement basse température
  • +
+
-
-
🌐
-

Connectivité Fibre Dédiée

-

Raccordement direct très haut débit à faible latence (< 10 ms) pour une réactivité parfaite sur vos jeux multijoueurs.

+ +
+
+
💾
+
Stockage SSD NVMe PCIe 4.0
+

+ Fini les goulots d'étranglement de lecture/écriture disque. Nos disques NVMe permettent le chargement instantané de mondes Minecraft volumineux et le démarrage ultra-rapide des conteneurs. +

+
    +
  • Débits séquentiels > 3500 Mo/s
  • +
  • IOPS élevés pour charges intensives
  • +
  • Snapshots ZFS / LVM instantanés
  • +
+
-
-
💾
-

Sauvegardes Redondées

-

Vos configurations et mondes de jeu sont sauvegardés automatiquement chaque jour sur des disques de stockage indépendants.

+ +
+
+
🛡️
+
Bouclier Forgium Shield
+

+ Filtrage en temps réel avec mitigation automatisée contre les attaques par déni de service (DDoS) volumétriques et applicatives. +

+
-
-
-

Isolation Docker Stricte

-

Chaque serveur client évolue dans son propre environnement étanche avec quotas de processeur et de mémoire verrouillés.

+ +
+
+
🌐
+
Connectivité Fibre & Latence < 10ms
+

+ Raccordement direct très haut débit avec transit IP optimisé en France métropolitaine pour un ping minimal sur vos serveurs de jeux. +

+
+
+ +
+
+
⚙️
+
Isolation Conteneurs Stricte
+

+ Chaque service client est hermétiquement cloisonné au sein d'un environnement Docker géré par le démon Wings sur CT 102. +

+
-
-

Envie de surveiller notre réseau en temps réel ?

-

Nous publions l'état de santé de nos services et nos métriques de disponibilité en totale transparence.

- Accéder à la Page de Statut → + +
+
+ SURVEILLANCE EN DIRECT +
+ Consultez en toute transparence l'état de notre réseau, la latence et les sondes de disponibilité 24/7 sur notre page officielle Uptime. +
+
+ Voir la Page de Statut →
+ + diff --git a/site-web/offres.html b/site-web/offres.html index d741ae7..95d389c 100644 --- a/site-web/offres.html +++ b/site-web/offres.html @@ -1,17 +1,31 @@ + - Nos Offres | Forgium Cloud + Nos Offres d'Hébergement | Forgium Cloud + - + + + +
+ LANCEMENT OFFICIEL + Accès libre : Toutes nos formules sont à 0.00 € / mois sans engagement ! + Commander maintenant → +
+ +
- -

Des Formules Haute Performance à 0.00 €

-

Infrastructure matérielle souveraine sur AMD Ryzen 7 & SSD NVMe. Provisionnement automatisé 24/7 en quelques secondes.

+ +

Des Solutions Pensées Pour la Performance

+

Ressources réelles garanties sans surallocation. Livraison automatisée immédiate sur le cluster Forgium.

@@ -47,10 +63,10 @@
OFFRE DE LANCEMENT
- Toutes nos formules sont actuellement à 0.00 € / mois sans engagement. Créez votre compte, commandez et votre serveur est instantanément déployé sur notre cluster ! + L'ensemble des services ci-dessous est actuellement à 0.00 € / mois. Créez votre compte client et lancez votre premier serveur sans renseigner de coordonnées bancaires !
- Créer mon compte → + Créer mon compte client → @@ -61,37 +77,60 @@
🛡️ - Anti-DDoS Game Inclus + Protection Anti-DDoS Forgium Shield
🇫🇷 - Hébergé 100% en France + Infrastructure Hébergée en France
⚙️ - Panel Pterodactyl & Monaco Editor + Monaco Code Editor Intégré
+
- +
GRATUIT 0.00 €
-

Bot Discord & Apps

-

Hébergez vos bots en Python, Node.js ou Java 24/7 avec console interactive et auto-restart.

+

Bot Discord Node.js

+

Idéal pour héberger vos bots Discord.js 24/7 avec logs en direct et redémarrage automatique.

0.00 € / mois (Offre Gratuite)
    -
  • 1 vCPU AMD Ryzen 7 Dédié
  • -
  • 512 Mo à 1 Go RAM Garantie
  • -
  • 2 Go à 5 Go SSD NVMe PCIe 4.0
  • -
  • Console Interactive & SFTP Dédié
  • -
  • Redémarrage Automatique 24/7
  • -
  • Git Pull Automatique
  • +
  • 1 vCPU AMD Ryzen 7 3700X
  • +
  • 512 Mo RAM Garantie
  • +
  • 2 Go SSD NVMe PCIe 4.0
  • +
  • Console Interactive WebSocket & SFTP
  • +
  • Redémarrage Automatique en cas de crash
  • +
  • Intégration Git Pull Automatique
  • +
+ Déployer Gratuitement → +
+ + +
+
+
GRATUIT 0.00 €
+

Bot Discord Python

+

Hébergement optimisé Python 3.11/3.12 pour bots discord.py, disnake ou micro-APIs légères.

+
+ 0.00 € + / mois (Offre Gratuite) +
+
+
    +
  • 1 vCPU AMD Ryzen 7 3700X
  • +
  • 512 Mo RAM Dédiée
  • +
  • 2 Go SSD NVMe PCIe 4.0
  • +
  • Fichiers requirements.txt installés au boot
  • +
  • Console Interactive & Gestionnaire de fichiers
  • +
  • Sauvegardes incluses
Déployer Gratuitement →
@@ -101,7 +140,7 @@
POPULAIRE • 0.00 €

Minecraft Paper Starter

-

Parfait pour jouer entre amis ou pour un serveur communautaire Paper fluide et optimisé.

+

Le choix parfait pour jouer entre amis ou pour un serveur communautaire Paper fluide et sans lag.

0.00 € / mois (Accès Libre) @@ -118,12 +157,12 @@ Lancer mon Serveur Gratuit →
- +
DÉCOUVERTE 0.00 €

Minecraft Community

-

Pour projets associatifs, serveurs Discord et équipes de test en phase de développement.

+

Pour projets associatifs, serveurs Discord et équipes de test nécessitant plus de puissance.

0.00 € / mois (Sponsorisé) @@ -140,15 +179,15 @@ Commander (0.00 €)
- +
-
BIENTÔT DISPONIBLE
+
PROCHAINEMENT

VPS Linux KVM

-

Serveur virtuel autonome avec accès root complet SSH sous Debian, Ubuntu ou Alpine.

+

Serveur virtuel autonome avec accès root complet SSH sous Debian 12 ou Ubuntu 24.04.

- 6.99 € - / mois + 0.00 € + / phase beta
- +
-
EXPANSION
+
PROCHAINEMENT

Stockage Cloud Dédié

Espace de sauvegarde privée haute capacité pour vos données, mondes de jeux et archives.

- 3.99 € - / mois + 0.00 € + / phase beta
    -
  • 250 Go à 1 To de Stockage Dédié
  • +
  • 250 Go de Stockage Dédié
  • Accès SFTP / WebDAV Sécurisé
  • Synchronisation Multi-Appareils
  • Sauvegardes Redondées 3-2-1
  • @@ -269,6 +308,7 @@
+ + diff --git a/site-web/style.css b/site-web/style.css index af1f8ae..2eeeaf0 100644 --- a/site-web/style.css +++ b/site-web/style.css @@ -1,21 +1,27 @@ :root { - --bg-base: #060911; - --bg-surface: #0b1120; - --bg-card: rgba(15, 23, 42, 0.7); - --border: rgba(56, 189, 248, 0.15); - --border-hover: rgba(56, 189, 248, 0.4); + --bg-base: #030712; + --bg-surface: #0b1329; + --bg-card: rgba(15, 23, 42, 0.75); + --bg-card-hover: rgba(30, 41, 59, 0.85); + --border: rgba(56, 189, 248, 0.16); + --border-hover: rgba(56, 189, 248, 0.45); --accent-cyan: #38bdf8; - --accent-blue: #2563eb; + --accent-blue: #3b82f6; + --accent-purple: #8b5cf6; + --accent-green: #10b981; --text-main: #f8fafc; --text-muted: #94a3b8; - --glow: 0 0 30px rgba(56, 189, 248, 0.2); + --glow-cyan: 0 0 35px rgba(56, 189, 248, 0.25); + --glow-blue: 0 0 40px rgba(59, 130, 246, 0.25); + --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; + --font-mono: 'JetBrains Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; + font-family: var(--font-main); } body { @@ -24,28 +30,65 @@ body { overflow-x: hidden; line-height: 1.6; background-image: - radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.12) 0%, transparent 40%), - radial-gradient(circle at 85% 25%, rgba(56, 189, 248, 0.08) 0%, transparent 45%), + radial-gradient(circle at 10% 15%, rgba(59, 130, 246, 0.12) 0%, transparent 40%), + radial-gradient(circle at 88% 20%, rgba(56, 189, 248, 0.1) 0%, transparent 45%), + radial-gradient(circle at 50% 60%, rgba(139, 92, 246, 0.06) 0%, transparent 50%), linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px); - background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; + background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px; } .container { width: 100%; - max-width: 1200px; + max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; } -/* NAVBAR */ +/* TOP ANNOUNCEMENT BAR (Style OVHcloud / OuiHeberg) */ +.topbar { + background: linear-gradient(90deg, #1e1b4b 0%, #0f172a 50%, #082f49 100%); + border-bottom: 1px solid rgba(56, 189, 248, 0.2); + padding: 0.5rem 1rem; + font-size: 0.82rem; + text-align: center; + color: #cbd5e1; + display: flex; + align-items: center; + justify-content: center; + gap: 0.8rem; + flex-wrap: wrap; +} + +.topbar-badge { + background: #10b981; + color: #fff; + font-size: 0.7rem; + font-weight: 800; + padding: 0.15rem 0.55rem; + border-radius: 9999px; + letter-spacing: 0.5px; + text-transform: uppercase; +} + +.topbar a { + color: var(--accent-cyan); + font-weight: 700; + text-decoration: none; +} + +.topbar a:hover { + text-decoration: underline; +} + +/* NAVBAR ENTERPRISE */ .navbar-wrapper { position: sticky; top: 0; z-index: 100; - background: rgba(6, 9, 17, 0.85); - backdrop-filter: blur(16px); - border-bottom: 1px solid rgba(255, 255, 255, 0.06); + background: rgba(3, 7, 18, 0.85); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .navbar { @@ -58,31 +101,20 @@ body { .logo { display: flex; align-items: center; - gap: 0.6rem; - font-size: 1.4rem; + gap: 0.65rem; + font-size: 1.45rem; font-weight: 800; letter-spacing: -0.5px; text-decoration: none; color: var(--text-main); } -.logo-icon { - display: flex; - align-items: center; - justify-content: center; - width: 38px; - height: 38px; - border-radius: 10px; - background: rgba(56, 189, 248, 0.08); - border: 1px solid var(--border); -} - .logo-tag { font-size: 0.65rem; - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-mono); padding: 0.2rem 0.5rem; border-radius: 6px; - background: rgba(56, 189, 248, 0.1); + background: rgba(56, 189, 248, 0.12); border: 1px solid var(--border); color: var(--accent-cyan); font-weight: 700; @@ -91,7 +123,7 @@ body { .nav-links { display: flex; align-items: center; - gap: 2rem; + gap: 1.8rem; } .nav-links a { @@ -102,7 +134,7 @@ body { transition: color 0.2s; } -.nav-links a:hover { +.nav-links a:hover, .nav-links a.active { color: var(--accent-cyan); } @@ -110,12 +142,12 @@ body { display: inline-flex; align-items: center; gap: 0.5rem; - padding: 0.35rem 0.9rem; + padding: 0.35rem 0.85rem; border-radius: 9999px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); color: #34d399 !important; - font-size: 0.85rem !important; + font-size: 0.82rem !important; } .pulse-dot { @@ -133,102 +165,111 @@ body { 100% { transform: scale(0.95); opacity: 0.8; } } -/* BOUTONS */ +.nav-actions { + display: flex; + align-items: center; + gap: 0.8rem; +} + +/* BUTTONS */ .btn { display: inline-flex; align-items: center; - gap: 0.5rem; + gap: 0.55rem; border-radius: 10px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + font-size: 0.95rem; + border: none; } .btn-sm { padding: 0.5rem 1.1rem; - font-size: 0.88rem; + font-size: 0.85rem; } .btn-lg { - padding: 0.9rem 2rem; - font-size: 1rem; + padding: 0.95rem 2rem; + font-size: 1.05rem; + border-radius: 12px; } .btn-block { width: 100%; justify-content: center; - padding: 0.85rem; - font-size: 0.95rem; + padding: 0.85rem 1.5rem; } .btn-primary { - background: linear-gradient(135deg, var(--accent-blue), #1d4ed8); - color: #ffffff; - box-shadow: 0 4px 18px rgba(37, 99, 235, 0.35); - border: 1px solid rgba(255, 255, 255, 0.15); + background: linear-gradient(135deg, #2563eb 0%, #0284c7 100%); + color: #fff; + box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35); } .btn-primary:hover { transform: translateY(-2px); - box-shadow: 0 6px 26px rgba(37, 99, 235, 0.55); + box-shadow: 0 6px 28px rgba(37, 99, 235, 0.55); } .btn-outline { - background: rgba(255, 255, 255, 0.03); - color: var(--text-main); + background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); + color: var(--text-main); } .btn-outline:hover { + background: rgba(56, 189, 248, 0.1); border-color: var(--accent-cyan); color: var(--accent-cyan); transform: translateY(-2px); } .btn-glass { - background: var(--bg-card); + background: rgba(15, 23, 42, 0.6); + border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-main); - border: 1px solid var(--border); backdrop-filter: blur(12px); } .btn-glass:hover { - border-color: var(--accent-cyan); - box-shadow: var(--glow); + background: rgba(30, 41, 59, 0.8); + border-color: var(--border-hover); transform: translateY(-2px); } -/* HERO */ +/* HERO SECTION (Style EternalZero / OuiHeberg) */ .hero { - padding: 5.5rem 1.5rem 4rem; + padding: 5rem 0 3.5rem; text-align: center; + position: relative; } .badge-flag { display: inline-flex; align-items: center; gap: 0.5rem; - font-size: 0.8rem; - font-weight: 600; - color: var(--accent-cyan); - background: rgba(56, 189, 248, 0.08); padding: 0.4rem 1.1rem; border-radius: 9999px; - border: 1px solid rgba(56, 189, 248, 0.25); - margin-bottom: 1.8rem; + background: rgba(56, 189, 248, 0.08); + border: 1px solid var(--border); + font-size: 0.85rem; + font-weight: 600; + color: var(--accent-cyan); + margin-bottom: 2rem; } -h1 { - font-size: 4.2rem; +.hero h1 { + font-size: 3.8rem; font-weight: 800; - line-height: 1.1; - letter-spacing: -2px; - margin-bottom: 1.6rem; + line-height: 1.12; + letter-spacing: -1.5px; + margin-bottom: 1.5rem; } .text-gradient { - background: linear-gradient(135deg, var(--accent-cyan) 0%, #60a5fa 60%, #93c5fd 100%); + background: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -236,9 +277,36 @@ h1 { .hero-desc { font-size: 1.25rem; color: var(--text-muted); - max-width: 760px; - margin: 0 auto 2.8rem; - line-height: 1.7; + max-width: 720px; + margin: 0 auto 2.5rem; + font-weight: 400; +} + +.hero-features-strip { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1.5rem; + margin-bottom: 2.8rem; +} + +.hero-feature-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.92rem; + font-weight: 600; + color: #e2e8f0; + background: rgba(15, 23, 42, 0.6); + padding: 0.45rem 1rem; + border-radius: 9999px; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.hero-feature-item svg { + width: 18px; + height: 18px; + color: var(--accent-cyan); } .hero-cta { @@ -253,14 +321,14 @@ h1 { .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + padding: 2rem 2.5rem; background: var(--bg-card); border: 1px solid var(--border); - border-radius: 18px; - padding: 1.8rem; - max-width: 960px; - margin: 0 auto; + border-radius: 20px; backdrop-filter: blur(16px); - box-shadow: 0 10px 30px rgba(0,0,0,0.4); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); + margin-bottom: 4rem; } .stat-item { @@ -268,117 +336,115 @@ h1 { } .stat-val { - font-family: 'JetBrains Mono', monospace; - font-size: 1.8rem; - font-weight: 700; - color: var(--text-main); - letter-spacing: -0.5px; + font-family: var(--font-mono); + font-size: 2.2rem; + font-weight: 800; + color: var(--accent-cyan); margin-bottom: 0.3rem; } .stat-label { - font-size: 0.82rem; + font-size: 0.88rem; color: var(--text-muted); font-weight: 500; } -.stat-divider { - display: none; -} - /* SECTIONS */ .section { - padding: 6rem 1.5rem; + padding: 5rem 0; } .section-head { text-align: center; - max-width: 700px; - margin: 0 auto 3.5rem; + margin-bottom: 3.5rem; } .section-tag { + font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; - letter-spacing: 2px; color: var(--accent-cyan); + letter-spacing: 1.5px; + text-transform: uppercase; margin-bottom: 0.8rem; } .section-head h2 { font-size: 2.5rem; font-weight: 800; - letter-spacing: -1px; + letter-spacing: -0.8px; margin-bottom: 0.8rem; } .section-head p { + font-size: 1.1rem; color: var(--text-muted); - font-size: 1.05rem; + max-width: 620px; + margin: 0 auto; } -/* PRICING GRID */ +/* PRICING GRID (Style PlanetHoster / OuiHeberg) */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; - align-items: stretch; + margin-bottom: 4rem; } .pricing-card { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 20px; - padding: 2.2rem; + border-radius: 22px; + padding: 2.4rem; + position: relative; + backdrop-filter: blur(16px); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; - justify-content: space-between; - backdrop-filter: blur(14px); - transition: all 0.3s; - position: relative; } .pricing-card:hover { border-color: var(--border-hover); - transform: translateY(-4px); - box-shadow: 0 16px 40px rgba(0,0,0,0.5); + transform: translateY(-5px); + box-shadow: var(--glow-cyan); } .pricing-card.featured { - border-color: rgba(56, 189, 248, 0.4); - background: linear-gradient(180deg, rgba(20, 32, 58, 0.85) 0%, rgba(15, 23, 42, 0.7) 100%); - box-shadow: 0 0 35px rgba(56, 189, 248, 0.15); + background: linear-gradient(180deg, rgba(30, 58, 138, 0.4) 0%, rgba(15, 23, 42, 0.85) 100%); + border: 2px solid var(--accent-cyan); + box-shadow: 0 0 35px rgba(56, 189, 248, 0.2); } .card-badge { display: inline-block; - font-size: 0.7rem; - font-family: 'JetBrains Mono', monospace; + font-size: 0.72rem; + font-family: var(--font-mono); font-weight: 700; - padding: 0.25rem 0.6rem; + padding: 0.25rem 0.65rem; border-radius: 6px; - background: rgba(255, 255, 255, 0.06); + background: rgba(255, 255, 255, 0.08); color: var(--text-muted); margin-bottom: 1.2rem; + width: fit-content; } .card-badge.highlight { - background: rgba(56, 189, 248, 0.15); + background: rgba(56, 189, 248, 0.18); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); } .pricing-card h3 { - font-size: 1.5rem; + font-size: 1.55rem; font-weight: 800; margin-bottom: 0.5rem; } .card-desc { - font-size: 0.9rem; + font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.8rem; - min-height: 45px; + min-height: 48px; } .price { @@ -391,15 +457,15 @@ h1 { } .price .amount { - font-family: 'JetBrains Mono', monospace; - font-size: 2.8rem; + font-family: var(--font-mono); + font-size: 3rem; font-weight: 800; letter-spacing: -1px; } .price .period { color: var(--text-muted); - font-size: 0.95rem; + font-size: 0.92rem; } .features-list { @@ -407,7 +473,8 @@ h1 { margin-bottom: 2.2rem; display: flex; flex-direction: column; - gap: 0.8rem; + gap: 0.85rem; + flex-grow: 1; } .features-list li { @@ -415,327 +482,83 @@ h1 { color: var(--text-main); display: flex; align-items: center; - gap: 0.6rem; + gap: 0.65rem; } .features-list li span { color: var(--accent-cyan); - font-weight: 700; + font-weight: 800; } -/* FEATURES BOXES */ -.features-grid { +/* BENTO GRID ENTERPRISE (Style EternalZero / OVHcloud) */ +.bento-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 1.6rem; + grid-template-columns: repeat(12, 1fr); + gap: 1.5rem; + margin-bottom: 4rem; } -.feature-box { +.bento-card { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 18px; - padding: 2rem; - backdrop-filter: blur(14px); - transition: all 0.3s; -} - -.feature-box:hover { - border-color: var(--border-hover); - transform: translateY(-3px); -} - -.f-icon { - font-size: 2rem; - margin-bottom: 1rem; -} - -.feature-box h4 { - font-size: 1.2rem; - font-weight: 700; - margin-bottom: 0.6rem; -} - -.feature-box p { - font-size: 0.9rem; - color: var(--text-muted); - line-height: 1.6; -} - -/* FOOTER */ -.footer-wrapper { - background: #04070d; - border-top: 1px solid rgba(255, 255, 255, 0.06); - padding: 4.5rem 0 2.5rem; - margin-top: 4rem; -} - -.footer-grid { - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 3rem; - margin-bottom: 3.5rem; -} - -.footer-brand p { - font-size: 0.9rem; - color: var(--text-muted); - max-width: 320px; - margin-top: 1rem; - line-height: 1.6; -} - -.footer-col h5 { - font-size: 0.95rem; - font-weight: 700; - color: var(--text-main); - margin-bottom: 1.2rem; - letter-spacing: 0.5px; -} - -.footer-col a, .footer-col p { - display: block; - color: var(--text-muted); - text-decoration: none; - font-size: 0.88rem; - margin-bottom: 0.6rem; - transition: color 0.2s; -} - -.footer-col a:hover { - color: var(--accent-cyan); -} - -.footer-col code { - background: rgba(56, 189, 248, 0.1); - color: var(--accent-cyan); - padding: 0.15rem 0.4rem; - border-radius: 4px; - font-family: 'JetBrains Mono', monospace; - font-size: 0.8rem; -} - -.footer-bottom { - padding-top: 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.04); - text-align: center; - color: var(--text-muted); - font-size: 0.85rem; -} - -/* RESPONSIVE MOBILE ET NAVIGATION TACTILE */ -@media (max-width: 900px) { - .navbar-wrapper { - position: static; /* Ne colle plus en haut sur mobile, libère 100% de l'écran lors du scroll */ - } - - .navbar { - height: auto; - padding: 1rem 0; - flex-direction: column; - gap: 1rem; - } - - .nav-links { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.6rem; - width: 100%; - } - - .nav-links a { - background: rgba(255, 255, 255, 0.05); - border: 1px solid var(--border); - padding: 0.45rem 0.9rem; - border-radius: 8px; - font-size: 0.85rem; - text-align: center; - } - - .nav-links a.active { - background: rgba(56, 189, 248, 0.15); - border-color: var(--accent-cyan); - } - - .nav-status { - width: 100%; - justify-content: center; - } - - .nav-actions { - width: 100%; - } - - .nav-actions .btn { - width: 100%; - justify-content: center; - } - - h1 { - font-size: 2.5rem; - letter-spacing: -1px; - } - - .hero { - padding: 3rem 1rem 2rem; - } - - .hero-desc { - font-size: 1.05rem; - margin-bottom: 2rem; - } - - .hero-cta { - flex-direction: column; - gap: 0.8rem; - } - - .hero-cta .btn { - width: 100%; - justify-content: center; - } - - .stats-bar { - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - padding: 1.2rem; - } - - .stat-val { - font-size: 1.4rem; - } - - .section { - padding: 3.5rem 1rem; - } - - .section-head h2 { - font-size: 1.9rem; - } - - .pricing-grid { - grid-template-columns: 1fr; - } - - .footer-grid { - grid-template-columns: 1fr; - gap: 2rem; - } -} - - -/* NAV ACTIVE */ -.nav-links a.active { - color: var(--accent-cyan); -} - -/* QUICK CARDS (ACCUEIL) */ -.quick-cards { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.8rem; -} - -.quick-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 20px; - padding: 2.2rem; - backdrop-filter: blur(14px); - transition: all 0.3s; + border-radius: 22px; + padding: 2.5rem; + backdrop-filter: blur(16px); + transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; } -.quick-card:hover { +.bento-card:hover { border-color: var(--border-hover); transform: translateY(-4px); - box-shadow: 0 16px 40px rgba(0,0,0,0.5); } -.quick-icon { +.bento-card.col-8 { grid-column: span 8; } +.bento-card.col-4 { grid-column: span 4; } +.bento-card.col-6 { grid-column: span 6; } +.bento-card.col-12 { grid-column: span 12; } + +.bento-icon { font-size: 2.2rem; margin-bottom: 1.2rem; } -.quick-card h3 { - font-size: 1.35rem; - font-weight: 700; - margin-bottom: 0.8rem; +.bento-title { + font-size: 1.45rem; + font-weight: 800; + margin-bottom: 0.6rem; } -.quick-card p { +.bento-sub { font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; - margin-bottom: 1.8rem; } -.quick-link { - color: var(--accent-cyan); - text-decoration: none; - font-weight: 600; - font-size: 0.95rem; - transition: all 0.2s; +.bento-check-list { + list-style: none; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 0.8rem; + margin-top: 1.5rem; } -.quick-link:hover { - text-decoration: underline; - letter-spacing: 0.5px; +.bento-check-list li { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.9rem; + color: #e2e8f0; } -/* INFRA CALLOUT */ -.infra-callout { - margin-top: 5rem; - background: linear-gradient(180deg, rgba(20, 32, 58, 0.85) 0%, rgba(15, 23, 42, 0.7) 100%); - border: 1px solid var(--border-hover); - border-radius: 24px; - padding: 3.5rem 2rem; - text-align: center; - box-shadow: var(--glow); -} - -.infra-callout h3 { - font-size: 1.8rem; - font-weight: 800; - margin-bottom: 0.8rem; -} - -.infra-callout p { - color: var(--text-muted); - max-width: 600px; - margin: 0 auto 2rem; - font-size: 1.05rem; -} - -/* ABOUT CARD */ -.about-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 22px; - padding: 3rem; - max-width: 860px; - margin: 0 auto 3rem; - backdrop-filter: blur(16px); - font-size: 1.05rem; - line-height: 1.8; - color: #cbd5e1; -} - -.about-card h3 { - font-size: 1.6rem; - color: var(--text-main); - margin-bottom: 1.5rem; +.bento-check-list li span { + color: var(--accent-green); font-weight: 800; } -.contact-box { - text-align: center; - padding: 2rem; -} - -/* TRUST BADGES & METRICS (Inspiré OuiHeberg / OVHcloud) */ +/* TRUST STRIP */ .trust-strip { display: flex; flex-wrap: wrap; @@ -746,7 +569,7 @@ h1 { margin: 2rem auto 3.5rem; background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 16px; + border-radius: 18px; backdrop-filter: blur(12px); } @@ -771,24 +594,24 @@ h1 { color: var(--accent-cyan); } -/* FREE BANNER NOTIFICATION */ +/* FREE BANNER */ .free-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; - background: linear-gradient(90deg, rgba(37, 99, 235, 0.2) 0%, rgba(56, 189, 248, 0.15) 100%); + background: linear-gradient(90deg, rgba(37, 99, 235, 0.25) 0%, rgba(56, 189, 248, 0.18) 100%); border: 1px solid rgba(56, 189, 248, 0.35); - border-radius: 16px; - padding: 1.2rem 1.8rem; - margin-bottom: 2.5rem; + border-radius: 18px; + padding: 1.25rem 2rem; + margin-bottom: 3rem; } .free-banner-content { display: flex; align-items: center; - gap: 1rem; + gap: 1.2rem; } .free-badge { @@ -796,7 +619,7 @@ h1 { color: #fff; font-size: 0.75rem; font-weight: 800; - padding: 0.3rem 0.7rem; + padding: 0.3rem 0.75rem; border-radius: 9999px; letter-spacing: 0.5px; text-transform: uppercase; @@ -811,7 +634,7 @@ h1 { color: var(--accent-cyan); } -/* COMPARISON TABLE (Inspiré PlanetHoster & OVHcloud) */ +/* TABLEAU COMPARATIF */ .comparison-section { margin: 4.5rem 0; } @@ -832,7 +655,7 @@ h1 { } .compare-table th, .compare-table td { - padding: 1.1rem 1.5rem; + padding: 1.2rem 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } @@ -857,9 +680,96 @@ h1 { } .val-highlight { - font-family: 'JetBrains Mono', monospace; + font-family: var(--font-mono); font-weight: 700; color: var(--accent-cyan); } +/* FOOTER ENTERPRISE */ +.footer-wrapper { + background: #02040a; + border-top: 1px solid rgba(255, 255, 255, 0.06); + padding: 5rem 0 2.5rem; + margin-top: 5rem; +} +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + margin-bottom: 3.5rem; +} + +.footer-brand p { + font-size: 0.92rem; + color: var(--text-muted); + max-width: 320px; + margin-top: 1.2rem; + line-height: 1.6; +} + +.footer-col h5 { + font-size: 0.95rem; + font-weight: 700; + color: var(--text-main); + margin-bottom: 1.3rem; + letter-spacing: 0.5px; +} + +.footer-col a, .footer-col p { + display: block; + color: var(--text-muted); + text-decoration: none; + font-size: 0.9rem; + margin-bottom: 0.7rem; + transition: color 0.2s; +} + +.footer-col a:hover { + color: var(--accent-cyan); +} + +.footer-bottom { + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.04); + display: flex; + justify-content: space-between; + align-items: center; + color: var(--text-muted); + font-size: 0.85rem; + flex-wrap: wrap; + gap: 1rem; +} + +/* RESPONSIVE MOBILE */ +@media (max-width: 1024px) { + .bento-card.col-8, .bento-card.col-4, .bento-card.col-6 { + grid-column: span 12; + } + .stats-bar { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .navbar { + height: auto; + padding: 1rem 0; + flex-direction: column; + gap: 1rem; + } + .nav-links { + flex-wrap: wrap; + justify-content: center; + gap: 0.8rem; + } + .hero h1 { + font-size: 2.6rem; + } + .stats-bar { + grid-template-columns: 1fr; + } + .footer-grid { + grid-template-columns: 1fr; + } +}