/* ============ EduKonekte Ayiti — design system ============ */
:root{
  --cyan:#22D3EE; --cyan-d:#0E7490; --cyan-l:#67E8F9;
  --gold:#F5B942; --gold-d:#B37E12;
  --violet:#8B5CF6;
  --ink:#050B14; --ink2:#0B1626; --ink3:#132234;
  --txt:#E6EEF6; --txt2:#B3C5D6; --txt3:#8FA6BA;
  --line:var(--voile-09); --line2:rgba(34,211,238,.28);
  --ok:#34D399; --warn:#FBBF24; --bad:#F87171;
  --r:14px; --r2:10px;
  --shell:1180px;

  /* voiles : couches translucides posées sur le fond */
  --voile-02:rgba(255,255,255,.02);  --voile-025:rgba(255,255,255,.025);
  --voile-03:rgba(255,255,255,.03);  --voile-035:rgba(255,255,255,.035);
  --voile-04:rgba(255,255,255,.04);  --voile-05:rgba(255,255,255,.05);
  --voile-06:rgba(255,255,255,.06);  --voile-07:rgba(255,255,255,.07);
  --voile-08:rgba(255,255,255,.08);  --voile-09:rgba(255,255,255,.09);
  --voile-1:rgba(255,255,255,.1);

  --fort:#FFFFFF;              /* texte de premier plan */
  --sur-accent:#04121a;        /* texte posé sur le cyan */
  --sur-or:#2a1c00;            /* texte posé sur l'or */
  --ombre:rgba(0,0,0,.45);
  --barre:rgba(5,11,20,.86);
  --halo:rgba(34,211,238,.16);
  --grain:.55;                 /* intensité du décor de fond */
}

/* ---------------- THÈME CLAIR ----------------
   Le site est sombre par défaut. Le clair s'applique si le système le demande
   et que l'utilisateur n'a pas choisi le sombre, ou s'il choisit le clair. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --cyan:#0E7490; --cyan-d:#0B5C73; --cyan-l:#0891B2;
    --gold:#A96A05; --gold-d:#8A5504;
    --violet:#6D3FD1;
    --ink:#F4F7F9; --ink2:#FFFFFF; --ink3:#EAF0F4;
    --txt:#0B1B26; --txt2:#33505F; --txt3:#4C6675;
    --line:rgba(11,27,38,.12); --line2:rgba(14,116,144,.34);
    --ok:#067647; --warn:#8A5504; --bad:#B42318;

    --voile-02:rgba(11,27,38,.022);  --voile-025:rgba(11,27,38,.028);
    --voile-03:rgba(11,27,38,.034);  --voile-035:rgba(11,27,38,.04);
    --voile-04:rgba(11,27,38,.045);  --voile-05:rgba(11,27,38,.055);
    --voile-06:rgba(11,27,38,.065);  --voile-07:rgba(11,27,38,.075);
    --voile-08:rgba(11,27,38,.085);  --voile-09:rgba(11,27,38,.095);
    --voile-1:rgba(11,27,38,.11);

    --fort:#04121A;
    --sur-accent:#FFFFFF;
    --sur-or:#FFFFFF;
    --ombre:rgba(11,27,38,.14);
    --barre:rgba(255,255,255,.86);
    --halo:rgba(14,116,144,.14);
    --grain:0;
  }
}
:root[data-theme="light"]{
  --cyan:#0E7490; --cyan-d:#0B5C73; --cyan-l:#0891B2;
  --gold:#A96A05; --gold-d:#8A5504;
  --violet:#6D3FD1;
  --ink:#F4F7F9; --ink2:#FFFFFF; --ink3:#EAF0F4;
  --txt:#0B1B26; --txt2:#33505F; --txt3:#4C6675;
  --line:rgba(11,27,38,.12); --line2:rgba(14,116,144,.34);
  --ok:#067647; --warn:#8A5504; --bad:#B42318;

  --voile-02:rgba(11,27,38,.022);  --voile-025:rgba(11,27,38,.028);
  --voile-03:rgba(11,27,38,.034);  --voile-035:rgba(11,27,38,.04);
  --voile-04:rgba(11,27,38,.045);  --voile-05:rgba(11,27,38,.055);
  --voile-06:rgba(11,27,38,.065);  --voile-07:rgba(11,27,38,.075);
  --voile-08:rgba(11,27,38,.085);  --voile-09:rgba(11,27,38,.095);
  --voile-1:rgba(11,27,38,.11);

  --fort:#04121A;
  --sur-accent:#FFFFFF;
  --sur-or:#FFFFFF;
  --ombre:rgba(11,27,38,.14);
  --barre:rgba(255,255,255,.86);
  --halo:rgba(14,116,144,.14);
  --grain:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--ink); color:var(--txt); line-height:1.6; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--grain);
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(34,211,238,.29), transparent 60%),
    radial-gradient(760px 520px at 6% 102%, rgba(139,92,246,.25), transparent 58%);
}
h1,h2,h3,h4{font-family:'Montserrat','Inter',sans-serif;line-height:1.15;color:var(--fort);font-weight:800;letter-spacing:-.02em}
a{color:var(--cyan);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 20px}

/* ---- header ---- */
header.top{position:sticky;top:0;z-index:50;background:var(--barre);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mk{width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,var(--cyan),var(--violet));display:grid;place-items:center;font-family:'Montserrat';font-weight:800;font-size:14px;color:var(--sur-accent)}
.brand b{font-family:'Montserrat';font-weight:800;font-size:15px;color:var(--fort);letter-spacing:-.01em}
.brand b i{display:block;font-style:normal;font-weight:600;font-size:9px;letter-spacing:2.4px;color:var(--cyan);text-transform:uppercase}
.nav .links{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.nav .links a{color:var(--txt2);font-size:13.5px;font-weight:500;padding:8px 11px;border-radius:8px;white-space:nowrap}
.nav .links a:hover{color:var(--fort);background:var(--voile-05)}
.nav .links a.on{color:var(--cyan);background:rgba(34,211,238,.1)}
.langs{display:flex;gap:5px;align-items:center;margin-left:6px}
.langs button{background:none;border:none;font-size:15px;cursor:pointer;opacity:.45;padding:2px;border-radius:4px;line-height:1}
.langs button.on{opacity:1;transform:scale(1.14)}
.btn{display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;font-family:'Inter';font-weight:600;font-size:13.5px;
  padding:9px 16px;border-radius:9px;background:var(--cyan);color:var(--sur-accent);transition:.15s;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--cyan-l);transform:translateY(-1px)}
