<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Réussir Ensemble — Élections ordinales ONMB 2026</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
--green:#1a7a41; --green-deep:#0f5a30; --green-ink:#0c3a22;
--orange:#e1601c; --orange-deep:#c44e12;
--paper:#fbfcf9; --cream:#f1f6ec; --cream-2:#e9f1e3;
--ink:#15231a; --muted:#5b6a5e; --line:rgba(12,58,34,.12);
--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:"Hanken Grotesk",sans-serif;color:var(--ink);background:var(--paper);
line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.archivo{font-family:"Archivo",sans-serif;line-height:1.04;letter-spacing:-.01em}
.serif{font-family:"Fraunces",serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.eyebrow{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--orange)}
/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.35s ease;padding:18px 0}
nav.scrolled{background:rgba(251,252,249,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding:11px 0}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:11px}
.logo .mark{flex:none}
.logo .lk{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.02em;color:var(--green);line-height:.9}
.logo .lk span{color:var(--green-deep)}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a{font-weight:600;font-size:.94rem;color:var(--ink);opacity:.82;transition:.2s;position:relative}
.navlinks a:hover{opacity:1;color:var(--green)}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:var(--orange);transition:.25s}
.navlinks a:hover::after{width:100%}
.nav-cta{background:var(--orange);color:#fff;padding:9px 18px;border-radius:30px;font-weight:700;font-size:.9rem;box-shadow:0 6px 16px rgba(225,96,28,.28);transition:.2s}
.nav-cta:hover{background:var(--orange-deep);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2.4px;background:var(--green-ink);border-radius:2px;transition:.3s}
/* ---------- HERO ---------- */
.hero{position:relative;padding:170px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
radial-gradient(60% 50% at 78% 8%,rgba(225,206,120,.35),transparent 60%),
radial-gradient(50% 45% at 12% 22%,rgba(26,122,65,.12),transparent 60%),
radial-gradient(40% 40% at 88% 75%,rgba(26,122,65,.10),transparent 60%),
linear-gradient(180deg,#eef4e8,#fbfcf9 70%)}
.hero .orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;z-index:-1}
.o1{width:130px;height:130px;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,0));top:90px;right:18%}
.o2{width:70px;height:70px;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,0));top:200px;right:9%}
.o3{width:90px;height:90px;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,0));top:60px;right:30%}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:7px 15px;border-radius:30px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);margin-bottom:24px}
.hero-eyebrow b{color:var(--orange)}
.hero h1{font-weight:900;text-transform:uppercase;font-size:clamp(2.9rem,7vw,5.4rem);color:var(--green)}
.hero h1 .e{display:block;color:var(--green-deep)}
.hero .slogan{margin-top:14px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--orange);font-size:clamp(.85rem,1.6vw,1.05rem)}
.hero .accroche{margin-top:24px;max-width:30em;font-size:1.18rem;color:#34453a}
.hero .accroche em{font-family:"Fraunces",serif;font-style:italic;color:var(--green-deep)}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:34px;font-weight:700;font-size:.98rem;transition:.22s;cursor:pointer;border:0}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(26,122,65,.26)}
.btn-primary:hover{background:var(--green-deep);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--green-deep);border:1.6px solid rgba(15,90,48,.3)}
.btn-ghost:hover{border-color:var(--green);background:rgba(26,122,65,.06)}
/* countdown card */
.countcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 24px 60px -28px rgba(12,58,34,.4);position:relative}
.countcard .vote-ico{position:absolute;top:-16px;right:22px;background:var(--orange);color:#fff;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(225,96,28,.35)}
.countcard h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.countcard .date{font-family:"Archivo",sans-serif;font-weight:900;font-size:2rem;color:var(--green-deep);margin:6px 0 2px}
.countcard .date b{color:var(--orange)}
.countcard .hours{font-size:.95rem;color:var(--muted);margin-bottom:18px}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.cd .u{background:var(--cream);border-radius:12px;padding:12px 4px}
.cd .n{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.7rem;color:var(--green);line-height:1}
.cd .l{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}
/* ---------- DIVIDERS ---------- */
.divider{line-height:0;position:relative;margin-top:-1px}
.divider svg{width:100%;height:90px;display:block}
.divider .d-line{stroke:var(--orange);stroke-width:3}
/* ---------- SECTION SHELL ---------- */
section{position:relative}
.sec-pad{padding:78px 0}
.sec-head{max-width:36em;margin-bottom:46px}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;color:var(--green-ink)}
.sec-head p{margin-top:16px;font-size:1.1rem;color:var(--muted)}
/* ---------- VISION ---------- */
#vision{background:var(--paper)}
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.vcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px}
.vcard .tag{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;margin-bottom:14px}
.vcard.constat .tag{color:var(--orange)}
.vcard.engage{background:var(--green-ink);color:#eaf3ea;border-color:transparent}
.vcard.engage .tag{color:#9fd9b3}
.vcard p{font-size:1.06rem}
.pullquote{margin:46px auto 0;max-width:24em;text-align:center}
.pullquote p{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.22;color:var(--green-deep)}
.pullquote .rule{width:54px;height:3px;background:var(--orange);margin:22px auto 0;border-radius:3px}
/* ---------- PROGRAMME ---------- */
#programme{background:var(--cream)}
.axis{display:grid;grid-template-columns:auto 1fr;gap:34px;padding:42px 0;border-top:1px solid var(--line)}
.axis:first-of-type{border-top:0}
.axis .num{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(3.2rem,8vw,6rem);color:transparent;-webkit-text-stroke:2px var(--green);line-height:.8}
.axis h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--green-ink)}
.axis .why{font-family:"Fraunces",serif;font-style:italic;color:var(--orange-deep);font-size:1.1rem;margin:10px 0 22px;max-width:40em}
.eng-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.eng-list li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:1rem}
.eng-list li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--orange);margin-top:9px}
/* ---------- PLAN ---------- */
#plan{background:var(--paper)}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.tl{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 26px;position:relative;overflow:hidden}
.tl::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--green)}
.tl.first::before{background:var(--orange)}
.tl .step{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.5rem;color:var(--green-deep)}
.tl.first .step{color:var(--orange)}
.tl .lab{font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:3px 0 18px}
.tl ul{padding-left:0}
.tl li{list-style:none;font-size:.96rem;padding:9px 0 9px 22px;position:relative;border-top:1px dashed var(--line)}
.tl li:first-child{border-top:0}
.tl li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:50%;border:2px solid var(--green)}
.tl.first li::before{border-color:var(--orange)}
.digital{margin-top:26px;background:linear-gradient(120deg,var(--green-ink),var(--green-deep));color:#eaf3ea;border-radius:20px;padding:30px 34px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.digital h4{font-family:"Archivo",sans-serif;font-weight:800;color:#fff;font-size:1.2rem;margin-bottom:6px}
.digital p{color:#bfe0c9;max-width:34em}
.digital .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.digital .chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:6px 13px;border-radius:30px;font-size:.82rem}
/* ---------- EQUIPE ---------- */
#equipe{background:var(--cream)}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:48px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center}
.stat .n{font-family:"Archivo",sans-serif;font-weight:900;font-size:2rem;color:var(--green)}
.stat .l{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.3}
.grp-title{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;color:var(--orange);margin:38px 0 18px;display:flex;align-items:center;gap:14px}
.grp-title::after{content:"";flex:1;height:1px;background:var(--line)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cgrid.bureau{grid-template-columns:repeat(3,1fr)}
.cand{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;cursor:pointer;transition:.25s;text-align:center;position:relative}
.cand:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(12,58,34,.5);border-color:rgba(26,122,65,.4)}
.mono{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-family:"Archivo",sans-serif;font-weight:900;font-size:1.5rem;color:#fff;letter-spacing:.02em;position:relative}
.cand:nth-child(odd) .mono{background:linear-gradient(135deg,var(--green),var(--green-deep))}
.cand:nth-child(even) .mono{background:linear-gradient(135deg,var(--orange),var(--orange-deep))}
.cand .nom{font-family:"Archivo",sans-serif;font-weight:800;color:var(--green-ink);font-size:1.05rem}
.cand .pre{color:var(--muted);font-size:.92rem}
.cand .role{margin-top:9px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--orange)}
.cand .spec{margin-top:4px;font-size:.84rem;color:var(--muted)}
.cand .see{margin-top:13px;font-size:.78rem;font-weight:700;color:var(--green);opacity:0;transition:.25s}
.cand:hover .see{opacity:1}
.photo-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:26px;font-style:italic}
/* ---------- MODAL ---------- */
.overlay{position:fixed;inset:0;background:rgba(12,58,34,.55);backdrop-filter:blur(4px);z-index:120;display:none;align-items:center;justify-content:center;padding:24px}
.overlay.on{display:flex}
.modal{background:var(--paper);border-radius:24px;max-width:560px;width:100%;padding:0;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:pop .3s ease}
@keyframes pop{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal .top{background:linear-gradient(135deg,var(--green-ink),var(--green-deep));color:#fff;padding:30px 32px;position:relative}
.modal .top .mono{margin:0 0 14px}
.modal .close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.16);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;line-height:1}
.modal .top .nom{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.5rem}
.modal .top .meta{color:#bfe0c9;margin-top:6px;font-size:.95rem}
.modal .top .role{display:inline-block;margin-top:12px;background:var(--orange);color:#fff;padding:5px 14px;border-radius:30px;font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.modal .body{padding:28px 32px 34px}
.modal .blk{margin-bottom:20px}
.modal .blk h5{font-family:"Archivo",sans-serif;font-weight:800;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
.modal .blk.pain h5{color:var(--orange)}
.modal .blk.eng h5{color:var(--green)}
.modal .blk p{font-size:1.04rem;color:#2c3b30}
.modal .blk.pain p{font-family:"Fraunces",serif;font-style:italic;color:var(--green-ink)}
/* ---------- CHANGE ---------- */
#change{background:linear-gradient(160deg,var(--green-deep),var(--green-ink));color:#fff;padding:86px 0}
#change .eyebrow{color:#f3b98e}
#change h2{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;margin:14px 0 40px;max-width:18em}
.change-row{display:flex;flex-direction:column;gap:18px}
.cr{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.16)}
.cr .from{text-align:right;color:#9fd9b3;font-size:1.15rem}
.cr .to{font-family:"Fraunces",serif;font-size:1.4rem;color:#fff}
.cr .arr{color:var(--orange);font-size:1.5rem;font-weight:900}
/* ---------- VOTER ---------- */
#voter{background:var(--paper);padding:90px 0;text-align:center}
.voter-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;padding:54px 40px;position:relative;box-shadow:0 30px 70px -36px rgba(12,58,34,.45)}
.voter-card .eyebrow{display:block;margin-bottom:16px}
.voter-card h2{font-size:clamp(2rem,5vw,3.3rem);font-weight:900;color:var(--green-ink)}
.voter-card .big{font-family:"Archivo",sans-serif;font-weight:900;font-size:clamp(2rem,6vw,3.4rem);color:var(--orange);margin:24px 0 4px;letter-spacing:-.01em}
.voter-card .sub{font-size:1.15rem;color:var(--muted)}
.voter-card .slo{margin-top:30px;font-family:"Fraunces",serif;font-style:italic;font-size:1.3rem;color:var(--green-deep)}
/* ---------- FOOTER ---------- */
footer{background:var(--green-ink);color:#cfe3d4;padding:54px 0 30px}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.foot-logo .lk{font-family:"Archivo",sans-serif;font-weight:900;text-transform:uppercase;font-size:1.3rem;color:#fff;line-height:.9}
.foot-logo .lk span{color:#9fd9b3}
.foot-logo p{margin-top:10px;color:#9fb8a3;max-width:24em;font-size:.92rem}
.foot-col h6{font-family:"Archivo",sans-serif;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;color:#9fd9b3;margin-bottom:12px}
.foot-col a,.foot-col p{display:block;color:#cfe3d4;font-size:.92rem;margin-bottom:8px;opacity:.86}
.foot-col a:hover{opacity:1;color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;color:#8aa792}
/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.hero .reveal{transition-delay:var(--d,0s)}
/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
.hero-grid{grid-template-columns:1fr;gap:48px}
.vision-grid{grid-template-columns:1fr}
.timeline{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.cgrid,.cgrid.bureau{grid-template-columns:repeat(2,1fr)}
.eng-list{grid-template-columns:1fr}
.navlinks{display:none}
.navlinks.open{display:flex;position:absolute;top:64px;left:18px;right:18px;flex-direction:column;background:#fff;padding:18px;border-radius:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.3);gap:16px}
.burger{display:flex}
.nav-cta{display:none}
}
@media(max-width:540px){
.stats{grid-template-columns:1fr}
.cgrid,.cgrid.bureau{grid-template-columns:1fr}
.axis{grid-template-columns:1fr;gap:14px}
.cr{grid-template-columns:1fr;text-align:center;gap:8px}
.cr .from{text-align:center}
}
</style>
</head>
<body>
<!-- NAV -->
<nav id="nav">
<div class="wrap navbar">
<a href="#top" class="logo" aria-label="Réussir Ensemble">
<svg class="mark" width="34" height="34" viewBox="0 0 40 40" aria-hidden="true">
<path d="M4 27 C10 14 30 14 36 27" fill="none" stroke="#e1601c" stroke-width="4" stroke-linecap="round"/>
<circle cx="15" cy="17" r="4.4" fill="#1a7a41"/>
<circle cx="25" cy="17" r="4.4" fill="#e1601c"/>
</svg>
<span class="lk">Réussir<br><span>Ensemble</span></span>
</a>
<div class="navlinks" id="navlinks">
<a href="#vision">Notre vision</a>
<a href="#programme">Le programme</a>
<a href="#plan">Plan d'action</a>
<a href="#equipe">L'équipe</a>
<a href="#voter">Voter</a>
<a href="#voter" class="nav-cta">Le 7 juin</a>
</div>
<button class="burger" id="burger" aria-label="Menu"><span></span><span></span><span></span></button>
</div>
</nav>
<!-- HERO -->
<header class="hero" id="top">
<span class="orb o1"></span><span class="orb o2"></span><span class="orb o3"></span>
<div class="wrap hero-grid">
<div>
<span class="hero-eyebrow reveal" style="--d:.05s">Élections ordinales <b>•</b> Ordre National des Médecins du Bénin</span>
<h1 class="reveal" style="--d:.12s">Réussir<span class="e">Ensemble</span></h1>
<p class="slogan reveal" style="--d:.2s">L'Ordre par vous, pour vous et pour tous</p>
<p class="accroche reveal" style="--d:.28s">Un Ordre plus proche, plus transparent et plus utile — porté par quinze praticiens qui <em>vivent les mêmes réalités que vous.</em></p>
<div class="hero-cta reveal" style="--d:.36s">
<a href="#programme" class="btn btn-primary">Découvrir notre programme</a>
<a href="#equipe" class="btn btn-ghost">Rencontrer l'équipe</a>
</div>
</div>
<div class="reveal" style="--d:.32s">
<div class="countcard">
<div class="vote-ico" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4"/><rect x="3" y="4" width="18" height="16" rx="2"/></svg>
</div>
<h4>Scrutin en ligne</h4>
<p class="date">Dim. <b>07 juin</b> 2026</p>
<p class="hours">de 07h00 à 17h00</p>
<div class="cd" id="countdown">
<div class="u"><div class="n" id="cd-d">--</div><div class="l">Jours</div></div>
<div class="u"><div class="n" id="cd-h">--</div><div class="l">Heures</div></div>
<div class="u"><div class="n" id="cd-m">--</div><div class="l">Min</div></div>
<div class="u"><div class="n" id="cd-s">--</div><div class="l">Sec</div></div>
</div>
</div>
</div>
</div>
</header>
<div class="divider"><svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path class="d-fill" fill="#fbfcf9" d="M0,90 L0,40 Q720,-26 1440,40 L1440,90 Z"/><path class="d-line" fill="none" d="M0,40 Q720,-26 1440,40"/></svg></div>
<!-- VISION -->
<section id="vision" class="sec-pad">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Notre vision</span>
<h2>Un Ordre légitime, mais qui doit redevenir utile.</h2>
</div>
<div class="vision-grid">
<div class="vcard constat reveal">
<div class="tag">Le constat</div>
<p>Notre Ordre est une institution légitime. Mais beaucoup d'entre nous le vivent aujourd'hui comme lointain : peu d'informations, peu de dialogue, peu de soutien quand nous en avons besoin. Un écart s'est creusé entre les missions de l'Ordre et les attentes concrètes des médecins.</p>
</div>
<div class="vcard engage reveal">
<div class="tag">Notre engagement</div>
<p>Nous ne promettons pas de tout bouleverser. Nous nous engageons à rendre l'Ordre utile, présent et proche de ses membres. Quinze praticiens, du public et du privé, de plusieurs départements, qui ont vécu ces manques — et qui s'engagent à les corriger. Ensemble.</p>
</div>
</div>
<div class="pullquote reveal">
<p>« Passer d'un Ordre administratif à un Ordre au service des médecins. »</p>
<div class="rule"></div>
</div>
</div>
</section>
<div class="divider"><svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path class="d-fill" fill="#f1f6ec" d="M0,90 L0,40 Q720,-26 1440,40 L1440,90 Z"/><path class="d-line" fill="none" d="M0,40 Q720,-26 1440,40"/></svg></div>
<!-- PROGRAMME -->
<section id="programme" class="sec-pad">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Le programme</span>
<h2>Trois axes. Des engagements concrets.</h2>
<p>Chaque axe part d'une difficulté que nous avons réellement vécue — et y répond par des actions précises.</p>
</div>
<div class="axis reveal">
<div class="num">1</div>
<div>
<h3>Plus d'information et de visibilité</h3>
<p class="why">Trop souvent, nous découvrons les décisions de l'Ordre après coup. La communication est rare et le dialogue quasi inexistant.</p>
<ul class="eng-list">
<li>Une cellule communication dédiée et une communication officielle chaque mois</li>
<li>Un cadre de dialogue permanent entre les médecins et l'Ordre</li>
<li>Un annuaire des médecins et une plateforme d'information pour tous</li>
<li>Un tableau de bord public des actions de l'Ordre</li>
</ul>
</div>
</div>
<div class="axis reveal">
<div class="num">2</div>
<div>
<h3>Plus de formation et de prévisibilité</h3>
<p class="why">La formation continue reste faible et peu structurée. Les règles manquent de clarté, et la carrière du médecin n'est pas assez accompagnée.</p>
<ul class="eng-list">
<li>Un programme national de formation continue, avec un système de crédits</li>
<li>Un guide clair des procédures et des règles ordinales</li>
<li>Un guide de carrière du médecin béninois</li>
<li>Un système d'accréditation et de validation continue</li>
</ul>
</div>
</div>
<div class="axis reveal">
<div class="num">3</div>
<div>
<h3>Plus d'action et de représentativité</h3>
<p class="why">Quand un médecin est en difficulté, il se sent souvent seul. La défense de la profession et notre poids dans les réformes restent insuffisants.</p>
<ul class="eng-list">
<li>Une cellule juridique de défense des médecins, active dès les premiers mois</li>
<li>Des contrats types (privé, assurances) pour sécuriser l'exercice</li>
<li>Un dialogue renforcé avec le Ministère, le Parlement et les assurances</li>
<li>Une position claire de l'Ordre sur les réformes (CSU, ARS)</li>
</ul>
</div>
</div>
</div>
</section>
<div class="divider"><svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path class="d-fill" fill="#fbfcf9" d="M0,90 L0,40 Q720,-26 1440,40 L1440,90 Z"/><path class="d-line" fill="none" d="M0,40 Q720,-26 1440,40"/></svg></div>
<!-- PLAN -->
<section id="plan" class="sec-pad">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">Notre plan d'action</span>
<h2>Un programme ne vaut que par sa mise en œuvre.</h2>
<p>Voici ce à quoi nous nous engageons, avec un calendrier précis.</p>
</div>
<div class="timeline">
<div class="tl first reveal">
<div class="step">100</div>
<div class="lab">Premiers jours</div>
<ul>
<li>Une communication officielle régulière de l'Ordre</li>
<li>Le lancement du dialogue médecins–Ordre</li>
<li>Une cellule juridique opérationnelle</li>
<li>L'audit de la formation continue</li>
<li>Le début de la digitalisation, avec l'annuaire des médecins</li>
</ul>
</div>
<div class="tl reveal">
<div class="step">6</div>
<div class="lab">Mois</div>
<ul>
<li>Plateforme web de l'Ordre (version 1)</li>
<li>Premier forum national médecins–Ordre</li>
<li>Premières formations pilotes</li>
<li>Publication du guide des procédures</li>
<li>Premiers contrats types et plaidoyer engagé</li>
</ul>
</div>
<div class="tl reveal">
<div class="step">12</div>
<div class="lab">Mois</div>
<ul>
<li>Communication institutionnelle structurée</li>
<li>Tableau de bord public des actions</li>
<li>Système de crédits de formation continue</li>
<li>Début de l'accréditation des médecins</li>
<li>Partenariats signés et position sur les réformes</li>
</ul>
</div>
</div>
<div class="digital reveal">
<div style="flex:none">
<svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#9fd9b3" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
</div>
<div>
<h4>Notre chantier transversal : la digitalisation</h4>
<p>Un Ordre qui vous fait gagner du temps.</p>
<div class="chips"><span>Inscription en ligne</span><span>Paiement des cotisations</span><span>Suivi des dossiers</span><span>Base de données nationale</span></div>
</div>
</div>
</div>
</section>
<div class="divider"><svg viewBox="0 0 1440 90" preserveAspectRatio="none"><path class="d-fill" fill="#f1f6ec" d="M0,90 L0,40 Q720,-26 1440,40 L1440,90 Z"/><path class="d-line" fill="none" d="M0,40 Q720,-26 1440,40"/></svg></div>
<!-- EQUIPE -->
<section id="equipe" class="sec-pad">
<div class="wrap">
<div class="sec-head reveal">
<span class="eyebrow">L'équipe</span>
<h2>Quinze praticiens, une même conviction.</h2>
<p>Du public et du privé, de Cotonou jusqu'au Nord du pays, nous partageons votre quotidien — et nous nous engageons à le défendre.</p>
</div>
<div class="stats reveal">
<div class="stat"><div class="n">15</div><div class="l">Candidats</div></div>
<div class="stat"><div class="n">6</div><div class="l">Départements représentés</div></div>
<div class="stat"><div class="n">6 / 9</div><div class="l">Femmes / Hommes</div></div>
<div class="stat"><div class="n">10+</div><div class="l">Spécialités</div></div>
<div class="stat"><div class="n">Pub. & Privé</div><div class="l">Les deux collèges</div></div>
</div>
<div class="grp-title">Bureau</div>
<div class="cgrid bureau" data-group="bureau"></div>
<div class="grp-title">Titulaires</div>
<div class="cgrid" data-group="titulaires"></div>
<div class="grp-title">Suppléants</div>
<div class="cgrid" data-group="suppleants"></div>
<p class="photo-note">Maquette — les portraits officiels des candidats remplaceront les initiales.</p>
</div>
</section>
<!-- CHANGE -->
<section id="change">
<div class="wrap">
<span class="eyebrow reveal">Ce que nous voulons changer</span>
<h2 class="reveal">D'un Ordre que l'on subit, à un Ordre qui sert.</h2>
<div class="change-row">
<div class="cr reveal"><div class="from">Un Ordre peu visible</div><div class="arr">→</div><div class="to">un Ordre présent et utile</div></div>
<div class="cr reveal"><div class="from">Un Ordre administratif</div><div class="arr">→</div><div class="to">un Ordre au service des médecins</div></div>
<div class="cr reveal"><div class="from">Un médecin parfois seul</div><div class="arr">→</div><div class="to">une profession défendue et représentée</div></div>
</div>
</div>
</section>
<!-- VOTER -->
<section id="voter">
<div class="wrap">
<div class="voter-card reveal">
<span class="eyebrow">Le rendez-vous</span>
<h2>Le 7 juin, votre voix compte.</h2>
<p class="big">Dimanche 07 juin 2026</p>
<p class="sub">Scrutin en ligne — de 07h00 à 17h00</p>
<p class="slo">Réussir Ensemble. L'Ordre par vous, pour vous et pour tous.</p>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="wrap">
<div class="foot-grid">
<div class="foot-logo">
<div class="lk">Réussir <span>Ensemble</span></div>
<p>Liste candidate aux élections ordinales de l'Ordre National des Médecins du Bénin — scrutin du 7 juin 2026.</p>
</div>
<div class="foot-col">
<h6>Naviguer</h6>
<a href="#vision">Notre vision</a>
<a href="#programme">Le programme</a>
<a href="#plan">Plan d'action</a>
<a href="#equipe">L'équipe</a>
</div>
<div class="foot-col">
<h6>Le scrutin</h6>
<p>Dimanche 7 juin 2026</p>
<p>07h00 – 17h00</p>
<p>Vote en ligne</p>
</div>
</div>
<div class="foot-bottom">
<span>© 2026 Liste « Réussir Ensemble » — ONMB</span>
<span>L'Ordre par vous, pour vous et pour tous.</span>
</div>
</div>
</footer>
<!-- MODAL -->
<div class="overlay" id="overlay">
<div class="modal" id="modal" role="dialog" aria-modal="true"></div>
</div>
<script>
const CANDIDATS=[
{g:"bureau",ini:"GF",nom:"FASSINOU",pre:"Jessoutin Gilbert",role:"Président",spec:"Gynécologue-obstétricien",lieu:"CHU-MEL, Cotonou — Littoral",sect:"Public",
pain:"En 2015, l'explosion des frais d'accès à la spécialisation a poussé de jeunes médecins à partir — sans que l'Ordre ne se batte à nos côtés.",
eng:"Mettre mon expérience du plaidoyer et du terrain syndical au service d'un Ordre qui défend, qui influence et qui protège."},
{g:"bureau",ini:"LA",nom:"ADJAHI",pre:"Lise-Hélène",role:"Vice-présidente",spec:"Médecine générale, addictologie, soins palliatifs",lieu:"Cotonou — Littoral",sect:"Privé",
pain:"Des années arrachées à la médecine pour des tracasseries administratives — et, derrière, la question taboue de la retraite et du vieillissement de la profession.",
eng:"Alléger la charge administrative des médecins et faire de la prévisibilité — retraite, protection sociale — une priorité de l'Ordre."},
{g:"bureau",ini:"NN",nom:"NOUWAKPO",pre:"Natacha Baivi",role:"Secrétaire générale",spec:"Pédiatre",lieu:"CHD Zou, Abomey — Zou",sect:"Public",
pain:"À Abomey, je vois partir des jeunes médecins épuisés : chaque départ, c'est un lit de plus sans praticien et un patient de plus qui attend trop longtemps.",
eng:"Faire de la lutte contre le désert médical une priorité réelle, par un plaidoyer structuré auprès des autorités."},
{g:"tit-pub",ini:"YM",nom:"YEVI",pre:"Dodji Magloire",role:"Titulaire",spec:"Urologue-andrologue, hospitalo-universitaire",lieu:"CNHU Cotonou / CHUDO Porto-Novo — Ouémé",sect:"Public",
pain:"Une réaction trop faible de l'Ordre face à certains mauvais traitements subis par les médecins.",
eng:"Porter les doléances des médecins et assurer une vraie communication de l'Ordre, y compris dans l'espace universitaire."},
{g:"tit-pub",ini:"SH",nom:"HOUNGBADJI",pre:"Sêlomin",role:"Titulaire",spec:"Pédiatre intensiviste",lieu:"CHU-MEL, Cotonou — Littoral",sect:"Public",
pain:"La perte d'une enfant de 10 ans, un dimanche, faute de moyens pour assurer la continuité des soins — une douleur que je refuse de garder pour moi seule.",
eng:"Accompagner les médecins dans leur développement professionnel continu : un médecin mieux formé soigne mieux et plaide mieux."},
{g:"tit-pub",ini:"RM",nom:"MASSI",pre:"Mahutondji Romaric",role:"Titulaire",spec:"Hématologue",lieu:"Cotonou — Ouémé",sect:"Public",
pain:"Une spécialité où les protocoles évoluent en quelques mois, mais aucun plan de formation continue défini et validé par l'Ordre.",
eng:"Construire un plan de formation continue par spécialité, assorti d'un mécanisme de financement qui le rende accessible à tous."},
{g:"sup-pub",ini:"MF",nom:"FLATIN",pre:"Marius Claude",role:"Suppléant",spec:"ORL et chirurgie cervico-faciale",lieu:"CHUD Borgou — Borgou",sect:"Public",
pain:"L'exode des jeunes médecins vers l'Occident, qui vide nos hôpitaux de leurs forces vives.",
eng:"Travailler avec le Ministère de la Santé à des mesures incitatives concrètes, dans le public comme dans le privé, pour retenir nos médecins."},
{g:"sup-pub",ini:"RG",nom:"GUEZO",pre:"Romaric Darius",role:"Suppléant",spec:"ORL — chirurgie cervico-faciale",lieu:"CNHU-HKM, Cotonou — Littoral",sect:"Public",
pain:"La faible réactivité de l'Ordre sur la formation continue, alors que la médecine se modernise à grande vitesse.",
eng:"Faire de la formation continue une politique active de l'Ordre et sensibiliser les médecins à leurs droits et devoirs."},
{g:"sup-pub",ini:"NZ",nom:"ZOHOUN",pre:"Noriace Excelle",role:"Suppléante",spec:"Médecin du travail",lieu:"CHU-MEL, Cotonou — Littoral",sect:"Public",
pain:"Un dimanche, courir d'hôpital en hôpital avec mon enfant brûlée, faute de spécialiste disponible — et comprendre que toute famille sans « titre » attend, impuissante.",
eng:"Porter la question de la présence des spécialistes dans nos hôpitaux, y compris les week-ends et les jours fériés."},
{g:"tit-priv",ini:"RA",nom:"AHOLOU",pre:"Mawuton Renaud",role:"Titulaire",spec:"Gynécologue-obstétricien, chirurgien de fistules",lieu:"Hôpital Saint Jean de Dieu, Tanguiéta — Atacora",sect:"Privé",
pain:"Le décès d'une parturiente en éclampsie, arrivée sans aucune précaution depuis le centre de premier contact.",
eng:"Faire du renforcement régulier des capacités (DPC, EPU) une obligation de moyens portée par l'Ordre."},
{g:"tit-priv",ini:"UA",nom:"AHOUAYITO",pre:"Urbain Dodji",role:"Titulaire",spec:"Médecin généraliste",lieu:"CHUD Ouémé, Cotonou — Ouémé",sect:"Mixte",
pain:"Une insertion professionnelle solitaire, des rémunérations dérisoires, une tentative d'installation sans le moindre accompagnement.",
eng:"Faire de l'insertion des jeunes médecins une priorité concrète et rendre l'Ordre visible dans leur quotidien."},
{g:"tit-priv",ini:"TD",nom:"DEMAHOU",pre:"Timothée",role:"Titulaire",spec:"Médecin généraliste, promoteur de clinique",lieu:"Djeffa — Ouémé",sect:"Privé",
pain:"Des abus de pouvoir subis face à des hiérarchies hospitalières, alors que je n'avais aucune faute technique à me reprocher.",
eng:"Rendre l'Ordre visible et présent dans le quotidien des médecins — y compris dans les moments difficiles."},
{g:"sup-priv",ini:"EC",nom:"CHABI",pre:"Eriolla",role:"Suppléante",spec:"Pédiatre, allergologue, nutritionniste pédiatrique",lieu:"Cotonou — Atlantique",sect:"Privé",
pain:"La réforme de scission entre public et privé, imposée sans règles claires, qui fragilise la profession et les patients.",
eng:"Mener un benchmarking rigoureux des règles ordinales pour clarifier les procédures et sécuriser l'exercice."},
{g:"sup-priv",ini:"CS",nom:"SODOKPA",pre:"Tonakpon Camus",role:"Suppléant",spec:"Médecin évaluateur externe ARS",lieu:"Cotonou — Atlantique",sect:"Privé",
pain:"Des contrats précaires, sans protection sociale ni standards, qui laissent la moitié de la profession sans cadre ni repères.",
eng:"Porter la structuration du secteur privé : standards contractuels, dialogue avec les assureurs, information claire sur les règles."},
{g:"sup-priv",ini:"FG",nom:"GARBA",pre:"Cadi Faïsath",role:"Suppléante",spec:"Gynécologue-obstétricienne",lieu:"Clinique Garba, Parakou — Borgou",sect:"Privé",
pain:"Depuis le Borgou, un Ordre qu'on ne voit pas, qu'on n'entend pas — aucune formation qui nous rejoigne, aucune représentativité.",
eng:"Faire remonter les réalités du terrain nordiste et faire que la formation continue ne soit plus un privilège géographique."}
];
// build cards
CANDIDATS.forEach((c,i)=>{
const GMAP={bureau:'bureau','tit-pub':'titulaires','tit-priv':'titulaires','sup-pub':'suppleants','sup-priv':'suppleants'};
const box=document.querySelector('.cgrid[data-group="'+(GMAP[c.g]||c.g)+'"]');
if(!box)return;
const el=document.createElement('div');
el.className='cand reveal';
el.innerHTML='<div class="mono">'+c.ini+'</div>'+
'<div class="nom">'+c.nom+'</div>'+
'<div class="pre">'+c.pre+'</div>'+
'<div class="role">'+c.role+'</div>'+
'<div class="spec">'+c.spec+'</div>'+
'<div class="see">Voir l\'engagement →</div>';
el.addEventListener('click',()=>openModal(i));
box.appendChild(el);
});
const overlay=document.getElementById('overlay'),modal=document.getElementById('modal');
function openModal(i){
const c=CANDIDATS[i];
modal.innerHTML='<div class="top"><button class="close" id="mclose" aria-label="Fermer">×</button>'+
'<div class="mono">'+c.ini+'</div>'+
'<div class="nom">'+c.nom+' '+c.pre+'</div>'+
'<div class="meta">'+c.spec+'<br>'+c.lieu+' · Secteur '+c.sect+'</div>'+
'<span class="role">'+c.role+'</span></div>'+
'<div class="body">'+
'<div class="blk pain"><h5>La réalité que je porte</h5><p>'+c.pain+'</p></div>'+
'<div class="blk eng"><h5>Mon engagement</h5><p>'+c.eng+'</p></div>'+
'</div>';
overlay.classList.add('on');
document.getElementById('mclose').onclick=closeModal;
}
function closeModal(){overlay.classList.remove('on')}
overlay.addEventListener('click',e=>{if(e.target===overlay)closeModal()});
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal()});
// nav scroll + burger
const nav=document.getElementById('nav');
addEventListener('scroll',()=>nav.classList.toggle('scrolled',scrollY>40));
const burger=document.getElementById('burger'),navlinks=document.getElementById('navlinks');
burger.addEventListener('click',()=>navlinks.classList.toggle('open'));
navlinks.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>navlinks.classList.remove('open')));
// reveal on scroll
const io=new IntersectionObserver((ents)=>{ents.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
// countdown
const target=new Date('2026-06-07T07:00:00+01:00').getTime();
function tick(){
const diff=target-Date.now();
const set=(id,v)=>document.getElementById(id).textContent=String(Math.max(0,v)).padStart(2,'0');
if(diff<=0){['cd-d','cd-h','cd-m','cd-s'].forEach(id=>document.getElementById(id).textContent='00');return}
const d=Math.floor(diff/864e5),h=Math.floor(diff%864e5/36e5),m=Math.floor(diff%36e5/6e4),s=Math.floor(diff%6e4/1e3);
document.getElementById('cd-d').textContent=d;set('cd-h',h);set('cd-m',m);set('cd-s',s);
}
tick();setInterval(tick,1000);
</script>
</body>
</html>
