/* Reset pour Elementor */
.elementor-widget-html {
margin: 0 !important;
padding: 0 !important;
}
/* Wrapper pleine largeur */
.fhc-realisations-wrapper {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw !important;
margin-right: -50vw !important;
overflow-x: hidden;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Section principale */
.fhc-realisations-section {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
padding: 100px 20px;
position: relative;
}
/* Header */
.fhc-realisations-header {
text-align: center;
max-width: 900px;
margin: 0 auto 80px;
}
.fhc-realisations-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
color: #072AC8;
border-radius: 50px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 20px !important;
border: 1px solid rgba(7, 42, 200, 0.2);
}
.fhc-realisations-title {
font-size: 48px;
font-weight: 800;
background: linear-gradient(135deg, #072AC8 0%, #0033cc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px !important;
letter-spacing: -0.02em;
line-height: 1.2;
}
.fhc-realisations-subtitle {
font-size: 18px;
color: #64748b;
line-height: 1.7;
margin: 0 !important;
}
/* Grid des projets */
.fhc-projects-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 40px;
padding: 0 40px;
}
/* Carte projet */
.fhc-project-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #e2e8f0;
position: relative;
}
.fhc-project-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #072AC8 0%, #0033cc 100%);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.fhc-project-card:hover::before {
transform: scaleX(1);
}
.fhc-project-card:hover {
transform: translateY(-12px);
box-shadow: 0 16px 48px rgba(7, 42, 200, 0.15);
border-color: #072AC8;
}
/* Image du projet */
.fhc-project-image {
width: 100%;
height: 240px;
background: linear-gradient(135deg, #072AC8 0%, #0033cc 100%);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.fhc-project-image::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.fhc-project-icon {
font-size: 64px;
position: relative;
z-index: 1;
}
/* Contenu */
.fhc-project-content {
padding: 32px !important;
}
.fhc-project-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
margin-bottom: 16px !important;
letter-spacing: 0.3px;
}
.fhc-project-status.en-ligne {
background: #dcfce7;
color: #166534;
border: 1px solid #86efac;
}
.fhc-project-status.deploiement {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}
.fhc-project-status.finalisation {
background: #dbeafe;
color: #1e40af;
border: 1px solid #93c5fd;
}
.fhc-project-status.maintenance {
background: #e0e7ff;
color: #4338ca;
border: 1px solid #c7d2fe;
}
.fhc-project-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.fhc-project-name {
font-size: 24px;
font-weight: 800;
color: #1e293b;
margin-bottom: 12px !important;
line-height: 1.3;
}
.fhc-project-description {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin-bottom: 20px !important;
}
.fhc-project-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #072AC8;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: all 0.3s ease;
padding: 10px 20px;
border-radius: 50px;
border: 2px solid #072AC8;
background: transparent;
}
.fhc-project-link:hover {
background: linear-gradient(135deg, #072AC8 0%, #0033cc 100%);
color: white;
transform: translateX(4px);
}
.fhc-project-arrow {
transition: transform 0.3s ease;
}
.fhc-project-link:hover .fhc-project-arrow {
transform: translateX(4px);
}
/* CTA Section */
.fhc-cta-section {
background: linear-gradient(135deg, #072AC8 0%, #0033cc 100%);
padding: 80px 40px;
margin-top: 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.fhc-cta-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 40px 40px;
}
.fhc-cta-content {
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.fhc-cta-title {
font-size: 36px;
font-weight: 800;
color: white;
margin-bottom: 20px !important;
line-height: 1.3;
}
.fhc-cta-text {
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px !important;
line-height: 1.6;
}
.fhc-cta-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 40px !important;
background: white;
color: #072AC8;
text-decoration: none;
font-weight: 700;
font-size: 16px;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.fhc-cta-button:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.fhc-realisations-section {
padding: 60px 20px;
}
.fhc-realisations-header {
margin-bottom: 50px;
}
.fhc-realisations-title {
font-size: 36px;
}
.fhc-projects-grid {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 20px;
}
.fhc-project-content {
padding: 24px !important;
}
.fhc-cta-section {
padding: 60px 20px;
margin-top: 50px;
}
.fhc-cta-title {
font-size: 28px;
}
.fhc-cta-text {
font-size: 16px;
}
}
@media (max-width: 480px) {
.fhc-realisations-title {
font-size: 28px;
}
.fhc-project-name {
font-size: 20px;
}
.fhc-project-image {
height: 200px;
}
}
PORTFOLIO
Nos Réalisations Récentes
Découvrez les projets web que nous avons développés pour accompagner nos clients dans leur transformation digitale.
🌾
Prêt au déploiement
Bignon du BÉNIN
Site web finalisé et prêt à être déployé en ligne. Plateforme moderne pour la promotion des produits agricoles béninois.
Voir le projet →🏢
En ligne
FHC GROUPE SARL
Site institutionnel de FHC Groupe, présentant nos services de conseil, formation et développement web.
Visiter le site →🎓
En activité
StagesBENIN
Plateforme de mise en relation entre étudiants et entreprises pour faciliter l'accès aux stages professionnels au Bénin.
Visiter le site →📚
En maintenance
École des Arcanes Majeurs
Site de formation en kabbale. Actuellement en maintenance pour l'ajout de nouvelles fonctionnalités pédagogiques.
Voir le projet →🏠
En maintenance
Africa Location
Plateforme de location immobilière en Afrique. Site actuellement en évolution pour améliorer l'expérience utilisateur.
Visiter le site →💼
90% finalisé
ÉVOLUTION FOREVER
Site corporate en phase finale de développement. Design moderne et fonctionnalités avancées pour une entreprise en pleine croissance.
Voir l'aperçu →💻
En finalisation
BÉNIN EMPLOI+
Plateforme d'emploi dédiée au marché béninois. Mise en relation innovante entre chercheurs d'emploi et recruteurs.
Voir l'aperçu →🎯
Prêt au déploiement
FHC School
Plateforme éducative complète finalisée et prête à être mise en ligne sur un domaine premium. Solution e-learning moderne.
Voir le projet →Prêt à Lancer Votre Projet Web ?
Rejoignez nos clients satisfaits et donnez vie à votre vision digitale avec FHC Groupe.
Démarrer un projet ✨