.btn.gold{background:var(--gold);color:var(--sur-or)}
.btn.ghost{background:var(--voile-06);color:var(--txt);border:1px solid var(--line2)}
.btn.ghost:hover{background:rgba(34,211,238,.12);color:var(--fort)}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:7px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---- generic ---- */
section.band{padding:56px 0}
.eyebrow{font-family:'Montserrat';font-size:10.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
h1.big{font-size:clamp(32px,5.4vw,54px);margin-bottom:16px}
h2.sec{font-size:clamp(22px,3.2vw,32px);margin-bottom:10px}
.lede{color:var(--txt2);font-size:16px;max-width:660px}
.card{background:var(--voile-035);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card.hi{border-color:var(--line2);background:rgba(34,211,238,.055)}
.grid{display:grid;gap:16px;min-width:0}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--voile-04);border:1px solid var(--line);border-radius:var(--r2);padding:16px}
.kpi b{display:block;font-family:'Montserrat';font-weight:800;font-size:26px;color:var(--cyan);line-height:1}
.kpi.gold b{color:var(--gold)}
.kpi span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--txt3);margin-top:7px;font-weight:600}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.4px}
.pill.cy{background:rgba(34,211,238,.16);color:var(--cyan)}
.pill.go{background:rgba(245,185,66,.16);color:var(--gold)}
.pill.ok{background:rgba(52,211,153,.16);color:var(--ok)}
.pill.wa{background:rgba(251,191,36,.16);color:var(--warn)}
.pill.ba{background:rgba(248,113,113,.16);color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.tbl-mini{min-width:0!important}
.table-scroll table{min-width:620px}
th{text-align:left;font-family:'Montserrat';font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--txt3);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid var(--voile-05);color:var(--txt2)}
td b{color:var(--fort);font-weight:600}
tbody tr:hover td{background:var(--voile-02)}
.note{border-left:3px solid var(--cyan);background:rgba(34,211,238,.07);padding:13px 16px;border-radius:0 10px 10px 0;font-size:13.5px;color:var(--txt2)}
.note.warn{border-color:var(--gold);background:rgba(245,185,66,.08)}
.note.bad{border-color:var(--bad);background:rgba(248,113,113,.08)}
.note b{color:var(--fort);display:block;margin-bottom:4px;font-family:'Montserrat';font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
label{display:block;font-size:12.5px;font-weight:600;color:var(--txt2);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--voile-05);border:1px solid var(--line);color:var(--txt);
  padding:10px 13px;border-radius:9px;font-family:'Inter';font-size:14px;outline:none}
input:focus,select,textarea:focus{border-color:var(--cyan)}
select option{background:var(--ink2)}
.field{margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--voile-04);color:var(--txt2);padding:7px 13px;border-radius:20px;font-size:12.5px;cursor:pointer;user-select:none}
.chip.on{border-color:var(--cyan);background:rgba(34,211,238,.14);color:var(--cyan-l)}
.bar{height:7px;background:var(--voile-08);border-radius:20px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));border-radius:20px}
.muted{color:var(--txt3);font-size:12.5px}
footer.ft{border-top:1px solid var(--line);padding:34px 0;margin-top:60px;color:var(--txt3);font-size:13px}
footer.ft a{color:var(--txt2)}
footer.ft .row{display:flex;gap:26px;flex-wrap:wrap;align-items:center}

