Fòk Yo La — Refonte Mockup
:root {
--rouge: #de0f3f;
--bleu: #0a2342;
--bleu-clair: #7bb7e0;
--or: #e8c84a;
--blanc: #faf8f4;
--gris: #f0ece4;
--texte: #1a1a1a;
--rouge-fonce: #a80a2e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--blanc);
color: var(--texte);
overflow-x: hidden;
}
/* ── NAV ── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 3rem;
background: rgba(10,35,66,0.97);
backdrop-filter: blur(10px);
border-bottom: 2px solid var(--rouge);
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 900;
color: var(--blanc);
letter-spacing: -0.5px;
}
.nav-logo span { color: var(--rouge); }
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: rgba(255,255,255,0.8);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--bleu-clair); }
.nav-cta {
background: var(--rouge);
color: white !important;
padding: 0.5rem 1.2rem;
border-radius: 2px;
transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--rouge-fonce) !important; color: white !important; }
/* ── HERO ── */
#hero {
min-height: 100vh;
background: var(--bleu);
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}
.hero-left {
display: flex;
flex-direction: column;
justify-content: center;
padding: 8rem 3rem 4rem 4rem;
position: relative;
z-index: 2;
}
.hero-eyebrow {
font-family: 'Space Mono', monospace;
font-size: 0.72rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--bleu-clair);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.hero-eyebrow::before {
content: '';
display: block;
width: 30px;
height: 2px;
background: var(--rouge);
}
.hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 5vw, 4.2rem);
font-weight: 900;
line-height: 1.05;
color: var(--blanc);
margin-bottom: 0.4rem;
}
.hero-h1 .accent { color: var(--rouge); font-style: italic; }
.hero-tagline {
font-family: 'DM Sans', sans-serif;
font-size: 1.05rem;
font-weight: 300;
color: rgba(255,255,255,0.65);
max-width: 420px;
line-height: 1.7;
margin: 1.5rem 0 2.5rem;
border-left: 3px solid var(--rouge);
padding-left: 1.2rem;
}
.hero-ctas {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-primary {
background: var(--rouge);
color: white;
padding: 0.9rem 2rem;
border: none;
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
letter-spacing: 0.5px;
transition: transform 0.2s, background 0.2s;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.btn-primary:hover { background: var(--rouge-fonce); transform: translateY(-2px); }
.btn-outline {
background: transparent;
color: var(--blanc);
padding: 0.9rem 2rem;
border: 1.5px solid rgba(255,255,255,0.3);
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
display: inline-block;
letter-spacing: 0.5px;
transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: var(--bleu-clair); color: var(--bleu-clair); }
.hero-right {
position: relative;
overflow: hidden;
}
.hero-img-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 3px;
}
.hero-img-grid div {
background: rgba(123,183,224,0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
position: relative;
overflow: hidden;
}
.hero-img-grid div::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(222,15,63,0.08), rgba(10,35,66,0.4));
}
.hero-img-grid .cell-1 { background: rgba(123,183,224,0.2); }
.hero-img-grid .cell-2 { background: rgba(222,15,63,0.15); grid-row: 1/3; }
.hero-img-grid .cell-3 { background: rgba(10,35,66,0.6); }
.hero-img-placeholder {
font-family: 'Space Mono', monospace;
font-size: 0.6rem;
color: rgba(255,255,255,0.3);
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
z-index: 1;
}
.hero-overlay-stat {
position: absolute;
bottom: 2rem;
right: 2rem;
background: var(--rouge);
color: white;
padding: 1.2rem 1.5rem;
z-index: 10;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.hero-overlay-stat .big { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 900; line-height: 1; }
.hero-overlay-stat .small { font-size: 0.7rem; opacity: 0.85; line-height: 1.4; margin-top: 0.2rem; font-family: 'Space Mono', monospace; }
/* ── STATS BAND ── */
#stats {
background: var(--rouge);
padding: 3rem 4rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
position: relative;
}
#stats::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
90deg,
transparent,
transparent calc(25% - 0.5px),
rgba(255,255,255,0.15) calc(25% - 0.5px),
rgba(255,255,255,0.15) 25%
);
}
.stat-item {
text-align: center;
color: white;
padding: 1rem;
position: relative;
z-index: 1;
}
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 900;
line-height: 1;
display: block;
}
.stat-label {
font-size: 0.75rem;
opacity: 0.85;
letter-spacing: 0.5px;
margin-top: 0.4rem;
display: block;
font-family: 'Space Mono', monospace;
}
/* ── MISSION ── */
#mission {
padding: 6rem 4rem;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 5rem;
align-items: center;
background: var(--blanc);
}
.mission-label {
font-family: 'Space Mono', monospace;
font-size: 0.68rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--rouge);
margin-bottom: 1rem;
}
.mission-h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 900;
line-height: 1.1;
color: var(--bleu);
}
.mission-h2 em { color: var(--rouge); font-style: italic; }
.mission-text {
font-size: 1rem;
line-height: 1.8;
color: #444;
margin-bottom: 1.5rem;
}
.mission-quote {
border-left: 4px solid var(--rouge);
padding: 1rem 1.5rem;
background: var(--gris);
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.1rem;
color: var(--bleu);
line-height: 1.6;
}
/* ── PROGRAMMES ── */
#programmes {
padding: 6rem 4rem;
background: var(--bleu);
}
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 3rem;
}
.section-label {
font-family: 'Space Mono', monospace;
font-size: 0.68rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--bleu-clair);
margin-bottom: 0.6rem;
}
.section-h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 900;
color: white;
line-height: 1.1;
}
.programmes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
}
.prog-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
padding: 3rem;
position: relative;
overflow: hidden;
transition: background 0.3s;
}
.prog-card:hover { background: rgba(255,255,255,0.08); }
.prog-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--rouge);
}
.prog-card.accent::before { background: var(--or); }
.prog-tag {
font-family: 'Space Mono', monospace;
font-size: 0.65rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rouge);
margin-bottom: 1rem;
display: block;
}
.prog-card.accent .prog-tag { color: var(--or); }
.prog-name {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 900;
color: white;
margin-bottom: 1rem;
line-height: 1.1;
}
.prog-desc {
font-size: 0.92rem;
line-height: 1.7;
color: rgba(255,255,255,0.65);
margin-bottom: 2rem;
}
.prog-stats {
display: flex;
gap: 2rem;
margin-bottom: 2rem;
}
.prog-stat { color: white; }
.prog-stat .n { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; display: block; line-height: 1; }
.prog-stat .l { font-size: 0.7rem; color: rgba(255,255,255,0.5); font-family: 'Space Mono', monospace; display: block; margin-top: 0.2rem; letter-spacing: 0.5px; }
.prog-pillars {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.pillar-tag {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
font-size: 0.72rem;
padding: 0.35rem 0.8rem;
border-radius: 1px;
font-family: 'Space Mono', monospace;
letter-spacing: 0.5px;
}
.prog-link {
color: var(--rouge);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.2s;
}
.prog-card.accent .prog-link { color: var(--or); }
.prog-link:hover { gap: 0.9rem; }
.prog-link::after { content: '→'; }
/* ── TÉMOIGNAGES ── */
#temoignages {
padding: 6rem 4rem;
background: var(--gris);
position: relative;
overflow: hidden;
}
#temoignages::before {
content: '"';
font-family: 'Playfair Display', serif;
font-size: 20rem;
color: rgba(222,15,63,0.06);
position: absolute;
top: -3rem;
left: 2rem;
line-height: 1;
pointer-events: none;
}
.temoignages-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.temo-card {
background: white;
padding: 2.5rem;
position: relative;
border-bottom: 3px solid transparent;
transition: border-color 0.3s, transform 0.2s;
}
.temo-card:hover { border-color: var(--rouge); transform: translateY(-4px); }
.temo-quote {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1rem;
line-height: 1.7;
color: var(--bleu);
margin-bottom: 2rem;
}
.temo-author {
display: flex;
align-items: center;
gap: 1rem;
}
.temo-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bleu);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
flex-shrink: 0;
}
.temo-name { font-weight: 600; font-size: 0.88rem; color: var(--bleu); }
.temo-role { font-size: 0.75rem; color: #888; font-family: 'Space Mono', monospace; }
.temo-prog {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: var(--rouge);
color: white;
font-size: 0.62rem;
padding: 0.25rem 0.6rem;
font-family: 'Space Mono', monospace;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ── ANNUAIRE ── */
#annuaire {
padding: 6rem 4rem;
background: var(--blanc);
display: grid;
grid-template-columns: 1fr 2fr;
gap: 5rem;
align-items: start;
}
.annuaire-intro .mission-label { margin-bottom: 1rem; }
.annuaire-desc { font-size: 0.95rem; line-height: 1.8; color: #555; margin: 1.5rem 0 2rem; }
.annuaire-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.femme-card {
position: relative;
aspect-ratio: 3/4;
background: var(--gris);
overflow: hidden;
cursor: pointer;
transition: transform 0.3s;
}
.femme-card:hover { transform: scale(1.02); }
.femme-card-img {
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
background: linear-gradient(135deg, var(--bleu), var(--bleu-clair));
font-family: 'Playfair Display', serif;
color: rgba(255,255,255,0.3);
font-weight: 900;
}
.femme-card-info {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1rem;
background: linear-gradient(transparent, rgba(10,35,66,0.95));
color: white;
}
.femme-card-name { font-weight: 600; font-size: 0.85rem; line-height: 1.2; }
.femme-card-role { font-size: 0.7rem; color: var(--bleu-clair); font-family: 'Space Mono', monospace; margin-top: 0.2rem; }
/* ── PUBLICATIONS ── */
#publications {
padding: 6rem 4rem;
background: var(--bleu);
}
.pub-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 1.5rem;
margin-top: 3rem;
}
.pub-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
transition: background 0.3s;
cursor: pointer;
}
.pub-card:hover { background: rgba(255,255,255,0.1); }
.pub-card-img {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.pub-card.featured .pub-card-img { height: 260px; }
.pub-card-img.rouge { background: var(--rouge); }
.pub-card-img.or { background: var(--or); }
.pub-card-img.bleu-clair { background: var(--bleu-clair); }
.pub-body { padding: 1.5rem; }
.pub-cat {
font-family: 'Space Mono', monospace;
font-size: 0.62rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--bleu-clair);
margin-bottom: 0.6rem;
}
.pub-title {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: white;
line-height: 1.3;
margin-bottom: 0.8rem;
}
.pub-card.featured .pub-title { font-size: 1.3rem; }
.pub-excerpt { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
/* ── VIDÉO ── */
#video-section {
padding: 5rem 4rem;
background: var(--gris);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.video-frame {
aspect-ratio: 16/9;
background: var(--bleu);
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
overflow: hidden;
}
.video-frame::after {
content: '▶';
font-size: 3rem;
color: white;
background: var(--rouge);
width: 72px; height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding-left: 6px;
transition: transform 0.2s;
position: relative;
z-index: 1;
}
.video-frame:hover::after { transform: scale(1.1); }
.video-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--bleu), rgba(123,183,224,0.3));
opacity: 0.8;
}
.video-desc { font-size: 0.9rem; line-height: 1.8; color: #555; margin: 1rem 0 1.5rem; }
.video-playlist {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1.5rem;
}
.vp-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem;
background: white;
cursor: pointer;
transition: background 0.2s;
border-left: 3px solid transparent;
}
.vp-item:hover, .vp-item.active { border-left-color: var(--rouge); background: var(--blanc); }
.vp-num {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
color: var(--rouge);
font-weight: 700;
width: 24px;
flex-shrink: 0;
}
.vp-title { font-size: 0.85rem; font-weight: 500; color: var(--bleu); }
/* ── NEWSLETTER ── */
#newsletter {
background: var(--rouge);
padding: 5rem 4rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
overflow: hidden;
}
#newsletter::before {
content: 'FÒK YO LA';
font-family: 'Playfair Display', serif;
font-size: 8rem;
font-weight: 900;
color: rgba(255,255,255,0.05);
position: absolute;
right: -2rem;
bottom: -1rem;
white-space: nowrap;
pointer-events: none;
}
.nl-h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 900;
color: white;
line-height: 1.1;
margin-bottom: 1rem;
}
.nl-sub { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.7; }
.nl-form {
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
z-index: 1;
}
.nl-input {
background: rgba(255,255,255,0.15);
border: 1.5px solid rgba(255,255,255,0.3);
color: white;
padding: 1rem 1.5rem;
font-size: 1rem;
font-family: 'DM Sans', sans-serif;
outline: none;
transition: border-color 0.2s;
}
.nl-input::placeholder { color: rgba(255,255,255,0.5); }
.nl-input:focus { border-color: white; }
.nl-btn {
background: white;
color: var(--rouge);
border: none;
padding: 1rem 2rem;
font-size: 0.9rem;
font-weight: 700;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
letter-spacing: 0.5px;
transition: background 0.2s;
text-transform: uppercase;
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.nl-btn:hover { background: var(--gris); }
.nl-reseaux {
display: flex;
gap: 0.8rem;
margin-top: 1rem;
}
.rs-btn {
color: white;
border: 1.5px solid rgba(255,255,255,0.3);
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-family: 'Space Mono', monospace;
text-decoration: none;
transition: background 0.2s;
}
.rs-btn:hover { background: rgba(255,255,255,0.15); }
/* ── FOOTER ── */
footer {
background: #060e1c;
color: rgba(255,255,255,0.6);
padding: 3rem 4rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 2rem;
border-top: 2px solid var(--rouge);
}
.footer-brand .nav-logo { font-size: 1.2rem; display: block; margin-bottom: 0.8rem; }
.footer-desc { font-size: 0.8rem; line-height: 1.7; }
.footer-col h4 {
font-family: 'Space Mono', monospace;
font-size: 0.65rem;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
margin-bottom: 1rem;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul a {
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 0.82rem;
transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--bleu-clair); }
.footer-bottom {
background: #040a13;
padding: 1.2rem 4rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
color: rgba(255,255,255,0.3);
font-family: 'Space Mono', monospace;
}
.footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }
/* ── SCROLL ANIMATIONS ── */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ── ANNOTATION OVERLAY (mockup only) ── */
.annotation {
display: inline-block;
background: #fffacd;
color: #7a6000;
font-size: 0.65rem;
font-family: 'Space Mono', monospace;
padding: 0.15rem 0.5rem;
border: 1px dashed #c8a000;
border-radius: 2px;
margin-left: 0.5rem;
vertical-align: middle;
pointer-events: none;
}
/* ── MOCKUP BANNER ── */
.mockup-banner {
background: #fffacd;
border-bottom: 2px dashed #c8a000;
padding: 0.6rem 2rem;
text-align: center;
font-family: 'Space Mono', monospace;
font-size: 0.72rem;
color: #7a6000;
letter-spacing: 1px;
position: sticky;
top: 0;
z-index: 200;
}
/* counter animation */
@keyframes countUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.stat-number { animation: countUp 0.8s ease forwards; }
⚠ MOCKUP — Proposition de refonte fokyola.ht — Les images sont des placeholders | Ruth Valmyr / FOKYOLA 2026
Fòk Yo La
Mouvement féministe · Haïti
Pou sa chanje,fanm
Campagne pour l'inclusion des femmes en politique haïtienne. Former les leaders d'aujourd'hui, propulser celles de demain.
Photo participantes
Portrait
Atelier
2,7%
Seulement 2,7% de
52%
De femmes
2,7%
Du Parlement
10
Départements
186e
Haïti sur 193 pays
Haïti a adhéré à la Convention CEDEF en 1981 et à la Plateforme de Beijing en 1995. Pourtant, les femmes restent massivement exclues des espaces politiques. Fòk Yo La est la campagne qui dit : ça suffit.
« L'État haïtien a l'obligation d'agir pour que les femmes soient équitablement représentées à tous les niveaux de la vie nationale. »
Portée par la Fondation Déclic avec le soutien de l'Union européenne et de la Fondation Kellogg, Fòk Yo La opère sur deux fronts : sensibiliser le public et former concrètement une nouvelle génération de femmes leaders.
Programme phare · Actif 2025
Nou Kapab
Incubateur de leadership citoyen pour les jeunes femmes haïtiennes. Un parcours de 18 mois qui combine résidence intensive, mentorat, projets communautaires et ancrage en clubs locaux.
3 Semaines de résidence
12 Mois de suivi
10 Départements
Leadership & plaidoyer
Projets communautaires
Éducation civique
Mentorat & réseaux
Découvrir Nou Kapab
Programme · Conférences & formation
Nou La !
Conférences itinérantes, formations en leadership politique et ateliers de théâtre-forum "Mwen, fanm kandidat". Un programme déployé dans tout le pays pour créer des espaces de parole et d'action.
+1 000 Participantes
10 Villes touchées
Conférences publiques
Formation politique
Théâtre-forum
Happenings de rue
Découvrir Nou La !
Nou Kapab
« L'incubateur m'a donné la confiance pour lancer mon projet. Je sais maintenant que ma voix compte. »
EA
Esaïca Altéma
16 ans · Participante cohorte 2025
Nou Kapab
« Nou Kapab a changé ma manière de voir mon rôle dans ma communauté. Je me sens capable d'agir. »
ML
May Lexpennecia Pierre
16 ans · Participante cohorte 2025
Nou Kapab
« Grâce au programme, j'ai acquis les outils pour mobiliser d'autres jeunes autour de moi dans ma localité. »
AB
Abigail MJ Pierre-Louis
15 ans · Participante cohorte 2025
Base de données
Le leadershipféminin
L'Annuaire Fòk Yo La recense des femmes remarquables qui exercent un leadership dans tous les secteurs de la vie haïtienne. Une ressource unique, une source d'inspiration.
Accéder à l'annuaire complet
F
Femme leader
Politique · Port-au-Prince
F
Femme leader
Société civile · Nord
F
Femme leader
Éducation · Sud
→ Les profils réels seront intégrés depuis l'annuaire existant
📋
Publication phare · 2026
Livre blanc 2026 — Femmes et politique en Haïti
Analyse approfondie de la participation politique des femmes haïtiennes, des obstacles systémiques et des recommandations concrètes pour 2026.
📰
Série documentaire
Fanm pou Chanjman
Portraits de femmes engagées qui changent Haïti depuis leur communauté.
🎙️
Podcast vidéo · nouveau
Koze Fanm, Dwa, Politik
La nouvelle série podcast de FOKYOLA sur les droits des femmes et la politique haïtienne.
Ateliers en format vidéo
Voir la campagne
Des capsules courtes pour comprendre les enjeux, les témoignages et les actions du mouvement Fòk Yo La sur le terrain.
01
Fanm yo pa la (ase)
02
Fanm yo kapab
03
Fanm yo dwe la
Voir toutes les ressources
Le changement véritable passe par là.
Restez informé·e des actions, publications et événements du mouvement Fòk Yo La.
// Scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
// Video playlist
document.querySelectorAll('.vp-item').forEach(item => {
item.addEventListener('click', () => {
document.querySelectorAll('.vp-item').forEach(i => i.classList.remove('active'));
item.classList.add('active');
});
});
// Stat counter animation
function animateCounters() {
document.querySelectorAll('.stat-number').forEach(el => {
el.style.animation = 'none';
el.offsetHeight; // reflow
el.style.animation = 'countUp 0.8s ease forwards';
});
}
const statsSection = document.querySelector('#stats');
const statsObserver = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) animateCounters();
}, { threshold: 0.5 });
statsObserver.observe(statsSection);
