Ceixpa - Construction de Salle - Mairie de Bingerville
:root {
--primary-red: #E30613;
--dark-red: #C10510;
--light-red: #FF7B7B;
--white: #FFFFFF;
--light-gray: #F5F5F5;
--medium-gray: #E0E0E0;
--dark-gray: #333333;
--text-color: #222222;
--accent-gold: #FFD700;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: var(--white);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
}
/* Header stylisé */
header {
background: linear-gradient(135deg, var(--primary-red) 0%, var(--dark-red) 100%);
color: var(--white);
padding: 1.5rem 0;
position: relative;
overflow: hidden;
}
header::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
transform: rotate(45deg);
z-index: 1;
}
header::after {
content: '';
position: absolute;
bottom: -30px;
left: -30px;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
z-index: 1;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
color: var(--white);
}
.logo span {
background: var(--white);
color: var(--primary-red);
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 1.8rem;
}
nav ul li a {
color: var(--white);
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
position: relative;
padding: 5px 0;
}
nav ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--white);
transition: width 0.3s;
}
nav ul li a:hover::after {
width: 100%;
}
/* Hero section */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('') no-repeat center center/cover;
height: 90vh;
display: flex;
align-items: center;
color: var(--white);
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
line-height: 1.2;
font-weight: 800;
}
.hero p {
font-size: 1.3rem;
margin-bottom: 2.5rem;
max-width: 600px;
}
.btn {
display: inline-block;
background: var(--primary-red);
color: var(--white);
padding: 1rem 2.2rem;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s;
border: 2px solid var(--primary-red);
box-shadow: 0 5px 15px rgba(227, 6, 19, 0.3);
}
.btn:hover {
background: transparent;
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(227, 6, 19, 0.4);
}
/* Sections */
section {
padding: 6rem 0;
}
.section-title {
text-align: center;
margin-bottom: 4rem;
position: relative;
}
.section-title h2 {
font-size: 2.8rem;
color: var(--dark-gray);
margin-bottom: 1.5rem;
font-weight: 800;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--primary-red);
border-radius: 2px;
}
.section-title p {
color: #666;
max-width: 700px;
margin: 0 auto;
font-size: 1.1rem;
}
/* Cartes de projet */
.project-details {
background-color: var(--white);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
padding: 3rem;
margin-bottom: 3rem;
border-left: 5px solid var(--primary-red);
transition: transform 0.3s, box-shadow 0.3s;
}
.project-details:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.project-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.info-card {
background: linear-gradient(145deg, var(--white), var(--light-gray));
padding: 2rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s;
position: relative;
overflow: hidden;
}
.info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background: var(--primary-red);
}
.info-card:hover {
transform: translateY(-8px);
}
.info-card h3 {
color: var(--primary-red);
margin-bottom: 1.5rem;
font-size: 1.4rem;
font-weight: 700;
}
.info-card ul {
list-style: none;
}
.info-card ul li {
margin-bottom: 0.8rem;
position: relative;
padding-left: 1.8rem;
}
.info-card ul li::before {
content: '•';
color: var(--primary-red);
font-weight: bold;
position: absolute;
left: 0;
font-size: 1.5rem;
}
/* Étapes d'approche */
.approach-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.step {
text-align: center;
padding: 2.5rem 1.5rem;
background: var(--white);
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
position: relative;
z-index: 1;
overflow: hidden;
}
.step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: var(--primary-red);
z-index: -1;
transition: height 0.5s;
}
.step:hover {
transform: translateY(-10px);
color: var(--white);
}
.step:hover::before {
height: 100%;
}
.step:hover h3, .step:hover .step-number {
color: var(--white);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: var(--light-gray);
color: var(--primary-red);
border-radius: 50%;
font-weight: 800;
font-size: 1.2rem;
margin-bottom: 1.5rem;
transition: all 0.3s;
}
.step h3 {
margin-bottom: 1.2rem;
color: var(--dark-gray);
font-weight: 700;
transition: all 0.3s;
}
.step p {
transition: all 0.3s;
}
/* Gallery */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.gallery-item {
height: 250px;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.gallery-item:hover {
transform: translateY(-8px);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(227, 6, 19, 0.85);
color: var(--white);
padding: 1rem;
transform: translateY(100%);
transition: transform 0.3s;
}
.gallery-item:hover .gallery-caption {
transform: translateY(0);
}
/* Section des résultats */
.results {
background: linear-gradient(to right, var(--primary-red), var(--dark-red));
padding: 6rem 0;
color: var(--white);
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
.results .section-title h2 {
color: var(--white);
}
.results .section-title h2::after {
background: var(--white);
}
.results .section-title p {
color: rgba(255, 255, 255, 0.9);
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2.5rem;
}
.result-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 2.5rem 2rem;
border-radius: 15px;
text-align: center;
transition: transform 0.3s;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.result-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.15);
}
.result-card i {
font-size: 3rem;
margin-bottom: 1.5rem;
color: var(--white);
}
.result-card h3 {
margin-bottom: 1rem;
font-size: 1.4rem;
}
/* Footer */
footer {
background: var(--dark-gray);
color: var(--white);
padding: 5rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section h3 {
margin-bottom: 1.8rem;
font-size: 1.4rem;
position: relative;
padding-bottom: 10px;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--primary-red);
}
.footer-section p, .footer-section a {
margin-bottom: 0.8rem;
display: block;
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-section a:hover {
color: var(--primary-red);
}
.copyright {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: #999;
}
/* Responsive design */
@media (max-width: 992px) {
.hero h1 {
font-size: 2.8rem;
}
nav ul {
flex-direction: column;
background: var(--dark-red);
position: absolute;
top: 100%;
right: 0;
width: 250px;
padding: 1rem;
border-radius: 0 0 0 10px;
transform: translateX(100%);
transition: transform 0.3s;
}
nav.active ul {
transform: translateX(0);
}
nav ul li {
margin: 0.5rem 0;
}
}
@media (max-width: 768px) {
.hero {
height: auto;
padding: 6rem 0;
clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
.hero h1 {
font-size: 2.3rem;
}
.hero p {
font-size: 1.1rem;
}
.section-title h2 {
font-size: 2.2rem;
}
.project-info {
grid-template-columns: 1fr;
}
.gallery {
grid-template-columns: 1fr;
}
}
/* Animation des éléments au défilement */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s, transform 0.8s;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
Construction de Salle Polyvalente
Réalisation d'un espace moderne et fonctionnel pour la Mairie de Bingerville
Découvrir le projet
Projet de Construction
Conception et réalisation d'une salle polyvalente pour la Mairie de Bingerville
Contexte du projet
La Mairie de Bingerville avait besoin d'un espace polyvalent moderne pour accueillir des événements communautaires, des réunions et des cérémonies. Ceixpa a été choisie pour concevoir et construire cette infrastructure qui répond aux besoins de la communauté tout en respectant les normes architecturales et environnementales.
Le défi consistait à créer un espace fonctionnel, esthétique et durable, intégrant les dernières innovations en matière de construction tout en respectant le budget et les délais impartis.
Objectifs
- Créer un espace polyvalent de 500m² pouvant accueillir 300 personnes
- Intégrer des solutions éco-responsables et économes en énergie
- Respecter les délais de construction de 9 mois
- Utiliser des matériaux locaux à hauteur de 60%
- Assurer une maintenance facile et économique
Caractéristiques techniques
- Surface: 500 m² avec hauteur sous plafond de 6m
- Structure: Béton armé avec charpente métallique
- Toiture: Panneaux sandwich avec isolation thermique
- Climatisation: Système centralisé à haut rendement énergétique
- Équipements: Système sonorisation, éclairage LED, écran projection
Chiffres clés
- Budget total: 185 000 000 FCFA
- Durée des travaux: 9 mois
- Main d'œuvre: 25 personnes dont 70% de locaux
- Consommation énergétique: 40% inférieure aux standards
- Capacité d'accueil: 300 personnes assises
Processus de réalisation
Notre méthodologie en 6 étapes pour la réussite du projet
1
Étude préliminaire
Analyse des besoins, étude du terrain, conception architecturale préliminaire
2
Conception détaillée
Plans techniques détaillés, choix des matériaux, planning précis des travaux
3
Préparation du site
Terrassement, fondations, installations des réseaux et utilities
4
Construction
Érection de la structure, mise en place de la toiture, travaux de maçonnerie
5
Aménagements
Installation des équipements, électricité, plomberie, climatisation
6
Finitions et remise
Travaux de peinture, sols, finitions et remise des clés à la mairie
Résultats obtenus
Des réalisations concrètes qui répondent aux attentes de la Mairie
Respect des délais
Projet livré dans les temps avec une avance de 15 jours
Respect du budget
Réalisation à 98% du budget initial prévu
Efficacité énergétique
40% d'économie d'énergie par rapport aux bâtiments similaires
Satisfaction client
100% de satisfaction de la Mairie et des utilisateurs
// Animation au défilement
document.addEventListener('DOMContentLoaded', function() {
const fadeElements = document.querySelectorAll('.fade-in');
const fadeInOptions = {
threshold: 0.3,
rootMargin: '0px 0px -50px 0px'
};
const fadeInObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, fadeInOptions);
fadeElements.forEach(element => {
fadeInObserver.observe(element);
});
});