/* ---- app shell (espaces) ---- */
.app{display:grid;grid-template-columns:224px minmax(0,1fr);gap:24px;padding:26px 0 60px}
.app>main{min-width:0;overflow-x:hidden}
.view{min-width:0}
.side{position:sticky;top:88px;align-self:start}
.side .who{background:var(--voile-04);border:1px solid var(--line);border-radius:var(--r2);padding:13px;margin-bottom:14px}
.side .who b{display:block;color:var(--fort);font-size:13.5px}
.side nav{display:flex;flex-direction:column;gap:2px}
.side nav button{text-align:left;background:none;border:none;color:var(--txt2);font-family:'Inter';font-size:13.5px;
  padding:9px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:9px}
.side nav button:hover{background:var(--voile-05);color:var(--fort)}
.side nav button.on{background:rgba(34,211,238,.13);color:var(--cyan)}
.view{display:none} .view.on{display:block}
.vh{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.vh h2{font-size:21px;margin-bottom:4px}
.vh p{color:var(--txt3);font-size:13.5px}
.alert{border-radius:var(--r2);padding:13px 16px;margin-bottom:18px;font-size:13.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.alert.orange{background:rgba(245,185,66,.12);border:1px solid rgba(245,185,66,.3);color:#FDE9C0}
.alert.red{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:#FECACA}
.alert b{color:var(--fort)}
.alert .btn{margin-left:auto}

/* ---- steps ---- */
.steps{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.steps div{flex:1;min-width:120px;padding:11px 13px;border-radius:var(--r2);background:var(--voile-04);border:1px solid var(--line);font-size:12.5px;color:var(--txt3)}
.steps div.on{border-color:var(--cyan);background:rgba(34,211,238,.1);color:var(--cyan-l)}
.steps div.done{border-color:rgba(52,211,153,.4);color:var(--ok)}
.steps div b{display:block;font-family:'Montserrat';font-size:10px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:3px}
.otp{display:flex;gap:9px;justify-content:center;margin:18px 0}
.otp input{width:46px;height:56px;text-align:center;font-size:22px;font-weight:700;font-family:'Montserrat'}
.modal{position:fixed;inset:0;background:rgba(2,6,12,.82);display:none;place-items:center;z-index:100;padding:20px}
.modal.on{display:grid}
.modal .box{background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r);padding:26px;max-width:440px;width:100%}
.hidden{display:none!important}

@media(max-width:1000px){
  .grid[style*='repeat(5']{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .side nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px}
  .side nav button{white-space:nowrap}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .nav{height:auto;padding:10px 0;flex-wrap:wrap}
  .nav .links{margin-left:0;width:100%;order:3}
  .table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){ .g2,.g3,.g4{grid-template-columns:1fr}
  .grid[style*='repeat(5']{grid-template-columns:repeat(2,1fr)!important} }
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}


/* ---- blocs photo + texte ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;margin-bottom:56px}
.split:last-child{margin-bottom:0}
.split.rev .shot{order:2}
.split-txt .lede{margin-bottom:18px}
.shot{margin:0;border-radius:16px;overflow:hidden;position:relative;background:var(--ink3);
  box-shadow:0 22px 60px rgba(0,0,0,.45);border:1px solid var(--line)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,var(--halo),transparent 46%,var(--halo))}
.shot img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
ul.ticks{list-style:none;padding:0;display:grid;gap:11px}
ul.ticks li{position:relative;padding-left:26px;font-size:14px;color:var(--txt2)}
ul.ticks li::before{content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
@media(max-width:820px){
  .split{grid-template-columns:minmax(0,1fr);gap:24px;margin-bottom:44px}
  .split.rev .shot{order:0}
}


/* ---- page contact : réponses immédiates ---- */
.rep{border-left:3px solid var(--cyan);background:rgba(34,211,238,.08);padding:14px 16px;
  border-radius:0 10px 10px 0;margin:0 0 16px;font-size:13.5px;color:var(--txt2)}
.rep b{display:block;font-family:'Montserrat';font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;margin-bottom:6px;color:var(--cyan)}
.rep p{margin:0}

/* ---- widget de discussion ---- */
#ek-chat-btn{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  border:none;cursor:pointer;background:linear-gradient(140deg,var(--cyan),var(--violet));color:var(--sur-accent);
  font-size:23px;line-height:1;box-shadow:0 10px 30px rgba(0,0,0,.45);display:grid;place-items:center;
  transition:transform .15s}
#ek-chat-btn:hover{transform:scale(1.07)}
#ek-chat-btn:focus-visible{outline:3px solid var(--cyan-l);outline-offset:3px}
#ek-chat-btn .pip{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:2px solid var(--ink)}
#ek-chat{position:fixed;right:20px;bottom:88px;z-index:91;width:370px;max-width:calc(100vw - 40px);
  max-height:min(560px,calc(100vh - 130px));display:none;flex-direction:column;
  background:var(--ink2);border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6)}
#ek-chat.on{display:flex}
#ek-chat .hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
#ek-chat .hd .dot{width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(140deg,var(--cyan),var(--violet));display:grid;place-items:center;
  font-family:'Montserrat';font-weight:800;font-size:12px;color:var(--sur-accent)}
