/* ==========================================================================
   TADAGBÉ — pages des programmes Startups
   S'appuie sur espaces.css et diaspora.css ; n'ajoute ici que les composants
   propres à ces pages : parcours numéroté, recherche de mentor, créneaux,
   grille des espaces de formation.
   ========================================================================== */

/* ---------- 1. Accent par programme -------------------------------------- */
.stu-incubateur{--esp:#C08A2E;--esp-clair:#E9AC26}
.stu-mentorat{--esp:#3E8035;--esp-clair:#5DBA3F}
.stu-formation{--esp:#2F63A8;--esp-clair:#6BA4DE}
.stu-financement{--esp:#14532B;--esp-clair:#3E8035}
.stu-visibilite{--esp:#5B3E9B;--esp-clair:#9B84D8}
.stu-reseautage{--esp:#C7362F;--esp-clair:#E0655E}

/* ---------- 2. Le parcours en étapes ------------------------------------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;counter-reset:etape}
.etapes li{
  position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;
  background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s
}
.etapes li:hover{transform:translateY(-4px);box-shadow:var(--ombre-fort);border-color:transparent}
/* le fil qui relie les étapes d'une même rangée */
.etapes li::after{
  content:"";position:absolute;right:-14px;top:50%;width:14px;height:1.5px;
  background:var(--bord);pointer-events:none
}
.etapes li:nth-child(4n)::after,.etapes li:last-child::after{display:none}
.etape__n{
  flex:none;font-family:'Archivo',Arial,sans-serif;font-size:15px;font-weight:900;
  letter-spacing:-.02em;color:var(--esp-clair);line-height:1.1
}
.etapes b{font-family:'Archivo',Arial,sans-serif;font-size:13px;line-height:1.3}

/* ---------- 3. Recherche de mentor --------------------------------------- */
.recherche{
  display:grid;grid-template-columns:repeat(3,1fr);gap:11px;align-items:end;margin-top:26px;
  background:var(--gris);border:1px solid var(--bord);border-radius:var(--r-lg);padding:22px 24px
}
.recherche .field{margin-bottom:0}
.recherche .btn{grid-column:span 3;justify-self:start}

/* ---------- 4. Créneaux de rendez-vous ----------------------------------- */
.creneaux{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:14px;margin-top:24px}
.creneau{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:18px 20px}
.creneau__t{
  display:block;margin-bottom:12px;font-size:10.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texte-3)
}
.creneau b{
  display:flex;align-items:center;gap:10px;padding:10px 13px;margin-bottom:8px;
  border:1px solid var(--bord);border-radius:8px;font-size:13px;
  transition:border-color .3s,color .3s,transform .3s var(--ease)
}
.creneau b:last-child{margin-bottom:0}
.creneau b:hover{border-color:var(--esp);color:var(--esp);transform:translateX(3px)}
.creneau svg{color:var(--esp)}

/* ---------- 5. Grille des espaces de formation --------------------------- */
.form-esps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
.form-esp{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px;
  background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s
}
.form-esp:hover{transform:translateY(-5px);box-shadow:var(--ombre-fort);border-color:transparent}
.form-esp .ic{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--a) 12%,#fff);color:var(--a)
}
.form-esp:hover .ic{transform:scale(1.1) rotate(-5deg)}
.form-esp b{font-family:'Archivo',Arial,sans-serif;font-size:13.5px;line-height:1.25}
.form-esp__go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--a);transition:gap .3s var(--ease)
}
.form-esp:hover .form-esp__go{gap:11px}

/* ---------- 6. Responsive ------------------------------------------------ */
@media(max-width:1080px){
  .etapes{grid-template-columns:repeat(3,1fr)}
  .etapes li:nth-child(4n)::after{display:block}
  .etapes li:nth-child(3n)::after{display:none}
  .form-esps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .etapes{grid-template-columns:repeat(2,1fr)}
  .etapes li:nth-child(3n)::after{display:block}
  .etapes li:nth-child(2n)::after{display:none}
  .recherche{grid-template-columns:repeat(2,1fr)}
  .recherche .btn{grid-column:span 2}
  .form-esps{grid-template-columns:repeat(2,1fr)}
  .creneaux{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:620px){
  .etapes{grid-template-columns:minmax(0,1fr)}
  .etapes li::after{display:none!important}
  .recherche{grid-template-columns:minmax(0,1fr);padding:18px}
  .recherche .btn{grid-column:span 1;width:100%}
  .form-esps{grid-template-columns:minmax(0,1fr)}
}