/* ── ELEMENTOR FULL-BLEED WRAPPER ── */
.e3c-wrap {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
}
html, body {
overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
–green: #00c853;
–green-dark: #007a32;
–green-glow: rgba(0,200,83,0.15);
–gold: #f4b942;
–bg: #060d12;
–bg2: #0b1620;
–card: #0f1e2a;
–border: rgba(0,200,83,0.18);
–text: #dceee3;
–muted: #7a9b85;
–white: #ffffff;
–radius: 14px;
–nav-h: 72px;
}
html { scroll-behavior: smooth; }
body { font-family: ‘Inter’, sans-serif; background: var(–bg); color: var(–text); overflow-x: hidden; line-height: 1.7; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(–bg); }
::-webkit-scrollbar-thumb { background: var(–green-dark); border-radius: 3px; }
/* ── NAV ── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
height: var(–nav-h);
display: flex; align-items: center; justify-content: space-between;
padding: 0 5%;
transition: background .35s, backdrop-filter .35s, box-shadow .35s;
}
.nav.scrolled { background: rgba(6,13,18,.88); backdrop-filter: blur(18px); box-shadow: 0 1px 0 var(–border); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(–green), var(–green-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #fff; font-family: ‘Space Grotesk’, sans-serif; letter-spacing: -1px; }
.nav-logo-text { font-family: ‘Space Grotesk’, sans-serif; font-size: 1.15rem; font-weight: 700; color: var(–white); line-height: 1.1; }
.nav-logo-text span { color: var(–green); }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: var(–text); font-size: .9rem; font-weight: 500; transition: color .2s; position: relative; padding-bottom: 3px; }
.nav-links a::after { content: »; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(–green); transition: width .3s; }
.nav-links a:hover { color: var(–white); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(–green); }
.nav-links a.active::after { width: 100%; }
.nav-cta { background: var(–green); color: #000 !important; padding: .45rem 1.2rem !important; border-radius: 50px; font-weight: 600 !important; }
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: #00e05e !important; transform: translateY(-1px); }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-burger span { display: block; width: 26px; height: 2px; background: var(–text); border-radius: 2px; transition: all .3s; }
.nav-mobile { display: none; position: fixed; top: var(–nav-h); left: 0; right: 0; background: rgba(6,13,18,.97); backdrop-filter: blur(18px); padding: 1.5rem 5% 2rem; border-top: 1px solid var(–border); z-index: 999; }
.nav-mobile.open { display: block; }
.nav-mobile ul { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
.nav-mobile a { text-decoration: none; color: var(–text); font-size: 1.1rem; font-weight: 500; transition: color .2s; }
.nav-mobile a:hover { color: var(–green); }
/* ── COMMUNS ── */
.section-tag { display: inline-flex; align-items: center; gap: 6px; color: var(–green); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: .8rem; }
.section-tag::before { content: »; display: block; width: 20px; height: 2px; background: var(–green); }
.section-title { font-family: ‘Space Grotesk’, sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: var(–white); line-height: 1.2; margin-bottom: 1rem; }
.section-desc { font-size: 1rem; color: var(–muted); line-height: 1.9; }
.anim { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.anim.visible { opacity: 1; transform: translateY(0); }
.anim-delay-1 { transition-delay: .1s; }
.anim-delay-2 { transition-delay: .2s; }
.anim-delay-3 { transition-delay: .3s; }
.anim-delay-4 { transition-delay: .4s; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(–green); color: #000; padding: .85rem 2rem; border-radius: 50px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: all .25s; border: none; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: #00e05e; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,200,83,.35); }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(–white); padding: .85rem 2rem; border-radius: 50px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: all .25s; border: 1px solid rgba(255,255,255,.2); }
.btn-outline:hover { border-color: var(–green); color: var(–green); background: var(–green-glow); }
/* ══ PAGE HERO ══ */
.page-hero {
padding: calc(var(–nav-h) + 80px) 5% 80px;
background:
radial-gradient(ellipse 60% 70% at 85% 40%, rgba(0,100,40,.22) 0%, transparent 65%),
var(–bg2);
border-bottom: 1px solid var(–border);
position: relative; overflow: hidden;
}
.page-hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(rgba(0,200,83,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,200,83,.03) 1px, transparent 1px);
background-size: 60px 60px;
}
.page-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(–muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(–muted); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(–green); }
.breadcrumb i { font-size: .6rem; }
.page-hero-title { font-family: ‘Space Grotesk’, sans-serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; color: var(–white); line-height: 1.1; margin-bottom: 1.2rem; animation: fade-up .8s ease both; }
.page-hero-title span { color: var(–green); }
.page-hero-sub { font-size: 1.05rem; color: var(–muted); max-width: 520px; animation: fade-up .8s ease .15s both; line-height: 1.9; }
/* Info cards hero side */
.hero-info-cards { display: flex; flex-direction: column; gap: 1rem; animation: fade-up .9s ease .25s both; }
.hero-info-card {
background: var(–card); border: 1px solid var(–border);
border-radius: var(–radius); padding: 1.2rem 1.5rem;
display: flex; align-items: center; gap: 1.2rem;
transition: border-color .2s;
}
.hero-info-card:hover { border-color: rgba(0,200,83,.4); }
.hero-info-icon {
width: 44px; height: 44px; border-radius: 10px;
background: var(–green-glow); border: 1px solid var(–border);
display: flex; align-items: center; justify-content: center;
color: var(–green); font-size: 1rem; flex-shrink: 0;
}
.hero-info-label { font-size: .75rem; color: var(–muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .2rem; }
.hero-info-value { font-size: .95rem; font-weight: 600; color: var(–white); }
.hero-info-value a { color: var(–white); text-decoration: none; transition: color .2s; }
.hero-info-value a:hover { color: var(–green); }
/* ══ MAIN CONTACT SECTION ══ */
.contact-main { padding: 90px 5%; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: start; }
/* ── FORM ── */
.form-card {
background: var(–card); border: 1px solid var(–border);
border-radius: 20px; padding: 2.5rem;
}
.form-card-title {
font-family: ‘Space Grotesk’, sans-serif;
font-size: 1.3rem; font-weight: 700; color: var(–white);
margin-bottom: .4rem;
}
.form-card-sub { font-size: .88rem; color: var(–muted); margin-bottom: 2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.form-group:last-of-type { margin-bottom: 0; }
.form-label { font-size: .82rem; font-weight: 600; color: var(–text); }
.form-label span { color: var(–green); }
.form-input, .form-select, .form-textarea {
background: var(–bg2); border: 1px solid var(–border);
border-radius: 10px; padding: .75rem 1rem;
font-size: .92rem; color: var(–white);
font-family: ‘Inter’, sans-serif;
transition: border-color .25s, box-shadow .25s;
outline: none; width: 100%;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(–muted); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(–green);
box-shadow: 0 0 0 3px rgba(0,200,83,.1);
}
.form-select { appearance: none; background-image: url(« data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’12’ height=’12’ viewBox=’0 0 12 12’%3E%3Cpath fill=’%237a9b85′ d=’M6 8L1 3h10z’/%3E%3C/svg%3E »); background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer; }
.form-select option { background: var(–card); color: var(–white); }
.form-textarea { resize: vertical; min-height: 130px; line-height: 1.7; }
.form-submit { width: 100%; margin-top: 1.5rem; justify-content: center; font-size: 1rem; padding: 1rem; border-radius: 12px; }
.form-submit i { font-size: .9rem; }
/* Success state */
.form-success {
display: none; text-align: center; padding: 2rem;
}
.form-success-icon {
width: 64px; height: 64px; border-radius: 50%;
background: var(–green-glow); border: 2px solid var(–green);
color: var(–green); font-size: 1.6rem;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.2rem;
animation: pop .4s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes pop { from { transform: scale(0); opacity:0; } to { transform: scale(1); opacity:1; } }
.form-success h3 { font-family: ‘Space Grotesk’, sans-serif; color: var(–white); margin-bottom: .5rem; }
.form-success p { color: var(–muted); font-size: .9rem; }
/* ── SIDEBAR INFO ── */
.contact-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar-card {
background: var(–card); border: 1px solid var(–border);
border-radius: var(–radius); padding: 1.8rem;
transition: border-color .2s;
}
.sidebar-card:hover { border-color: rgba(0,200,83,.35); }
.sidebar-card-title {
font-family: ‘Space Grotesk’, sans-serif;
font-size: .95rem; font-weight: 700; color: var(–white);
margin-bottom: 1.2rem; display: flex; align-items: center; gap: .7rem;
}
.sidebar-card-title i { color: var(–green); }
.contact-item { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .9rem; }
.contact-item:last-child { margin-bottom: 0; }
.contact-item-icon {
width: 36px; height: 36px; border-radius: 8px;
background: var(–green-glow); border: 1px solid var(–border);
display: flex; align-items: center; justify-content: center;
color: var(–green); font-size: .85rem; flex-shrink: 0;
}
.contact-item-label { font-size: .75rem; color: var(–muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.contact-item-value { font-size: .9rem; color: var(–text); font-weight: 500; margin-top: .1rem; }
.contact-item-value a { color: var(–text); text-decoration: none; transition: color .2s; }
.contact-item-value a:hover { color: var(–green); }
/* Socials in sidebar */
.sidebar-socials { display: flex; gap: .7rem; flex-wrap: wrap; }
.sidebar-social {
display: inline-flex; align-items: center; gap: .5rem;
background: var(–bg2); border: 1px solid var(–border);
color: var(–muted); font-size: .82rem; font-weight: 600;
padding: .4rem .9rem; border-radius: 8px; text-decoration: none;
transition: all .2s;
}
.sidebar-social:hover { border-color: var(–green); color: var(–green); background: var(–green-glow); }
.sidebar-social i { font-size: .9rem; }
/* Disponibilité badge */
.availability-badge {
display: flex; align-items: center; gap: .6rem;
background: rgba(0,200,83,.08); border: 1px solid rgba(0,200,83,.2);
border-radius: 10px; padding: .8rem 1rem;
margin-bottom: 1rem;
}
.availability-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(–green); flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(0,200,83,.2);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 3px rgba(0,200,83,.2); } 50% { box-shadow: 0 0 0 6px rgba(0,200,83,.1); } }
.availability-text { font-size: .82rem; font-weight: 600; color: var(–green); }
/* Heures de bureau */
.hours-list { display: flex; flex-direction: column; gap: .5rem; }
.hours-row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.hours-day { color: var(–muted); }
.hours-time { color: var(–text); font-weight: 600; }
.hours-row.today .hours-day { color: var(–green); }
.hours-row.today .hours-time { color: var(–green); }
/* ══ MOTIFS DE CONTACT ══ */
.reasons-section { padding: 90px 5%; background: var(–bg2); border-top: 1px solid var(–border); border-bottom: 1px solid var(–border); }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.reason-card {
background: var(–card); border: 1px solid var(–border);
border-radius: var(–radius); padding: 1.8rem;
transition: all .3s; cursor: pointer;
}
.reason-card:hover { border-color: rgba(0,200,83,.4); transform: translateY(-4px); }
.reason-icon {
width: 52px; height: 52px; border-radius: 12px;
background: var(–green-glow); border: 1px solid var(–border);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; color: var(–green); margin-bottom: 1rem;
}
.reason-title { font-family: ‘Space Grotesk’, sans-serif; font-size: 1rem; font-weight: 700; color: var(–white); margin-bottom: .5rem; }
.reason-desc { font-size: .85rem; color: var(–muted); line-height: 1.7; }
.reason-link { display: inline-flex; align-items: center; gap: 5px; color: var(–green); font-size: .82rem; font-weight: 600; margin-top: .9rem; transition: gap .2s; text-decoration: none; }
.reason-card:hover .reason-link { gap: 9px; }
/* ══ FAQ ══ */
.faq-section { padding: 90px 5%; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.faq-item {
background: var(–card); border: 1px solid var(–border);
border-radius: var(–radius); overflow: hidden;
}
.faq-question {
display: flex; align-items: center; justify-content: space-between;
padding: 1.2rem 1.5rem; cursor: pointer;
font-weight: 600; color: var(–white); font-size: .92rem;
transition: color .2s; gap: 1rem;
}
.faq-question:hover { color: var(–green); }
.faq-question i { color: var(–green); font-size: .8rem; flex-shrink: 0; transition: transform .3s; }
.faq-item.open .faq-question i { transform: rotate(45deg); }
.faq-answer {
max-height: 0; overflow: hidden;
transition: max-height .4s ease, padding .3s;
padding: 0 1.5rem;
font-size: .87rem; color: var(–muted); line-height: 1.8;
}
.faq-item.open .faq-answer { max-height: 200px; padding: 0 1.5rem 1.2rem; }
/* ── FOOTER ── */
footer { background: #030a0d; border-top: 1px solid var(–border); padding: 50px 5% 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-about p { font-size: .87rem; color: var(–muted); margin-top: .8rem; line-height: 1.8; }
.footer-socials { display: flex; gap: .8rem; margin-top: 1.2rem; }
.footer-social { width: 36px; height: 36px; border-radius: 8px; background: var(–card); border: 1px solid var(–border); display: flex; align-items: center; justify-content: center; color: var(–muted); font-size: .9rem; text-decoration: none; transition: all .2s; }
.footer-social:hover { background: var(–green-glow); color: var(–green); }
.footer-col h4 { font-size: .85rem; font-weight: 700; color: var(–white); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { text-decoration: none; color: var(–muted); font-size: .85rem; transition: color .2s; }
.footer-col a:hover { color: var(–green); }
.footer-bottom { border-top: 1px solid var(–border); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: .8rem; color: var(–muted); }
.footer-bottom span { color: var(–green); }
@keyframes fade-up { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
.page-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
.contact-grid { grid-template-columns: 1fr; gap: 3rem; }
.reasons-grid { grid-template-columns: 1fr 1fr; }
.faq-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.page-hero { padding: calc(var(–nav-h) + 50px) 5% 50px; }
.contact-main { padding: 60px 5%; }
.reasons-section { padding: 60px 5%; }
.faq-section { padding: 60px 5%; }
}
@media (max-width: 600px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
.contact-main { padding: 50px 5%; }
.reasons-section { padding: 50px 5%; }
.faq-section { padding: 50px 5%; }
.form-row { grid-template-columns: 1fr; }
.reasons-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero-info-cards { gap: .8rem; }
.sidebar-socials { flex-wrap: wrap; }
}
Parlons de votre
/* NAV */
const navbar = document.getElementById(‘navbar’);
window.addEventListener(‘scroll’, () => { navbar.classList.toggle(‘scrolled’, window.scrollY > 50); });
function toggleMenu() { document.getElementById(‘navMobile’).classList.toggle(‘open’); }
/* SCROLL ANIMATIONS */
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add(‘visible’); observer.unobserve(e.target); } });
}, { threshold: 0.12 });
document.querySelectorAll(‘.anim’).forEach(el => observer.observe(el));
/* FORM SUBMIT */
function handleSubmit(e) {
e.preventDefault();
const form = document.getElementById(‘contactForm’);
const success = document.getElementById(‘formSuccess’);
form.style.display = ‘none’;
success.style.display = ‘block’;
}
/* FAQ TOGGLE */
function toggleFaq(item) {
const isOpen = item.classList.contains(‘open’);
document.querySelectorAll(‘.faq-item’).forEach(i => i.classList.remove(‘open’));
if (!isOpen) item.classList.add(‘open’);
}
Accueil
Contact
Parlons de votre
projet
Notre équipe est disponible pour répondre à vos questions, étudier vos projets et vous accompagner dans votre transition énergétique et climatique.
Envoyez-nous un message
Réponse sous 24–48h ouvrées.
Sélectionnez un sujet
E3C Conseil – Stratégie & Finance climatique
E3C Ingénierie – Projet d’énergie renouvelable
E3C Équipements – Demande de devis
Centre d’Innovation Climatique
Participation au podcast The Green Experience
Proposition de partenariat
Autre demande
Message envoyé !
Merci pour votre message. Notre équipe vous répondra sous 24–48h ouvrées.
Informations de contact
Équipe disponible · Lun – Ven
Email général
Téléphone
Adresse
Dakar, Sénégal
Heures d’ouverture
Lundi – Vendredi
08h00 – 18h00
Samedi
09h00 – 13h00
Dimanche
Fermé
Fuseau horaire : GMT (Dakar, Sénégal)
Comment pouvons-nous vous aider ?
Choisissez votre demande
Quel que soit votre besoin, E3C a l’expertise pour vous accompagner.
Conseil stratégique
Stratégies climatiques, politiques énergétiques, mobilisation de financements verts pour gouvernements et entreprises.
Nous contacterProjet d’ingénierie
Conception et livraison de projets d’énergie renouvelable, électrification rurale, pompage solaire.
Nous contacterDemande de devis
Pompes solaires, kits photovoltaïques, équipements agricoles écologiques — obtenez une offre personnalisée.
Demander un devisInnovation & R&D
Partenariats de recherche, valorisation du Typha, économie circulaire — rejoignez notre Centre d’Innovation Climatique.
Nous contacterPodcast The Green Experience
Vous êtes expert en énergie ou climat ? Proposez votre participation à notre podcast vidéo sur YouTube.
Proposer ma participationPartenariat
Institutions, bailleurs, ONGs, universités — nous sommes ouverts à toute forme de collaboration pour l’Afrique durable.
Nous contacterFAQ
Questions fréquentes
Retrouvez les réponses aux questions les plus courantes sur E3C et nos services.
Dans quels pays E3C intervient-il ?
E3C intervient principalement au Sénégal et dans plusieurs pays d’Afrique subsaharienne. Nous avons déjà mené des projets dans plus de 15 pays du continent. Notre base principale est à Dakar, Sénégal.
Quels types de clients accompagnez-vous ?
Nous travaillons avec des gouvernements, ministères, collectivités locales, institutions internationales (ONU, Banque Mondiale, BAD), entreprises privées, ONGs, universités et communautés rurales.
Comment accéder aux financements climatiques internationaux ?
E3C Conseil vous accompagne de A à Z dans la mobilisation de financements verts : identification des fonds éligibles (FVC, Fonds d’Adaptation, GEF), rédaction des dossiers, soumission et gestion des fonds octroyés.
Proposez-vous des formations sur la finance climatique ?
Oui. E3C organise des formations et ateliers de renforcement des capacités à destination des institutions publiques, entreprises et acteurs de la société civile sur la finance climatique, les énergies renouvelables et la gestion durable.
Comment participer au podcast The Green Experience ?
Utilisez le formulaire de contact en sélectionnant « Participation au podcast ». Précisez votre domaine d’expertise et notre équipe de production vous contactera pour définir ensemble le sujet de l’épisode.
Qu’est-ce que le Typha et pourquoi est-il important ?
Le Typha australis est une plante aquatique envahissante qui prolifère dans le fleuve Sénégal. Notre Centre d’Innovation Climatique la transforme en isolant thermique, biomasse et produits artisanaux — créant des emplois verts tout en dépollant l’écosystème.