#ek-chat .hd b{display:block;font-family:'Montserrat';font-size:13px;color:var(--fort)}
#ek-chat .hd span{display:block;font-size:10.5px;color:var(--txt3)}
#ek-chat .hd button{margin-left:auto;background:none;border:none;color:var(--txt3);font-size:20px;
  cursor:pointer;line-height:1;padding:4px 6px;border-radius:6px}
#ek-chat .hd button:hover{color:var(--fort);background:var(--voile-06)}
#ek-chat .body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
#ek-chat .m{max-width:86%;font-size:13.5px;line-height:1.5;padding:10px 13px;border-radius:13px}
#ek-chat .m.bot{background:var(--voile-06);color:var(--txt2);border-bottom-left-radius:4px;align-self:flex-start}
#ek-chat .m.usr{background:rgba(34,211,238,.16);color:#EAFBFF;border-bottom-right-radius:4px;align-self:flex-end}
#ek-chat .m a{color:var(--cyan-l);text-decoration:underline}
#ek-chat .m b{color:var(--fort)}
#ek-chat .sug{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
#ek-chat .sug button{background:var(--voile-05);border:1px solid var(--line);color:var(--txt2);
  font-family:'Inter';font-size:12px;padding:6px 11px;border-radius:20px;cursor:pointer}
#ek-chat .sug button:hover{border-color:var(--cyan);color:var(--cyan-l)}
#ek-chat .ft{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px}
#ek-chat .ft input{flex:1;font-size:13.5px;padding:9px 12px}
#ek-chat .ft button{flex:none;padding:9px 14px}
#ek-chat .note-demo{font-size:10.5px;color:var(--txt3);text-align:center;padding:0 16px 10px}
@media(max-width:560px){
  #ek-chat{right:12px;left:12px;width:auto;bottom:80px;max-height:calc(100vh - 110px)}
  #ek-chat-btn{right:14px;bottom:14px}
}


/* ---- lecteur de cours ---- */
.lecture{display:grid;grid-template-columns:238px minmax(0,1fr);gap:34px;align-items:start}
.lect-side{position:sticky;top:88px}
.lien-mod{display:flex;gap:8px;align-items:baseline;padding:7px 9px;border-radius:7px;
  color:var(--txt2);font-size:12.5px;line-height:1.35}
