/* ==========================================================================
   AI LAB SENEGAL — page parcours de formation (s'ajoute à styles.css)
   ========================================================================== */

/* ---------- En-tête ---------- */
.formation-hero{
  background:radial-gradient(1000px 480px at 80% 0%,#17304e,var(--bleu-nuit) 65%);
  color:#dbe4f0;padding:calc(var(--nav-h) + 4.5rem) 0 3.6rem;
}
.formation-hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem);max-width:900px;margin:.9rem 0 1rem;font-weight:800}
.formation-hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--vert-clair),var(--jaune));-webkit-background-clip:text;background-clip:text;color:transparent}
.formation-tagline{max-width:720px;font-size:1.05rem;color:#c6d2e2}
.formation-badges{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0}
.formation-badges li{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:.45rem 1rem;border-radius:999px;font-size:.8rem;color:#dbe4f0;
}
.formation-badges b{color:var(--jaune);font-weight:700}
.formation-hero .hero-ctas{margin:1.4rem 0 1.8rem;animation:none}
.formation-public{font-size:.88rem;color:#8fa1ba;max-width:760px}
.formation-public b{color:#c6d2e2}

/* ---------- Bandeau ligne rouge ---------- */
.ligne-rouge{background:#fff;border-bottom:1px solid #f1d4d6}
.ligne-rouge .container{display:flex;gap:1.1rem;align-items:flex-start;padding:1.4rem 0;border-left:4px solid var(--rouge);padding-left:1.4rem}
.ligne-rouge .lr-ico{font-size:1.4rem;line-height:1.2}
.ligne-rouge p{font-size:.93rem;color:var(--texte);max-width:940px}
.ligne-rouge b{color:var(--bleu-nuit)}

/* ---------- Phases ---------- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.phase{
  background:#fff;border:1px solid #e5e9f0;border-radius:var(--radius);padding:1.8rem 1.6rem;
  display:flex;flex-direction:column;gap:.7rem;position:relative;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.phase:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(14,27,45,.1)}
.phase-num{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--vert)}
.phase h3{font-size:1.05rem;line-height:1.35}
.phase-duree{display:block;font-size:.72rem;font-weight:600;color:#5c6b83;letter-spacing:.08em;margin-top:.3rem}
.phase p{font-size:.87rem;flex:1}
.phase-tag{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.4rem .9rem;border-radius:999px;background:var(--gris);color:#5c6b83;
}
.phase-tag.pt-vert{background:rgba(0,148,68,.1);color:var(--vert)}
.phase-tag.pt-jaune{background:rgba(255,194,10,.16);color:#8a6a00;transition:transform .3s var(--ease)}
.phase-tag.pt-jaune:hover{transform:translateX(4px)}
.phase-highlight{border:2px solid var(--jaune);box-shadow:0 14px 34px rgba(255,194,10,.14)}
.phase-highlight .phase-num{color:#b58600}

/* ---------- Modules e-learning (accordéons natifs <details>) ---------- */
.modules{display:grid;gap:1rem;margin-top:2.4rem}
.module{
  background:#fff;border:1px solid #e5e9f0;border-radius:var(--radius);
  overflow:hidden;transition:box-shadow .4s var(--ease);
}
.module[open]{box-shadow:0 16px 36px rgba(14,27,45,.09)}
.module summary{
  display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;
  padding:1.2rem 1.5rem;cursor:pointer;list-style:none;
}
.module summary::-webkit-details-marker{display:none}
.module summary::after{content:"+";margin-left:auto;font-size:1.5rem;font-weight:600;color:var(--vert);transition:transform .3s var(--ease)}
.module[open] summary::after{transform:rotate(45deg)}
.module-num{
  flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--bleu-nuit);color:var(--jaune);font-weight:800;font-size:.95rem;
}
.module-titre{font-weight:700;color:var(--bleu-nuit);font-size:1rem}
.module-titre .cat{margin-left:.5rem;vertical-align:middle}
.module-duree{font-size:.72rem;font-weight:600;color:#5c6b83;letter-spacing:.08em}
.module-corps{padding:0 1.5rem 1.5rem 1.5rem;max-width:820px}
.module-corps p{font-size:.92rem;margin-bottom:.8rem}
.module-corps ul{margin:0 0 .8rem 1.2rem;font-size:.9rem;display:grid;gap:.4rem}
.module-note{font-size:.85rem;color:#5c6b83;font-style:italic}
.module-pont{
  font-style:normal;background:rgba(0,148,68,.07);border-left:3px solid var(--vert);
  padding:.8rem 1rem;border-radius:0 12px 12px 0;color:var(--texte);
}
.module-pont a{color:var(--vert);font-weight:600;text-decoration:underline}

/* ---------- Quiz d'essai ---------- */
.quiz{display:grid;gap:1.4rem;margin-top:2.4rem;max-width:820px}
.quiz-q{background:#fff;border:1px solid #e5e9f0;border-radius:var(--radius);padding:1.6rem 1.7rem}
.quiz-q h3{font-size:1rem;margin-bottom:1rem}
.quiz-opts{display:grid;gap:.6rem}
.quiz-opts button{
  text-align:left;padding:.8rem 1.1rem;border-radius:12px;border:1.5px solid #dfe5ee;
  background:var(--gris);font-size:.9rem;font-weight:500;color:var(--texte);
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.quiz-opts button:hover{border-color:var(--vert);transform:translateX(4px)}
.quiz-opts button:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.quiz-q.repondu .quiz-opts button{pointer-events:none;opacity:.65}
.quiz-opts button.bonne{background:rgba(0,148,68,.12);border-color:var(--vert);color:var(--vert);opacity:1 !important;font-weight:600}
.quiz-opts button.mauvaise{background:rgba(227,27,35,.08);border-color:var(--rouge);color:var(--rouge);opacity:1 !important}
.quiz-explication{
  display:none;margin-top:1rem;font-size:.85rem;color:#5c6b83;
  border-left:3px solid var(--jaune);padding-left:1rem;
}
.quiz-q.repondu .quiz-explication{display:block}
.quiz-resultat{
  background:linear-gradient(120deg,var(--bleu-nuit),var(--bleu-encre));color:#dbe4f0;
  border-radius:var(--radius);padding:2rem;display:grid;gap:.7rem;justify-items:start;
}
.quiz-resultat .qr-score{font-size:1.25rem;font-weight:800;color:#fff}
.quiz-resultat p{font-size:.92rem}
.quiz-resultat .btn{margin-top:.4rem}

/* ---------- Outils IA gratuits ---------- */
.outils-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem}
.outil{
  background:rgba(255,255,255,.05);border:1px solid #24395c;border-radius:var(--radius);
  padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .35s,transform .4s var(--ease);
}
.outil:hover{border-color:var(--vert-clair);transform:translateY(-5px)}
.outil h3{color:#fff;font-size:1.02rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.outil-badge{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,194,10,.16);color:var(--jaune);padding:.25rem .6rem;border-radius:999px;
}
.outil-badge.ob-vert{background:rgba(0,181,83,.16);color:var(--vert-clair)}
.outil-usage{font-size:.85rem;color:#a9b8cc;flex:1}
.outil-usage b{color:#dbe4f0}
.outil-domaine{font-size:.74rem;color:#8fa1ba;letter-spacing:.04em;font-weight:600}
.outils-garde{
  margin-top:2rem;display:flex;gap:1rem;align-items:flex-start;
  background:rgba(227,27,35,.08);border:1px solid rgba(227,27,35,.35);border-radius:var(--radius);
  padding:1.3rem 1.5rem;
}
.outils-garde span{font-size:1.3rem}
.outils-garde p{font-size:.88rem;color:#dbe4f0}
.outils-garde b{color:#fff}

/* ---------- Journée pratique ---------- */
.jour-j{list-style:none;counter-reset:seq;display:grid;gap:0;margin-top:2.4rem;max-width:860px}
.jour-j li{
  position:relative;padding:1.1rem 0 1.1rem 3.4rem;font-size:.92rem;
  border-left:2px solid #dfe5ee;margin-left:1.1rem;
}
.jour-j li::before{
  counter-increment:seq;content:counter(seq);
  position:absolute;left:-1.15rem;top:1rem;width:2.2rem;height:2.2rem;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;
  background:var(--vert);color:#fff;box-shadow:0 0 0 5px rgba(0,148,68,.12);
}
.jour-j li:last-child{border-left-color:transparent}
.jour-j b{color:var(--bleu-nuit)}
.pratique-infos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.2rem}
.pratique-infos div{background:#fff;border:1px solid #e5e9f0;border-radius:14px;padding:1.1rem 1.2rem;display:grid;gap:.3rem}
.pratique-infos b{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vert)}
.pratique-infos span{font-size:.84rem;color:var(--texte)}

/* ---------- Bloc demande ---------- */
.demande-bloc{grid-template-columns:1fr 1.05fr}
.demande-points{list-style:none;display:grid;gap:.5rem;margin-top:1.2rem;font-size:.9rem;color:#e3f5ea}
.demande-points li{display:flex;gap:.55rem;align-items:flex-start}
.demande-points .icn{margin-top:.18em;color:var(--jaune)}
.nl-form textarea{
  width:100%;padding:.95rem 1.2rem;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);color:#fff;font-family:inherit;font-size:.9rem;resize:vertical;
  transition:border-color .3s,background .3s;
}
.nl-form textarea::placeholder{color:#cfe9db}
.nl-form textarea:focus{outline:none;border-color:var(--jaune);background:rgba(255,255,255,.18)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .phases,.outils-grid{grid-template-columns:1fr}
  .pratique-infos{grid-template-columns:1fr 1fr}
  .demande-bloc{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pratique-infos{grid-template-columns:1fr}
  .module summary{gap:.7rem;padding:1rem 1.1rem}
  .module-corps{padding:0 1.1rem 1.2rem}
  .jour-j li{padding-left:2.6rem}
}

/* Prochaines sessions (annonces du back-office) */
#prochainesSessions{margin-top:1.1rem}
.ps-titre{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#cdd9ea;margin:0 0 .5rem}
.ps-item{font-size:.85rem;line-height:1.55;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:.7rem .9rem;margin-bottom:.55rem;color:#e8eef7}
.ps-item span{color:#cdd9ea}