{"id":5530,"date":"2026-05-20T20:10:40","date_gmt":"2026-05-20T20:10:40","guid":{"rendered":"https:\/\/fokyola.ht\/?page_id=5530"},"modified":"2026-05-20T20:12:27","modified_gmt":"2026-05-20T20:12:27","slug":"elementor-5530","status":"publish","type":"page","link":"https:\/\/fokyola.ht\/?page_id=5530","title":{"rendered":"Elementor #5530"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5530\" class=\"elementor elementor-5530\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fa9b5b3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fa9b5b3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-de90d8f\" data-id=\"de90d8f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-87f5adc elementor-widget elementor-widget-wp-widget-custom_html\" data-id=\"87f5adc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"wp-widget-custom_html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"textwidget custom-html-widget\">\r\n\r\n\r\n\r\n\r\n<title>F\u00f2k Yo La \u2014 Refonte Mockup<\/title>\r\n\r\n\r\n\r\n  :root {\r\n    --rouge: #de0f3f;\r\n    --bleu: #0a2342;\r\n    --bleu-clair: #7bb7e0;\r\n    --or: #e8c84a;\r\n    --blanc: #faf8f4;\r\n    --gris: #f0ece4;\r\n    --texte: #1a1a1a;\r\n    --rouge-fonce: #a80a2e;\r\n  }\r\n\r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  html { scroll-behavior: smooth; }\r\n\r\n  body {\r\n    font-family: 'DM Sans', sans-serif;\r\n    background: var(--blanc);\r\n    color: var(--texte);\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n  nav {\r\n    position: fixed;\r\n    top: 0; left: 0; right: 0;\r\n    z-index: 100;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 1rem 3rem;\r\n    background: rgba(10,35,66,0.97);\r\n    backdrop-filter: blur(10px);\r\n    border-bottom: 2px solid var(--rouge);\r\n  }\r\n  .nav-logo {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.4rem;\r\n    font-weight: 900;\r\n    color: var(--blanc);\r\n    letter-spacing: -0.5px;\r\n  }\r\n  .nav-logo span { color: var(--rouge); }\r\n  .nav-links {\r\n    display: flex;\r\n    gap: 2rem;\r\n    list-style: none;\r\n  }\r\n  .nav-links a {\r\n    color: rgba(255,255,255,0.8);\r\n    text-decoration: none;\r\n    font-size: 0.85rem;\r\n    font-weight: 500;\r\n    letter-spacing: 0.5px;\r\n    text-transform: uppercase;\r\n    transition: color 0.2s;\r\n  }\r\n  .nav-links a:hover { color: var(--bleu-clair); }\r\n  .nav-cta {\r\n    background: var(--rouge);\r\n    color: white !important;\r\n    padding: 0.5rem 1.2rem;\r\n    border-radius: 2px;\r\n    transition: background 0.2s !important;\r\n  }\r\n  .nav-cta:hover { background: var(--rouge-fonce) !important; color: white !important; }\r\n\r\n  \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n  #hero {\r\n    min-height: 100vh;\r\n    background: var(--bleu);\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .hero-left {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    padding: 8rem 3rem 4rem 4rem;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n  .hero-eyebrow {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.72rem;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    color: var(--bleu-clair);\r\n    margin-bottom: 1.5rem;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.8rem;\r\n  }\r\n  .hero-eyebrow::before {\r\n    content: '';\r\n    display: block;\r\n    width: 30px;\r\n    height: 2px;\r\n    background: var(--rouge);\r\n  }\r\n  .hero-h1 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.8rem, 5vw, 4.2rem);\r\n    font-weight: 900;\r\n    line-height: 1.05;\r\n    color: var(--blanc);\r\n    margin-bottom: 0.4rem;\r\n  }\r\n  .hero-h1 .accent { color: var(--rouge); font-style: italic; }\r\n  .hero-tagline {\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 1.05rem;\r\n    font-weight: 300;\r\n    color: rgba(255,255,255,0.65);\r\n    max-width: 420px;\r\n    line-height: 1.7;\r\n    margin: 1.5rem 0 2.5rem;\r\n    border-left: 3px solid var(--rouge);\r\n    padding-left: 1.2rem;\r\n  }\r\n  .hero-ctas {\r\n    display: flex;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n  }\r\n  .btn-primary {\r\n    background: var(--rouge);\r\n    color: white;\r\n    padding: 0.9rem 2rem;\r\n    border: none;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 0.9rem;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    letter-spacing: 0.5px;\r\n    transition: transform 0.2s, background 0.2s;\r\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);\r\n  }\r\n  .btn-primary:hover { background: var(--rouge-fonce); transform: translateY(-2px); }\r\n  .btn-outline {\r\n    background: transparent;\r\n    color: var(--blanc);\r\n    padding: 0.9rem 2rem;\r\n    border: 1.5px solid rgba(255,255,255,0.3);\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 0.9rem;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n    display: inline-block;\r\n    letter-spacing: 0.5px;\r\n    transition: border-color 0.2s, color 0.2s;\r\n  }\r\n  .btn-outline:hover { border-color: var(--bleu-clair); color: var(--bleu-clair); }\r\n\r\n  .hero-right {\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .hero-img-grid {\r\n    position: absolute;\r\n    inset: 0;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    grid-template-rows: 1fr 1fr;\r\n    gap: 3px;\r\n  }\r\n  .hero-img-grid div {\r\n    background: rgba(123,183,224,0.15);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 3rem;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  .hero-img-grid div::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(135deg, rgba(222,15,63,0.08), rgba(10,35,66,0.4));\r\n  }\r\n  .hero-img-grid .cell-1 { background: rgba(123,183,224,0.2); }\r\n  .hero-img-grid .cell-2 { background: rgba(222,15,63,0.15); grid-row: 1\/3; }\r\n  .hero-img-grid .cell-3 { background: rgba(10,35,66,0.6); }\r\n  .hero-img-placeholder {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.6rem;\r\n    color: rgba(255,255,255,0.3);\r\n    text-align: center;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n    z-index: 1;\r\n  }\r\n  .hero-overlay-stat {\r\n    position: absolute;\r\n    bottom: 2rem;\r\n    right: 2rem;\r\n    background: var(--rouge);\r\n    color: white;\r\n    padding: 1.2rem 1.5rem;\r\n    z-index: 10;\r\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);\r\n  }\r\n  .hero-overlay-stat .big { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 900; line-height: 1; }\r\n  .hero-overlay-stat .small { font-size: 0.7rem; opacity: 0.85; line-height: 1.4; margin-top: 0.2rem; font-family: 'Space Mono', monospace; }\r\n\r\n  \/* \u2500\u2500 STATS BAND \u2500\u2500 *\/\r\n  #stats {\r\n    background: var(--rouge);\r\n    padding: 3rem 4rem;\r\n    display: grid;\r\n    grid-template-columns: repeat(4, 1fr);\r\n    gap: 1px;\r\n    position: relative;\r\n  }\r\n  #stats::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background: repeating-linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      transparent calc(25% - 0.5px),\r\n      rgba(255,255,255,0.15) calc(25% - 0.5px),\r\n      rgba(255,255,255,0.15) 25%\r\n    );\r\n  }\r\n  .stat-item {\r\n    text-align: center;\r\n    color: white;\r\n    padding: 1rem;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n  .stat-number {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 3rem;\r\n    font-weight: 900;\r\n    line-height: 1;\r\n    display: block;\r\n  }\r\n  .stat-label {\r\n    font-size: 0.75rem;\r\n    opacity: 0.85;\r\n    letter-spacing: 0.5px;\r\n    margin-top: 0.4rem;\r\n    display: block;\r\n    font-family: 'Space Mono', monospace;\r\n  }\r\n\r\n  \/* \u2500\u2500 MISSION \u2500\u2500 *\/\r\n  #mission {\r\n    padding: 6rem 4rem;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1.4fr;\r\n    gap: 5rem;\r\n    align-items: center;\r\n    background: var(--blanc);\r\n  }\r\n  .mission-label {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.68rem;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    color: var(--rouge);\r\n    margin-bottom: 1rem;\r\n  }\r\n  .mission-h2 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2rem, 3.5vw, 3rem);\r\n    font-weight: 900;\r\n    line-height: 1.1;\r\n    color: var(--bleu);\r\n  }\r\n  .mission-h2 em { color: var(--rouge); font-style: italic; }\r\n  .mission-text {\r\n    font-size: 1rem;\r\n    line-height: 1.8;\r\n    color: #444;\r\n    margin-bottom: 1.5rem;\r\n  }\r\n  .mission-quote {\r\n    border-left: 4px solid var(--rouge);\r\n    padding: 1rem 1.5rem;\r\n    background: var(--gris);\r\n    font-family: 'Playfair Display', serif;\r\n    font-style: italic;\r\n    font-size: 1.1rem;\r\n    color: var(--bleu);\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* \u2500\u2500 PROGRAMMES \u2500\u2500 *\/\r\n  #programmes {\r\n    padding: 6rem 4rem;\r\n    background: var(--bleu);\r\n  }\r\n  .section-header {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    justify-content: space-between;\r\n    margin-bottom: 3rem;\r\n  }\r\n  .section-label {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.68rem;\r\n    letter-spacing: 3px;\r\n    text-transform: uppercase;\r\n    color: var(--bleu-clair);\r\n    margin-bottom: 0.6rem;\r\n  }\r\n  .section-h2 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(1.8rem, 3vw, 2.5rem);\r\n    font-weight: 900;\r\n    color: white;\r\n    line-height: 1.1;\r\n  }\r\n  .programmes-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 2px;\r\n  }\r\n  .prog-card {\r\n    background: rgba(255,255,255,0.04);\r\n    border: 1px solid rgba(255,255,255,0.08);\r\n    padding: 3rem;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: background 0.3s;\r\n  }\r\n  .prog-card:hover { background: rgba(255,255,255,0.08); }\r\n  .prog-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0; left: 0; right: 0;\r\n    height: 4px;\r\n    background: var(--rouge);\r\n  }\r\n  .prog-card.accent::before { background: var(--or); }\r\n  .prog-tag {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.65rem;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: var(--rouge);\r\n    margin-bottom: 1rem;\r\n    display: block;\r\n  }\r\n  .prog-card.accent .prog-tag { color: var(--or); }\r\n  .prog-name {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.8rem;\r\n    font-weight: 900;\r\n    color: white;\r\n    margin-bottom: 1rem;\r\n    line-height: 1.1;\r\n  }\r\n  .prog-desc {\r\n    font-size: 0.92rem;\r\n    line-height: 1.7;\r\n    color: rgba(255,255,255,0.65);\r\n    margin-bottom: 2rem;\r\n  }\r\n  .prog-stats {\r\n    display: flex;\r\n    gap: 2rem;\r\n    margin-bottom: 2rem;\r\n  }\r\n  .prog-stat { color: white; }\r\n  .prog-stat .n { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; display: block; line-height: 1; }\r\n  .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; }\r\n  .prog-pillars {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 0.5rem;\r\n    margin-bottom: 2rem;\r\n  }\r\n  .pillar-tag {\r\n    background: rgba(255,255,255,0.08);\r\n    color: rgba(255,255,255,0.7);\r\n    font-size: 0.72rem;\r\n    padding: 0.35rem 0.8rem;\r\n    border-radius: 1px;\r\n    font-family: 'Space Mono', monospace;\r\n    letter-spacing: 0.5px;\r\n  }\r\n  .prog-link {\r\n    color: var(--rouge);\r\n    text-decoration: none;\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    letter-spacing: 0.5px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    transition: gap 0.2s;\r\n  }\r\n  .prog-card.accent .prog-link { color: var(--or); }\r\n  .prog-link:hover { gap: 0.9rem; }\r\n  .prog-link::after { content: '\u2192'; }\r\n\r\n  \/* \u2500\u2500 T\u00c9MOIGNAGES \u2500\u2500 *\/\r\n  #temoignages {\r\n    padding: 6rem 4rem;\r\n    background: var(--gris);\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  #temoignages::before {\r\n    content: '\"';\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 20rem;\r\n    color: rgba(222,15,63,0.06);\r\n    position: absolute;\r\n    top: -3rem;\r\n    left: 2rem;\r\n    line-height: 1;\r\n    pointer-events: none;\r\n  }\r\n  .temoignages-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 1.5rem;\r\n    margin-top: 3rem;\r\n  }\r\n  .temo-card {\r\n    background: white;\r\n    padding: 2.5rem;\r\n    position: relative;\r\n    border-bottom: 3px solid transparent;\r\n    transition: border-color 0.3s, transform 0.2s;\r\n  }\r\n  .temo-card:hover { border-color: var(--rouge); transform: translateY(-4px); }\r\n  .temo-quote {\r\n    font-family: 'Playfair Display', serif;\r\n    font-style: italic;\r\n    font-size: 1rem;\r\n    line-height: 1.7;\r\n    color: var(--bleu);\r\n    margin-bottom: 2rem;\r\n  }\r\n  .temo-author {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n  }\r\n  .temo-avatar {\r\n    width: 44px; height: 44px;\r\n    border-radius: 50%;\r\n    background: var(--bleu);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: white;\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1rem;\r\n    font-weight: 700;\r\n    flex-shrink: 0;\r\n  }\r\n  .temo-name { font-weight: 600; font-size: 0.88rem; color: var(--bleu); }\r\n  .temo-role { font-size: 0.75rem; color: #888; font-family: 'Space Mono', monospace; }\r\n  .temo-prog {\r\n    position: absolute;\r\n    top: 1.5rem;\r\n    right: 1.5rem;\r\n    background: var(--rouge);\r\n    color: white;\r\n    font-size: 0.62rem;\r\n    padding: 0.25rem 0.6rem;\r\n    font-family: 'Space Mono', monospace;\r\n    letter-spacing: 1px;\r\n    text-transform: uppercase;\r\n  }\r\n\r\n  \/* \u2500\u2500 ANNUAIRE \u2500\u2500 *\/\r\n  #annuaire {\r\n    padding: 6rem 4rem;\r\n    background: var(--blanc);\r\n    display: grid;\r\n    grid-template-columns: 1fr 2fr;\r\n    gap: 5rem;\r\n    align-items: start;\r\n  }\r\n  .annuaire-intro .mission-label { margin-bottom: 1rem; }\r\n  .annuaire-desc { font-size: 0.95rem; line-height: 1.8; color: #555; margin: 1.5rem 0 2rem; }\r\n  .annuaire-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 1.5rem;\r\n  }\r\n  .femme-card {\r\n    position: relative;\r\n    aspect-ratio: 3\/4;\r\n    background: var(--gris);\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    transition: transform 0.3s;\r\n  }\r\n  .femme-card:hover { transform: scale(1.02); }\r\n  .femme-card-img {\r\n    width: 100%; height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 4rem;\r\n    background: linear-gradient(135deg, var(--bleu), var(--bleu-clair));\r\n    font-family: 'Playfair Display', serif;\r\n    color: rgba(255,255,255,0.3);\r\n    font-weight: 900;\r\n  }\r\n  .femme-card-info {\r\n    position: absolute;\r\n    bottom: 0; left: 0; right: 0;\r\n    padding: 1rem;\r\n    background: linear-gradient(transparent, rgba(10,35,66,0.95));\r\n    color: white;\r\n  }\r\n  .femme-card-name { font-weight: 600; font-size: 0.85rem; line-height: 1.2; }\r\n  .femme-card-role { font-size: 0.7rem; color: var(--bleu-clair); font-family: 'Space Mono', monospace; margin-top: 0.2rem; }\r\n\r\n  \/* \u2500\u2500 PUBLICATIONS \u2500\u2500 *\/\r\n  #publications {\r\n    padding: 6rem 4rem;\r\n    background: var(--bleu);\r\n  }\r\n  .pub-grid {\r\n    display: grid;\r\n    grid-template-columns: 2fr 1fr 1fr;\r\n    gap: 1.5rem;\r\n    margin-top: 3rem;\r\n  }\r\n  .pub-card {\r\n    background: rgba(255,255,255,0.05);\r\n    border: 1px solid rgba(255,255,255,0.1);\r\n    overflow: hidden;\r\n    transition: background 0.3s;\r\n    cursor: pointer;\r\n  }\r\n  .pub-card:hover { background: rgba(255,255,255,0.1); }\r\n  .pub-card-img {\r\n    height: 180px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 3rem;\r\n  }\r\n  .pub-card.featured .pub-card-img { height: 260px; }\r\n  .pub-card-img.rouge { background: var(--rouge); }\r\n  .pub-card-img.or { background: var(--or); }\r\n  .pub-card-img.bleu-clair { background: var(--bleu-clair); }\r\n  .pub-body { padding: 1.5rem; }\r\n  .pub-cat {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.62rem;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: var(--bleu-clair);\r\n    margin-bottom: 0.6rem;\r\n  }\r\n  .pub-title {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1rem;\r\n    font-weight: 700;\r\n    color: white;\r\n    line-height: 1.3;\r\n    margin-bottom: 0.8rem;\r\n  }\r\n  .pub-card.featured .pub-title { font-size: 1.3rem; }\r\n  .pub-excerpt { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.6; }\r\n\r\n  \/* \u2500\u2500 VID\u00c9O \u2500\u2500 *\/\r\n  #video-section {\r\n    padding: 5rem 4rem;\r\n    background: var(--gris);\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 4rem;\r\n    align-items: center;\r\n  }\r\n  .video-frame {\r\n    aspect-ratio: 16\/9;\r\n    background: var(--bleu);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    position: relative;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n  }\r\n  .video-frame::after {\r\n    content: '\u25b6';\r\n    font-size: 3rem;\r\n    color: white;\r\n    background: var(--rouge);\r\n    width: 72px; height: 72px;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding-left: 6px;\r\n    transition: transform 0.2s;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n  .video-frame:hover::after { transform: scale(1.1); }\r\n  .video-bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(135deg, var(--bleu), rgba(123,183,224,0.3));\r\n    opacity: 0.8;\r\n  }\r\n  .video-desc { font-size: 0.9rem; line-height: 1.8; color: #555; margin: 1rem 0 1.5rem; }\r\n  .video-playlist {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.8rem;\r\n    margin-top: 1.5rem;\r\n  }\r\n  .vp-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    padding: 0.8rem;\r\n    background: white;\r\n    cursor: pointer;\r\n    transition: background 0.2s;\r\n    border-left: 3px solid transparent;\r\n  }\r\n  .vp-item:hover, .vp-item.active { border-left-color: var(--rouge); background: var(--blanc); }\r\n  .vp-num {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.7rem;\r\n    color: var(--rouge);\r\n    font-weight: 700;\r\n    width: 24px;\r\n    flex-shrink: 0;\r\n  }\r\n  .vp-title { font-size: 0.85rem; font-weight: 500; color: var(--bleu); }\r\n\r\n  \/* \u2500\u2500 NEWSLETTER \u2500\u2500 *\/\r\n  #newsletter {\r\n    background: var(--rouge);\r\n    padding: 5rem 4rem;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 4rem;\r\n    align-items: center;\r\n    position: relative;\r\n    overflow: hidden;\r\n  }\r\n  #newsletter::before {\r\n    content: 'F\u00d2K YO LA';\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 8rem;\r\n    font-weight: 900;\r\n    color: rgba(255,255,255,0.05);\r\n    position: absolute;\r\n    right: -2rem;\r\n    bottom: -1rem;\r\n    white-space: nowrap;\r\n    pointer-events: none;\r\n  }\r\n  .nl-h2 {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 2.2rem;\r\n    font-weight: 900;\r\n    color: white;\r\n    line-height: 1.1;\r\n    margin-bottom: 1rem;\r\n  }\r\n  .nl-sub { font-size: 0.95rem; color: rgba(255,255,255,0.75); line-height: 1.7; }\r\n  .nl-form {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n  .nl-input {\r\n    background: rgba(255,255,255,0.15);\r\n    border: 1.5px solid rgba(255,255,255,0.3);\r\n    color: white;\r\n    padding: 1rem 1.5rem;\r\n    font-size: 1rem;\r\n    font-family: 'DM Sans', sans-serif;\r\n    outline: none;\r\n    transition: border-color 0.2s;\r\n  }\r\n  .nl-input::placeholder { color: rgba(255,255,255,0.5); }\r\n  .nl-input:focus { border-color: white; }\r\n  .nl-btn {\r\n    background: white;\r\n    color: var(--rouge);\r\n    border: none;\r\n    padding: 1rem 2rem;\r\n    font-size: 0.9rem;\r\n    font-weight: 700;\r\n    font-family: 'DM Sans', sans-serif;\r\n    cursor: pointer;\r\n    letter-spacing: 0.5px;\r\n    transition: background 0.2s;\r\n    text-transform: uppercase;\r\n    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);\r\n  }\r\n  .nl-btn:hover { background: var(--gris); }\r\n  .nl-reseaux {\r\n    display: flex;\r\n    gap: 0.8rem;\r\n    margin-top: 1rem;\r\n  }\r\n  .rs-btn {\r\n    color: white;\r\n    border: 1.5px solid rgba(255,255,255,0.3);\r\n    padding: 0.5rem 1rem;\r\n    font-size: 0.75rem;\r\n    font-family: 'Space Mono', monospace;\r\n    text-decoration: none;\r\n    transition: background 0.2s;\r\n  }\r\n  .rs-btn:hover { background: rgba(255,255,255,0.15); }\r\n\r\n  \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n  footer {\r\n    background: #060e1c;\r\n    color: rgba(255,255,255,0.6);\r\n    padding: 3rem 4rem;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr 1fr 1fr;\r\n    gap: 2rem;\r\n    border-top: 2px solid var(--rouge);\r\n  }\r\n  .footer-brand .nav-logo { font-size: 1.2rem; display: block; margin-bottom: 0.8rem; }\r\n  .footer-desc { font-size: 0.8rem; line-height: 1.7; }\r\n  .footer-col h4 {\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.65rem;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    color: white;\r\n    margin-bottom: 1rem;\r\n  }\r\n  .footer-col ul { list-style: none; }\r\n  .footer-col ul li { margin-bottom: 0.5rem; }\r\n  .footer-col ul a {\r\n    color: rgba(255,255,255,0.5);\r\n    text-decoration: none;\r\n    font-size: 0.82rem;\r\n    transition: color 0.2s;\r\n  }\r\n  .footer-col ul a:hover { color: var(--bleu-clair); }\r\n  .footer-bottom {\r\n    background: #040a13;\r\n    padding: 1.2rem 4rem;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    font-size: 0.75rem;\r\n    color: rgba(255,255,255,0.3);\r\n    font-family: 'Space Mono', monospace;\r\n  }\r\n  .footer-bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }\r\n\r\n  \/* \u2500\u2500 SCROLL ANIMATIONS \u2500\u2500 *\/\r\n  .reveal {\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: opacity 0.7s ease, transform 0.7s ease;\r\n  }\r\n  .reveal.visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n  .reveal-delay-1 { transition-delay: 0.1s; }\r\n  .reveal-delay-2 { transition-delay: 0.2s; }\r\n  .reveal-delay-3 { transition-delay: 0.3s; }\r\n\r\n  \/* \u2500\u2500 ANNOTATION OVERLAY (mockup only) \u2500\u2500 *\/\r\n  .annotation {\r\n    display: inline-block;\r\n    background: #fffacd;\r\n    color: #7a6000;\r\n    font-size: 0.65rem;\r\n    font-family: 'Space Mono', monospace;\r\n    padding: 0.15rem 0.5rem;\r\n    border: 1px dashed #c8a000;\r\n    border-radius: 2px;\r\n    margin-left: 0.5rem;\r\n    vertical-align: middle;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* \u2500\u2500 MOCKUP BANNER \u2500\u2500 *\/\r\n  .mockup-banner {\r\n    background: #fffacd;\r\n    border-bottom: 2px dashed #c8a000;\r\n    padding: 0.6rem 2rem;\r\n    text-align: center;\r\n    font-family: 'Space Mono', monospace;\r\n    font-size: 0.72rem;\r\n    color: #7a6000;\r\n    letter-spacing: 1px;\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 200;\r\n  }\r\n\r\n  \/* counter animation *\/\r\n  @keyframes countUp {\r\n    from { opacity: 0; transform: translateY(10px); }\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n  .stat-number { animation: countUp 0.8s ease forwards; }\r\n\r\n\r\n\r\n\r\n<!-- Mockup notice -->\r\n<div class=\"mockup-banner\">\r\n  \u26a0 MOCKUP \u2014 Proposition de refonte fokyola.ht \u2014 Les images sont des placeholders | Ruth Valmyr \/ FOKYOLA 2026\r\n<\/div>\r\n\r\n<!-- NAV -->\r\n<nav>\r\n  <div class=\"nav-logo\">F\u00f2k <span>Yo<\/span> La<\/div>\r\n  <ul class=\"nav-links\">\r\n    <li><a href=\"#mission\">La campagne<\/a><\/li>\r\n    <li><a href=\"#programmes\">Programmes<\/a><\/li>\r\n    <li><a href=\"#annuaire\">Leadership<\/a><\/li>\r\n    <li><a href=\"#publications\">Publications<\/a><\/li>\r\n    <li><a href=\"#newsletter\" class=\"nav-cta\">Rejoindre<\/a><\/li>\r\n  <\/ul>\r\n<\/nav>\r\n\r\n<!-- HERO -->\r\n<section id=\"hero\">\r\n  <div class=\"hero-left\">\r\n    <div class=\"hero-eyebrow\">Mouvement f\u00e9ministe \u00b7 Ha\u00efti<\/div>\r\n    <h1 class=\"hero-h1\">\r\n      Pou sa chanje,<br>f\u00f2k <span class=\"accent\">fanm<\/span><br>yo la.\r\n    <\/h1>\r\n    <p class=\"hero-tagline\">\r\n      Campagne pour l'inclusion des femmes en politique ha\u00eftienne. Former les leaders d'aujourd'hui, propulser celles de demain.\r\n    <\/p>\r\n    <div class=\"hero-ctas\">\r\n      <a href=\"#mission\" class=\"btn-primary\">D\u00e9couvrir la campagne<\/a>\r\n      <a href=\"#programmes\" class=\"btn-outline\">Rejoindre Nou Kapab<\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"hero-right\">\r\n    <div class=\"hero-img-grid\">\r\n      <div class=\"cell-1\"><span class=\"hero-img-placeholder\">Photo participantes<br>Nou Kapab<\/span><\/div>\r\n      <div class=\"cell-2\"><span class=\"hero-img-placeholder\">Portrait<br>leader<\/span><\/div>\r\n      <div class=\"cell-3\"><span class=\"hero-img-placeholder\">Atelier<br>terrain<\/span><\/div>\r\n    <\/div>\r\n    <div class=\"hero-overlay-stat\">\r\n      <div class=\"big\">2,7%<\/div>\r\n      <div class=\"small\">Seulement 2,7% de<br>la derni\u00e8re l\u00e9gislature<br>\u00e9taient des femmes<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- STATS BAND -->\r\n<section id=\"stats\">\r\n  <div class=\"stat-item reveal\">\r\n    <span class=\"stat-number\">52%<\/span>\r\n    <span class=\"stat-label\">De femmes<br>en Ha\u00efti<\/span>\r\n  <\/div>\r\n  <div class=\"stat-item reveal reveal-delay-1\">\r\n    <span class=\"stat-number\">2,7%<\/span>\r\n    <span class=\"stat-label\">Du Parlement<br>lors de la derni\u00e8re l\u00e9gislature<\/span>\r\n  <\/div>\r\n  <div class=\"stat-item reveal reveal-delay-2\">\r\n    <span class=\"stat-number\">10<\/span>\r\n    <span class=\"stat-label\">D\u00e9partements<br>touch\u00e9s par la campagne<\/span>\r\n  <\/div>\r\n  <div class=\"stat-item reveal reveal-delay-3\">\r\n    <span class=\"stat-number\">186<sup style=\"font-size:1.5rem\">e<\/sup><\/span>\r\n    <span class=\"stat-label\">Ha\u00efti sur 193 pays<br>en repr\u00e9sentation f\u00e9minine<\/span>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- MISSION -->\r\n<section id=\"mission\">\r\n  <div class=\"reveal\">\r\n    <div class=\"mission-label\">Notre mission<\/div>\r\n    <h2 class=\"mission-h2\">Un mouvement<br>pour que les<br><em>femmes soient l\u00e0.<\/em><\/h2>\r\n    <a href=\"https:\/\/fokyola.ht\/campagne\/\" class=\"btn-primary\" style=\"margin-top:2rem\">La campagne en d\u00e9tail<\/a>\r\n  <\/div>\r\n  <div>\r\n    <p class=\"mission-text reveal\">\r\n      Ha\u00efti a adh\u00e9r\u00e9 \u00e0 la Convention CEDEF en 1981 et \u00e0 la Plateforme de Beijing en 1995. Pourtant, les femmes restent massivement exclues des espaces politiques. F\u00f2k Yo La est la campagne qui dit : <strong>\u00e7a suffit.<\/strong>\r\n    <\/p>\r\n    <blockquote class=\"mission-quote reveal reveal-delay-1\">\r\n      \u00ab L'\u00c9tat ha\u00eftien a l'obligation d'agir pour que les femmes soient \u00e9quitablement repr\u00e9sent\u00e9es \u00e0 tous les niveaux de la vie nationale. \u00bb\r\n    <\/blockquote>\r\n    <p class=\"mission-text reveal reveal-delay-2\" style=\"margin-top:1.5rem\">\r\n      Port\u00e9e par la Fondation D\u00e9clic avec le soutien de l'Union europ\u00e9enne et de la Fondation Kellogg, F\u00f2k Yo La op\u00e8re sur deux fronts : sensibiliser le public et former concr\u00e8tement une nouvelle g\u00e9n\u00e9ration de femmes leaders.\r\n    <\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- PROGRAMMES -->\r\n<section id=\"programmes\">\r\n  <div class=\"section-header\">\r\n    <div>\r\n      <div class=\"section-label\">Programmes actifs<\/div>\r\n      <h2 class=\"section-h2\">Deux leviers.<br>Une m\u00eame mission.<\/h2>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"programmes-grid\">\r\n\r\n    <!-- Nou Kapab -->\r\n    <div class=\"prog-card reveal\">\r\n      <span class=\"prog-tag\">Programme phare \u00b7 Actif 2025<\/span>\r\n      <div class=\"prog-name\">Nou Kapab<\/div>\r\n      <p class=\"prog-desc\">\r\n        Incubateur de leadership citoyen pour les jeunes femmes ha\u00eftiennes. Un parcours de 18 mois qui combine r\u00e9sidence intensive, mentorat, projets communautaires et ancrage en clubs locaux.\r\n      <\/p>\r\n      <div class=\"prog-stats\">\r\n        <div class=\"prog-stat\"><span class=\"n\">3<\/span><span class=\"l\">Semaines de r\u00e9sidence<\/span><\/div>\r\n        <div class=\"prog-stat\"><span class=\"n\">12<\/span><span class=\"l\">Mois de suivi<\/span><\/div>\r\n        <div class=\"prog-stat\"><span class=\"n\">10<\/span><span class=\"l\">D\u00e9partements<\/span><\/div>\r\n      <\/div>\r\n      <div class=\"prog-pillars\">\r\n        <span class=\"pillar-tag\">Leadership &amp; plaidoyer<\/span>\r\n        <span class=\"pillar-tag\">Projets communautaires<\/span>\r\n        <span class=\"pillar-tag\">\u00c9ducation civique<\/span>\r\n        <span class=\"pillar-tag\">Mentorat &amp; r\u00e9seaux<\/span>\r\n      <\/div>\r\n      <a href=\"https:\/\/noukapab.fokyola.ht\" class=\"prog-link\">D\u00e9couvrir Nou Kapab<\/a>\r\n    <\/div>\r\n\r\n    <!-- Nou La! -->\r\n    <div class=\"prog-card accent reveal reveal-delay-1\">\r\n      <span class=\"prog-tag\">Programme \u00b7 Conf\u00e9rences &amp; formation<\/span>\r\n      <div class=\"prog-name\">Nou La !<\/div>\r\n      <p class=\"prog-desc\">\r\n        Conf\u00e9rences itin\u00e9rantes, formations en leadership politique et ateliers de th\u00e9\u00e2tre-forum \"Mwen, fanm kandidat\". Un programme d\u00e9ploy\u00e9 dans tout le pays pour cr\u00e9er des espaces de parole et d'action.\r\n      <\/p>\r\n      <div class=\"prog-stats\">\r\n        <div class=\"prog-stat\"><span class=\"n\">+1 000<\/span><span class=\"l\">Participantes<\/span><\/div>\r\n        <div class=\"prog-stat\"><span class=\"n\">10<\/span><span class=\"l\">Villes touch\u00e9es<\/span><\/div>\r\n      <\/div>\r\n      <div class=\"prog-pillars\">\r\n        <span class=\"pillar-tag\">Conf\u00e9rences publiques<\/span>\r\n        <span class=\"pillar-tag\">Formation politique<\/span>\r\n        <span class=\"pillar-tag\">Th\u00e9\u00e2tre-forum<\/span>\r\n        <span class=\"pillar-tag\">Happenings de rue<\/span>\r\n      <\/div>\r\n      <a href=\"https:\/\/fokyola.ht\/noula\/\" class=\"prog-link\">D\u00e9couvrir Nou La !<\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- T\u00c9MOIGNAGES -->\r\n<section id=\"temoignages\">\r\n  <div class=\"section-header\" style=\"margin-bottom:0\">\r\n    <div>\r\n      <div class=\"section-label\" style=\"color:var(--rouge)\">Elles l'ont v\u00e9cu<\/div>\r\n      <h2 class=\"section-h2\" style=\"color:var(--bleu)\">La parole aux participantes<\/h2>\r\n    <\/div>\r\n    <a href=\"https:\/\/noukapab.fokyola.ht\" class=\"btn-primary\">Voir tous les t\u00e9moignages<\/a>\r\n  <\/div>\r\n  <div class=\"temoignages-grid\">\r\n    <div class=\"temo-card reveal\">\r\n      <span class=\"temo-prog\">Nou Kapab<\/span>\r\n      <p class=\"temo-quote\">\u00ab L'incubateur m'a donn\u00e9 la confiance pour lancer mon projet. Je sais maintenant que ma voix compte. \u00bb<\/p>\r\n      <div class=\"temo-author\">\r\n        <div class=\"temo-avatar\">EA<\/div>\r\n        <div>\r\n          <div class=\"temo-name\">Esa\u00efca Alt\u00e9ma<\/div>\r\n          <div class=\"temo-role\">16 ans \u00b7 Participante cohorte 2025<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"temo-card reveal reveal-delay-1\">\r\n      <span class=\"temo-prog\">Nou Kapab<\/span>\r\n      <p class=\"temo-quote\">\u00ab Nou Kapab a chang\u00e9 ma mani\u00e8re de voir mon r\u00f4le dans ma communaut\u00e9. Je me sens capable d'agir. \u00bb<\/p>\r\n      <div class=\"temo-author\">\r\n        <div class=\"temo-avatar\">ML<\/div>\r\n        <div>\r\n          <div class=\"temo-name\">May Lexpennecia Pierre<\/div>\r\n          <div class=\"temo-role\">16 ans \u00b7 Participante cohorte 2025<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"temo-card reveal reveal-delay-2\">\r\n      <span class=\"temo-prog\">Nou Kapab<\/span>\r\n      <p class=\"temo-quote\">\u00ab Gr\u00e2ce au programme, j'ai acquis les outils pour mobiliser d'autres jeunes autour de moi dans ma localit\u00e9. \u00bb<\/p>\r\n      <div class=\"temo-author\">\r\n        <div class=\"temo-avatar\">AB<\/div>\r\n        <div>\r\n          <div class=\"temo-name\">Abigail MJ Pierre-Louis<\/div>\r\n          <div class=\"temo-role\">15 ans \u00b7 Participante cohorte 2025<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ANNUAIRE -->\r\n<section id=\"annuaire\">\r\n  <div>\r\n    <div class=\"mission-label\">Base de donn\u00e9es<\/div>\r\n    <h2 class=\"mission-h2\" style=\"font-size:2rem\">Le leadership<br>au <em>f\u00e9minin<\/em><\/h2>\r\n    <p class=\"annuaire-desc\">\r\n      L'Annuaire F\u00f2k Yo La recense des femmes remarquables qui exercent un leadership dans tous les secteurs de la vie ha\u00eftienne. Une ressource unique, une source d'inspiration.\r\n    <\/p>\r\n    <a href=\"https:\/\/fokyola.ht\/annuaire\/\" class=\"btn-primary\">Acc\u00e9der \u00e0 l'annuaire complet<\/a>\r\n  <\/div>\r\n  <div>\r\n    <div class=\"annuaire-grid reveal\">\r\n      <div class=\"femme-card\">\r\n        <div class=\"femme-card-img\">F<\/div>\r\n        <div class=\"femme-card-info\">\r\n          <div class=\"femme-card-name\">Femme leader<\/div>\r\n          <div class=\"femme-card-role\">Politique \u00b7 Port-au-Prince<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"femme-card reveal-delay-1\">\r\n        <div class=\"femme-card-img\" style=\"background:linear-gradient(135deg,#7bb7e0,#de0f3f)\">F<\/div>\r\n        <div class=\"femme-card-info\">\r\n          <div class=\"femme-card-name\">Femme leader<\/div>\r\n          <div class=\"femme-card-role\">Soci\u00e9t\u00e9 civile \u00b7 Nord<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"femme-card reveal-delay-2\">\r\n        <div class=\"femme-card-img\" style=\"background:linear-gradient(135deg,#de0f3f,#0a2342)\">F<\/div>\r\n        <div class=\"femme-card-info\">\r\n          <div class=\"femme-card-name\">Femme leader<\/div>\r\n          <div class=\"femme-card-role\">\u00c9ducation \u00b7 Sud<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <p style=\"margin-top:1rem;font-size:0.78rem;color:#888;,monospace\">\r\n      \u2192 Les profils r\u00e9els seront int\u00e9gr\u00e9s depuis l'annuaire existant\r\n    <\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- PUBLICATIONS -->\r\n<section id=\"publications\">\r\n  <div class=\"section-header\">\r\n    <div>\r\n      <div class=\"section-label\">Ce qu'on produit<\/div>\r\n      <h2 class=\"section-h2\">Publications &amp;<br>ressources<\/h2>\r\n    <\/div>\r\n    <a href=\"https:\/\/fokyola.ht\/blog\/\" class=\"btn-outline\" style=\"padding:0.7rem 1.5rem;font-size:0.82rem\">Tout voir \u2192<\/a>\r\n  <\/div>\r\n  <div class=\"pub-grid\">\r\n    <div class=\"pub-card featured reveal\">\r\n      <div class=\"pub-card-img rouge\">\ud83d\udccb<\/div>\r\n      <div class=\"pub-body\">\r\n        <div class=\"pub-cat\">Publication phare \u00b7 2026<\/div>\r\n        <div class=\"pub-title\">Livre blanc 2026 \u2014 Femmes et politique en Ha\u00efti<\/div>\r\n        <div class=\"pub-excerpt\">Analyse approfondie de la participation politique des femmes ha\u00eftiennes, des obstacles syst\u00e9miques et des recommandations concr\u00e8tes pour 2026.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"pub-card reveal reveal-delay-1\">\r\n      <div class=\"pub-card-img or\">\ud83d\udcf0<\/div>\r\n      <div class=\"pub-body\">\r\n        <div class=\"pub-cat\">S\u00e9rie documentaire<\/div>\r\n        <div class=\"pub-title\">Fanm pou Chanjman<\/div>\r\n        <div class=\"pub-excerpt\">Portraits de femmes engag\u00e9es qui changent Ha\u00efti depuis leur communaut\u00e9.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"pub-card reveal reveal-delay-2\">\r\n      <div class=\"pub-card-img bleu-clair\">\ud83c\udf99\ufe0f<\/div>\r\n      <div class=\"pub-body\">\r\n        <div class=\"pub-cat\">Podcast vid\u00e9o \u00b7 nouveau<\/div>\r\n        <div class=\"pub-title\">Koze Fanm, Dwa, Politik<\/div>\r\n        <div class=\"pub-excerpt\">La nouvelle s\u00e9rie podcast de FOKYOLA sur les droits des femmes et la politique ha\u00eftienne.<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- VID\u00c9O -->\r\n<section id=\"video-section\">\r\n  <div class=\"video-frame reveal\">\r\n    <div class=\"video-bg\"><\/div>\r\n  <\/div>\r\n  <div>\r\n    <div class=\"mission-label\">Ateliers en format vid\u00e9o<\/div>\r\n    <h2 class=\"mission-h2\" style=\"font-size:2rem;margin-bottom:1rem\">Voir la campagne<br>en action<\/h2>\r\n    <p class=\"video-desc\">\r\n      Des capsules courtes pour comprendre les enjeux, les t\u00e9moignages et les actions du mouvement F\u00f2k Yo La sur le terrain.\r\n    <\/p>\r\n    <div class=\"video-playlist\">\r\n      <div class=\"vp-item active\">\r\n        <span class=\"vp-num\">01<\/span>\r\n        <span class=\"vp-title\">Fanm yo pa la (ase)<\/span>\r\n      <\/div>\r\n      <div class=\"vp-item\">\r\n        <span class=\"vp-num\">02<\/span>\r\n        <span class=\"vp-title\">Fanm yo kapab<\/span>\r\n      <\/div>\r\n      <div class=\"vp-item\">\r\n        <span class=\"vp-num\">03<\/span>\r\n        <span class=\"vp-title\">Fanm yo dwe la<\/span>\r\n      <\/div>\r\n    <\/div>\r\n    <a href=\"https:\/\/fokyola.ht\/campagne\/\" class=\"prog-link\" style=\"color:var(--rouge);margin-top:1.5rem\">Voir toutes les ressources<\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- NEWSLETTER -->\r\n<section id=\"newsletter\">\r\n  <div class=\"reveal\">\r\n    <h2 class=\"nl-h2\">Le changement v\u00e9ritable passe par l\u00e0.<\/h2>\r\n    <p class=\"nl-sub\">Restez inform\u00e9\u00b7e des actions, publications et \u00e9v\u00e9nements du mouvement F\u00f2k Yo La.<\/p>\r\n    <div class=\"nl-reseaux\">\r\n      <a href=\"https:\/\/facebook.com\/fokyola\" class=\"rs-btn\">Facebook<\/a>\r\n      <a href=\"https:\/\/instagram.com\/fokyola\" class=\"rs-btn\">Instagram<\/a>\r\n      <a href=\"https:\/\/www.tiktok.com\/@fokyola\" class=\"rs-btn\">TikTok<\/a>\r\n      <a href=\"https:\/\/twitter.com\/fokyola\" class=\"rs-btn\">Twitter<\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"nl-form reveal reveal-delay-1\">\r\n    \r\n    \r\n    <button class=\"nl-btn\">S'inscrire \u00e0 la lettre d'info<\/button>\r\n    <p style=\"font-size:0.72rem;,monospace\">Pas de spam. D\u00e9sinscription possible \u00e0 tout moment.<\/p>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- FOOTER -->\r\n<footer>\r\n  <div class=\"footer-brand\">\r\n    <span class=\"nav-logo\">F\u00f2k <span>Yo<\/span> La<\/span>\r\n    <p class=\"footer-desc\">Campagne pour l'inclusion des femmes ha\u00eftiennes en politique. Un programme de la Fondation D\u00e9clic, avec le soutien de l'Union europ\u00e9enne et de la Fondation Kellogg.<\/p>\r\n    <p style=\"margin-top:1rem;font-size:0.75rem\">info@fokyola.ht<\/p>\r\n  <\/div>\r\n  <div class=\"footer-col\">\r\n    <h4>La campagne<\/h4>\r\n    <ul>\r\n      <li><a href=\"#\">\u00c0 propos<\/a><\/li>\r\n      <li><a href=\"#\">Questions \u2013 R\u00e9ponses<\/a><\/li>\r\n      <li><a href=\"#\">\u00c9v\u00e9nements<\/a><\/li>\r\n      <li><a href=\"#\">Contactez-nous<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div class=\"footer-col\">\r\n    <h4>Programmes<\/h4>\r\n    <ul>\r\n      <li><a href=\"https:\/\/noukapab.fokyola.ht\">Nou Kapab<\/a><\/li>\r\n      <li><a href=\"#\">L'incubateur<\/a><\/li>\r\n      <li><a href=\"#\">Nou La !<\/a><\/li>\r\n      <li><a href=\"#\">Conf\u00e9rences<\/a><\/li>\r\n      <li><a href=\"#\">Formation<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n  <div class=\"footer-col\">\r\n    <h4>Ressources<\/h4>\r\n    <ul>\r\n      <li><a href=\"#\">Annuaire F\u00f2k Yo La<\/a><\/li>\r\n      <li><a href=\"#\">Livre blanc 2026<\/a><\/li>\r\n      <li><a href=\"#\">Fanm pou Chanjman<\/a><\/li>\r\n      <li><a href=\"#\">Revue de presse<\/a><\/li>\r\n      <li><a href=\"#\">Le blogue<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/footer>\r\n<div class=\"footer-bottom\">\r\n  <span>\u00a9 2026 Fondation D\u00e9clic \u00b7 Tous droits r\u00e9serv\u00e9s \u00b7 R\u00e9alisation M\u00e9tis<\/span>\r\n  <span><a href=\"#\">fokyola.ht<\/a><\/span>\r\n<\/div>\r\n\r\n\r\n  \/\/ Scroll reveal\r\n  const observer = new IntersectionObserver((entries) =&gt; {\r\n    entries.forEach(e =&gt; {\r\n      if (e.isIntersecting) {\r\n        e.target.classList.add('visible');\r\n      }\r\n    });\r\n  }, { threshold: 0.1 });\r\n\r\n  document.querySelectorAll('.reveal').forEach(el =&gt; observer.observe(el));\r\n\r\n  \/\/ Video playlist\r\n  document.querySelectorAll('.vp-item').forEach(item =&gt; {\r\n    item.addEventListener('click', () =&gt; {\r\n      document.querySelectorAll('.vp-item').forEach(i =&gt; i.classList.remove('active'));\r\n      item.classList.add('active');\r\n    });\r\n  });\r\n\r\n  \/\/ Stat counter animation\r\n  function animateCounters() {\r\n    document.querySelectorAll('.stat-number').forEach(el =&gt; {\r\n      el.style.animation = 'none';\r\n      el.offsetHeight; \/\/ reflow\r\n      el.style.animation = 'countUp 0.8s ease forwards';\r\n    });\r\n  }\r\n\r\n  const statsSection = document.querySelector('#stats');\r\n  const statsObserver = new IntersectionObserver((entries) =&gt; {\r\n    if (entries[0].isIntersecting) animateCounters();\r\n  }, { threshold: 0.5 });\r\n  statsObserver.observe(statsSection);\r\n\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":18,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5530","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fokyola.ht\/index.php?rest_route=\/wp\/v2\/pages\/5530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fokyola.ht\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fokyola.ht\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fokyola.ht\/index.php?rest_route=\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/fokyola.ht\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5530"}],"version-history":[{"count":4,"href":"https:\/\/fokyola.ht\/index.php?rest_route=\/wp\/v2\/pages\/5530\/revisions"}],"predecessor-version":[{"id":5534,"href":"https:\/\/fokyola.ht\/index.php?rest_route=\/wp\/v2\/pages\/5530\/revisions\/5534"}],"wp:attachment":[{"href":"https:\/\/fokyola.ht\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}