.lien-mod b{color:var(--cyan);font-family:'Montserrat';font-size:11px;flex:none;width:26px}
.lien-mod:hover{background:var(--voile-05);color:var(--fort)}
.lien-mod.on{background:rgba(34,211,238,.13);color:var(--cyan-l)}
.lect-main{min-width:0;max-width:74ch}
.lecon{margin-bottom:34px}
.lecon h2{font-size:19px;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.lecon p{margin-bottom:14px;font-size:15px;line-height:1.72;color:var(--txt2)}
.a-retenir{border-left:3px solid var(--gold);background:rgba(245,185,66,.08);
  padding:14px 16px;border-radius:0 10px 10px 0;margin-top:18px}
.a-retenir b{display:block;font-family:'Montserrat';font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.a-retenir ul{margin:0;padding-left:18px}
.a-retenir li{font-size:13.5px;color:var(--txt2);margin-bottom:5px}
ol.plan{padding-left:20px}
ol.plan li{font-size:14.5px;color:var(--txt2);margin-bottom:10px;line-height:1.6}
.nav-modules{display:flex;gap:12px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);margin-top:34px}
@media(max-width:900px){
  .lecture{grid-template-columns:minmax(0,1fr);gap:22px}
  .lect-side{position:static}
  .lect-side nav{flex-direction:row!important;overflow-x:auto;gap:6px;padding-bottom:6px}
  .lien-mod{white-space:nowrap}
}
@media print{
  header.top, footer.ft, .lect-side, .nav-modules, #ek-chat, #ek-chat-btn,
  #btn-hl, #btn-imprimer, #hors-ligne{display:none!important}
  body{background:#fff;color:#111}
  .lecon p,.a-retenir li,ol.plan li{color:#222}
  h1,h2{color:#000}
  .a-retenir{background:#faf6ec;border-left-color:#b8860b}
  .card{border:1px solid #ddd;background:#fff}
  .lect-main{max-width:none}
}


/* ---- pages bonus ---- */
ol.etapes-bonus{list-style:none;counter-reset:e;padding:0}
ol.etapes-bonus li{counter-increment:e;position:relative;padding-left:44px;margin-bottom:22px}
ol.etapes-bonus li::before{content:counter(e);position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:50%;background:rgba(245,185,66,.16);color:var(--gold);display:grid;place-items:center;
  font-family:'Montserrat';font-weight:800;font-size:13px}
ol.etapes-bonus li b{display:block;color:var(--fort);font-size:15px;margin-bottom:6px}
ol.etapes-bonus li p{margin:0;font-size:14px;color:var(--txt2);line-height:1.65}
ul.suivi{list-style:none;padding:0;display:grid;gap:10px}
ul.suivi li{display:flex;gap:11px;align-items:flex-start;background:var(--voile-035);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px}
ul.suivi input{margin-top:2px;flex:none;accent-color:var(--cyan)}
ul.suivi label{margin:0;font-weight:400;color:var(--txt2);font-size:13.5px;cursor:pointer}
ul.suivi input:checked + label{color:var(--ok);text-decoration:line-through;text-decoration-color:rgba(52,211,153,.5)}


/* ================= support de cours en diapositives ================= */
body.pres-body{overflow:hidden}
.pres{height:100vh;display:flex;flex-direction:column}
.pres-hd{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);flex:none}
.pres-mod{font-size:13px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pres-out{margin-left:auto;display:flex;gap:8px;flex:none}
.pres-scene{flex:1;display:flex;align-items:center;gap:10px;padding:18px;min-height:0}
.pres-cadre{flex:1;height:100%;display:grid;place-items:center;min-width:0}
.pres-nav{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:var(--voile-04);color:var(--txt2);font-size:26px;line-height:1;cursor:pointer}
.pres-nav:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.pres-nav:disabled{opacity:.25;cursor:default}
.pres-ft{flex:none;padding:10px 20px 16px;border-top:1px solid var(--line)}
.pres-barre{height:3px;background:var(--voile-08);border-radius:3px;overflow:hidden;margin-bottom:9px}
.pres-barre i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .3s}
.pres-info{display:flex;justify-content:space-between;font-size:12px;color:var(--txt3);gap:14px;flex-wrap:wrap}

.slide{width:100%;max-width:1000px;max-height:100%;overflow-y:auto;padding:8px 6px}
.slide.anim{animation:sl .32s ease}
@keyframes sl{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.slide h2{font-size:clamp(20px,3vw,30px);margin-bottom:20px;line-height:1.2}
.slide .s-para{font-size:clamp(14px,1.6vw,17px);color:var(--txt2);line-height:1.7}

.s-titre{display:grid;place-items:center;text-align:center;position:relative;min-height:52vh}
.s-illu-fond{position:absolute;inset:0;display:grid;place-items:center;opacity:.075;pointer-events:none;filter:blur(.4px)}
.s-illu-fond svg{max-height:64vh;width:auto}
.s-titre-txt{position:relative;z-index:1}
.s-titre h1{font-size:clamp(26px,4.6vw,46px);line-height:1.1;margin-bottom:14px;text-shadow:0 2px 26px rgba(2,6,12,.95)}
.s-titre p{font-size:clamp(14px,1.9vw,19px);color:var(--cyan-l);text-shadow:0 2px 20px rgba(2,6,12,.95)}

.s-deux{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:center}
.s-illu{display:grid;place-items:center;min-width:0}
.s-illu svg{width:100%;height:auto;max-height:52vh}

.s-liste{list-style:none;padding:0;display:grid;gap:13px}
.s-liste li{position:relative;padding-left:30px;font-size:clamp(14px,1.7vw,18px);color:var(--txt2);line-height:1.55}
.s-liste li::before{content:"";position:absolute;left:2px;top:.62em;width:11px;height:2px;background:var(--cyan)}
.s-accent{margin-top:22px;padding:13px 17px;border-left:3px solid var(--gold);background:rgba(245,185,66,.09);
  border-radius:0 10px 10px 0;font-size:clamp(13px,1.5vw,15px);color:#FDE9C0}

.s-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.s-chiffres div{background:var(--voile-04);border:1px solid var(--line);border-radius:14px;padding:22px 14px;text-align:center}
.s-chiffres b{display:block;font-family:'Montserrat';font-weight:800;font-size:clamp(24px,3.4vw,38px);color:var(--cyan);line-height:1}
.s-chiffres span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1.1px;color:var(--txt3);margin-top:9px}

.s-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.s-comp>div{border-radius:14px;padding:20px;border:1px solid var(--line)}
.s-comp .ok{background:rgba(52,211,153,.07);border-color:rgba(52,211,153,.32)}
.s-comp .ko{background:rgba(248,113,113,.07);border-color:rgba(248,113,113,.32)}
.s-comp h3{font-size:14px;margin-bottom:13px;letter-spacing:.4px}
.s-comp .ok h3{color:var(--ok)} .s-comp .ko h3{color:var(--bad)}
.s-comp ul{list-style:none;padding:0;display:grid;gap:8px}
.s-comp li{font-size:14px;color:var(--txt2);padding-left:16px;position:relative}
.s-comp li::before{content:"·";position:absolute;left:3px;color:var(--txt3)}

.s-cle{display:grid;place-items:center;text-align:center;min-height:44vh;padding:0 4%}
.s-cle h2{color:var(--cyan);margin-bottom:18px}
.s-cle p{font-size:clamp(17px,2.5vw,27px);line-height:1.5;color:var(--fort);max-width:34ch;margin:0 auto}
.s-cle.fort h2{color:var(--gold)}
.s-cle.fort p{color:#FDE9C0}

.pres-plan{position:fixed;inset:0;background:rgba(2,6,12,.86);display:grid;place-items:center;z-index:120;padding:20px}
.pres-plan[hidden]{display:none}
.pres-plan-in{background:var(--ink2);border:1px solid var(--line2);border-radius:16px;padding:26px;max-width:520px;width:100%;max-height:80vh;overflow:auto}
.pres-plan-in h2{font-size:17px;margin-bottom:16px}
.pres-plan-in ol{padding-left:20px;margin-bottom:18px;display:grid;gap:8px}
.pres-plan-in button{background:none;border:none;color:var(--txt2);font-family:'Inter';font-size:14px;
  text-align:left;cursor:pointer;padding:3px 0}
.pres-plan-in ol button:hover{color:var(--cyan)}

@media(max-width:820px){
  .s-deux{grid-template-columns:minmax(0,1fr);gap:18px}
  .s-illu svg{max-height:30vh}
  .pres-nav{width:38px;height:38px;font-size:22px}
  .pres-scene{padding:12px 6px;gap:4px}
  .pres-hd{flex-wrap:wrap;gap:10px}
  .pres-mod{order:3;width:100%}
}
body.pres-body #ek-chat-btn,body.pres-body #ek-chat{display:none!important}
@media print{ .pres-hd,.pres-ft,.pres-nav{display:none!important} body.pres-body{overflow:visible} }

/* --- ressources pédagogiques (cours.html) --- */
.ressources{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.ressources>h2{font-size:20px;margin-bottom:8px}
.res-onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.res-tab{background:var(--voile-04);border:1px solid var(--line);color:var(--txt2);
  font-family:'Inter';font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.16s}
.res-tab:hover{border-color:var(--cyan);color:var(--fort)}
.res-tab.on{background:rgba(34,211,238,.12);border-color:var(--cyan);color:var(--cyan-l)}
.res-tab i{font-style:normal;font-size:11px;background:var(--voile-1);
  border-radius:999px;padding:1px 7px;color:var(--txt3)}
.res-tab.on i{background:rgba(34,211,238,.2);color:var(--cyan-l)}
.res-bloc{display:grid;gap:14px}
.res-item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;
  background:var(--voile-03);border:1px solid var(--line);border-radius:13px;padding:16px 18px}
.res-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:15px;
  background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25)}
.res-item h3{font-family:'Inter';font-size:15px;font-weight:600;line-height:1.35;margin-bottom:7px}
.res-item h3 a{color:var(--fort);text-decoration:none;border-bottom:1px solid rgba(34,211,238,.4)}
.res-item h3 a:hover{color:var(--cyan-l);border-color:var(--cyan)}
.res-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--txt3);margin-bottom:9px}
.pill.xs{font-size:10.5px;padding:1px 8px}
.res-item p{font-size:13.5px;color:var(--txt2);line-height:1.6}
.res-reserve{margin-top:20px;font-size:12px;color:var(--txt3);font-style:italic}
@media(max-width:560px){ .res-item{grid-template-columns:minmax(0,1fr)} .res-ic{display:none} }

/* --- évaluations (quiz.html) --- */
.q-meta{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.q-barre{height:3px;background:var(--voile-08);border-radius:3px;overflow:hidden;margin-bottom:18px}
.q-barre i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .3s}
.q-tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:14px;font-size:13.5px;color:var(--txt2)}
.q-enonce{font-size:clamp(16px,2vw,19px);line-height:1.5;color:var(--fort);margin-bottom:8px}
.q-consigne{font-size:12.5px;color:var(--cyan-l);margin-bottom:20px;letter-spacing:.2px}
.q-opt{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:10px;cursor:pointer;transition:.15s;background:var(--voile-02)}
.q-opt:hover{border-color:var(--cyan);background:rgba(34,211,238,.05)}
.q-opt.on{border-color:var(--cyan);background:rgba(34,211,238,.1)}
.q-opt input{margin-top:2px;flex:none;accent-color:var(--cyan)}
.q-opt span{font-size:14.5px;color:var(--txt2);line-height:1.5}
.q-opt.on span{color:var(--fort)}
.q-pied{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.q-pied .muted{margin-left:auto;font-size:12.5px}
.q-avert{margin-top:14px;padding:12px 16px;border-left:3px solid var(--gold);
  background:rgba(245,185,66,.09);border-radius:0 10px 10px 0;font-size:13.5px;color:#FDE9C0}
.q-score-in{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding:26px 28px;border-radius:16px;border:1px solid var(--line)}
.q-score-in.ok{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.34)}
.q-score-in.ko{background:rgba(248,113,113,.07);border-color:rgba(248,113,113,.32)}
.q-score-n{font-family:'Montserrat';font-weight:800;font-size:clamp(38px,6vw,60px);line-height:1;flex:none}
.q-score-in.ok .q-score-n{color:var(--ok)} .q-score-in.ko .q-score-n{color:var(--bad)}
.q-score-n i{font-style:normal;font-size:.42em;font-weight:700}
.q-corr{border:1px solid var(--line);border-radius:13px;padding:20px 22px;margin-bottom:14px;background:var(--voile-02)}
.q-corr.ok{border-left:3px solid var(--ok)} .q-corr.ko{border-left:3px solid var(--bad)}
.q-corr-hd{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.q-corr-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;
  font-weight:700;background:var(--voile-07);color:var(--txt2);flex:none}
.q-corr-q{font-size:15.5px;color:var(--fort);line-height:1.5;margin-bottom:14px}
.q-corr-l{list-style:none;padding:0;display:grid;gap:7px;margin-bottom:15px}
.q-corr-l li{font-size:14px;color:var(--txt3);line-height:1.5;padding-left:22px;position:relative}
.q-corr-l li b{position:absolute;left:0;top:0;font-weight:700}
.q-corr-l li.bonne{color:var(--ok)} .q-corr-l li.mauvaise{color:var(--bad)}
.q-corr-l li i{font-style:normal;font-size:12px;opacity:.75}
.q-corr-x{font-size:13.5px;color:var(--txt2);line-height:1.65;padding:13px 16px;
  background:rgba(34,211,238,.06);border-radius:10px}
.q-corr-x b{display:block;color:var(--cyan-l);font-size:11px;text-transform:uppercase;letter-spacing:1.1px;margin-bottom:6px}
@media print{ .top,.ft,.q-pied,#btn-refaire,#btn-retour,#btn-cours2,#btn-imprimer,#ek-chat-btn{display:none!important} }

/* --- livrables (livrable.html) --- */
.l-avance{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.l-avance .bar{flex:1}
.l-avance span{font-size:13px;color:var(--txt2);font-weight:600;flex:none}
.l-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
ul.croix{list-style:none;padding:0;display:grid;gap:10px}
ul.croix li{position:relative;padding-left:26px;font-size:13.5px;color:var(--txt2);line-height:1.55}
ul.croix li::before{content:"✕";position:absolute;left:2px;top:0;color:var(--bad);font-size:12px}
@media print{ .top,.ft,#l-print,#ek-chat-btn,.l-avance{display:none!important} }
ul.suivi.liv li{padding:0}
ul.suivi.liv label{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;width:100%;color:var(--txt2)}
ul.suivi.liv label>span{display:block;min-width:0}
ul.suivi.liv label b{display:block;color:var(--fort);font-size:14.5px;font-weight:600;margin-bottom:5px;line-height:1.4}
ul.suivi.liv label span span{display:block;font-size:13.5px;line-height:1.6;color:var(--txt2)}
ul.suivi.liv input{margin-top:3px}
ul.suivi.liv input:checked ~ span b{color:var(--ok)}
ul.suivi.liv input:checked ~ span span{opacity:.6}
.lien-carte{display:block;text-decoration:none;color:inherit;transition:.16s}
.lien-carte:hover{border-color:var(--cyan);transform:translateY(-2px)}
.lien-carte h3{color:var(--fort)}

/* ================================================================
   Confort tactile et lisibilité sur téléphone
   Haïti : le téléphone est l'appareil principal. Cibles ≥ 32 px,
   aucun texte courant sous 12 px, cases de consentement atteignables.
   ================================================================ */

/* cases à cocher : partout, y compris les consentements RGPD */
input[type=checkbox],input[type=radio]{width:24px;height:24px;accent-color:var(--cyan);cursor:pointer;flex:none}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){cursor:pointer}

/* sélecteur de langue : 23×19 px était sous le minimum d'accessibilité */
.langs button{min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:16px}
.langs button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}

@media(max-width:900px){
  /* petits boutons : 27 px de haut, sous le seuil confortable */
  .btn.sm{min-height:36px;padding:8px 14px;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
  .btn{min-height:42px}

  /* liens de navigation isolés — pas les liens en pleine phrase */
  .ft .row a,.side .deco,.lien-mod,.q-pied a,.res-tab{min-height:38px;display:flex;align-items:center}
  .lien-mod{align-items:center}
  .res-tab{display:inline-flex}

  /* lisibilité : plus rien sous 12 px */
  .pill{font-size:12px;padding:4px 10px}
  .pill.xs{font-size:12px;padding:3px 9px}
  .eyebrow{font-size:11.5px;letter-spacing:2px}
  .note-demo{font-size:11.5px}

  /* réponses de quiz : toute la ligne est cliquable et assez haute */
  .q-opt{min-height:52px;align-items:center}
  ul.suivi.liv label{min-height:52px}
}

/* focus visible au clavier sur tous les contrôles interactifs */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.q-opt:focus-within,summary:focus-visible,[tabindex]:focus-visible{
  outline-width:3px;
  outline-style:solid;
  outline-color:#22D3EE;
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(34,211,238,.28)}

/* liens de navigation isolés : hors du cas « lien dans une phrase » */
.lien-retour{display:inline-flex;align-items:center;min-height:38px;padding:2px 2px}
.side .deco,.deconnexion{display:inline-flex;align-items:center;min-height:36px}
@media(max-width:900px){
  /* aucune étiquette sous 12 px, y compris dans l'assistant */
  .eyebrow{font-size:12px}
  .kpi span,.chiffre span,.stat span{font-size:12px}
  #ek-chat .note-demo,#ek-chat .hd span,.note-demo{font-size:12px}
}
/* titres de ressources et adresse de contact : cibles de pleine largeur */
.res-item h3 a{display:inline-flex;align-items:center;min-height:38px}
.contact-mail{display:inline-flex;align-items:center;min-height:38px}

/* réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité, invisible à l'écran */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- états vides : ce qui n'a pas encore commencé --- */
.etat-vide{
  background:var(--voile-025); border:1px dashed var(--line2); border-radius:14px;
  padding:38px 28px; text-align:center; display:grid; gap:10px; justify-items:center;
}
.ev-ic{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  font-size:19px; background:rgba(34,211,238,.09); border:1px solid rgba(34,211,238,.22);
  color:var(--cyan); margin-bottom:4px;
}
.etat-vide h3{font-size:16px; font-weight:600; margin:0; color:var(--fort)}
.etat-vide p{margin:0; font-size:14px; color:var(--txt2); max-width:56ch; line-height:1.65}
.etat-vide .btn{margin-top:8px}
/* lien d'identification dans la barre latérale : cible tactile suffisante */
.who a{display:inline-flex;align-items:center;min-height:32px}
@media(max-width:900px){ .who a{min-height:38px} }

/* --- sélecteur de thème --- */
.theme-btn{
  width:36px;height:36px;flex:none;display:inline-grid;place-items:center;
  background:var(--voile-05);border:1px solid var(--line);border-radius:10px;
  color:var(--txt2);cursor:pointer;transition:.16s;margin-left:8px;padding:0;
}
.theme-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.theme-btn svg{width:17px;height:17px;display:block}
.theme-btn .ic-clair{display:none}
:root[data-theme="light"] .theme-btn .ic-clair{display:block}
:root[data-theme="light"] .theme-btn .ic-sombre{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-btn .ic-clair{display:block}
  :root:not([data-theme="dark"]) .theme-btn .ic-sombre{display:none}
}
@media(max-width:900px){ .theme-btn{width:38px;height:38px} }

/* --- contraste : pastilles et icônes lisibles sur leur propre fond teinté --- */
.pill.cy{color:var(--cyan-l)}
.pill.ok{color:#6EE7B7}
.pill.wa{color:#FCD34D}
.pill.ba{color:#FCA5A5}
.pill.go{color:#FBCF7A}
.ev-ic{color:var(--cyan-l)}
:root[data-theme="light"] .pill.cy{color:#0B5C73}
:root[data-theme="light"] .pill.ok{color:#065F46}
:root[data-theme="light"] .pill.wa{color:#7C4A03}
:root[data-theme="light"] .pill.ba{color:#991B1B}
:root[data-theme="light"] .pill.go{color:#7C4A03}
:root[data-theme="light"] .ev-ic{color:#0B5C73}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .pill.cy{color:#0B5C73}
  :root:not([data-theme="dark"]) .pill.ok{color:#065F46}
  :root:not([data-theme="dark"]) .pill.wa{color:#7C4A03}
  :root:not([data-theme="dark"]) .pill.ba{color:#991B1B}
  :root:not([data-theme="dark"]) .pill.go{color:#7C4A03}
  :root:not([data-theme="dark"]) .ev-ic{color:#0B5C73}
}

/* --- ajustements de contraste du thème clair --- */
:root[data-theme="light"]{ --gold:#8A5504; --gold-d:#6E4303; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --gold:#8A5504; --gold-d:#6E4303; }
}
.lien-mod{color:var(--txt)}
.lien-mod span{color:inherit}

/* Le support de présentation garde son fond sombre dans les deux thèmes :
   une diapositive projetée se lit mieux ainsi, et les illustrations sont
   dessinées pour ce fond. */
body.pres-body{
  --ink:#050B14; --ink2:#0B1626; --ink3:#132234;
  --txt:#E6EEF6; --txt2:#B3C5D6; --txt3:#8FA6BA;
  --fort:#FFFFFF; --cyan:#22D3EE; --cyan-l:#67E8F9; --gold:#F5B942;
  --line:rgba(255,255,255,.09); --line2:rgba(34,211,238,.28);
  --voile-04:rgba(255,255,255,.04); --voile-05:rgba(255,255,255,.05);
  --voile-06:rgba(255,255,255,.06); --voile-08:rgba(255,255,255,.08);
  --barre:rgba(5,11,20,.86); --grain:.55;
  background:#050B14; color:#E6EEF6;
}
/* module actif dans le sommaire : le cyan clair ne tient pas sur fond clair */
:root[data-theme="light"] .lien-mod.on,
:root[data-theme="light"] .lien-mod.on b{color:#0B4A5C}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .lien-mod.on,
  :root:not([data-theme="dark"]) .lien-mod.on b{color:#0B4A5C}
}