/* ======================================================================
   FORMATION CARDS — premium "course platform" redesign for the 3 split
   programme pages (Formation-Professionnelle / Formation-Superieure-FEDE /
   Formation-Continue). Visual language only — same classes, same content,
   same JS hooks (.c-fcard__more, .c-fcard__detail, data-fallback-icon).
   Flat, sharp-edged, restrained — matches the site's own "plain bordered
   surface" system (no pills, no gradients, no glow shadows).
   ====================================================================== */

/* ---------- Split hero (illustration + copy) ---------- */
.c-fhero{
  padding-top: calc(84px + var(--space-10));
  padding-bottom: var(--space-16);
  background: var(--white);
}
.c-fhero__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: var(--space-10); align-items:center;
}
.c-fhero__eyebrow-row{ display:flex; align-items:center; gap:.7rem; margin-bottom: var(--space-5); }
.c-fhero__badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; border-radius: var(--radius-sm);
  background: var(--blue-50); color: var(--blue-700);
  font-family: var(--font-display); font-size:.78rem; font-weight:600;
  letter-spacing:.03em;
}
.c-fhero__badge svg{ color: var(--yellow-500); flex-shrink:0; }
.c-fhero__title{
  font-family: var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.015em;
  font-size: clamp(2.3rem, 3.6vw + 1rem, 4rem);
  color: var(--blue-900);
}
.c-fhero__title em{ font-style:normal; color: var(--yellow-500); }
.c-fhero__sub{
  margin-top: var(--space-5); font-size: var(--fs-lede); line-height:1.65; color: var(--gray-600); max-width: 52ch;
}
.c-fhero__cta{ margin-top: var(--space-8); display:flex; gap:1rem; flex-wrap:wrap; }

.c-fhero__art{
  position:relative;
  border-radius: var(--radius-md); overflow:hidden;
  aspect-ratio: 4/3.3;
  background: var(--blue-50);
  border: 1px solid var(--gray-200);
}
.c-fhero__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.c-fhero__art::after{
  content:""; position:absolute; inset:0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(11,37,69,.06);
  pointer-events:none;
}

/* ---------- Card grid ---------- */
.c-fgrid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}
.c-fgrid--single{ grid-template-columns: 1fr; max-width: 760px; margin-inline:auto; }

.c-fcard{
  position:relative;
  display:flex; flex-direction:column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow:hidden;
  transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.c-fcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--yellow-500);
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out);
  z-index:2;
}
.c-fcard:hover{
  box-shadow: 0 12px 28px rgba(11,37,69,.1);
  border-color: var(--gray-300);
}
.c-fcard:hover::before{ transform:scaleX(1); }

.c-fcard__media{
  position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--blue-50);
}
.c-fcard__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s var(--ease-out);
}
.c-fcard:hover .c-fcard__media img{ transform: scale(1.03); }

.c-fcard__media--placeholder{
  display:flex; align-items:center; justify-content:center;
  background: var(--blue-900);
}
.c-fcard__media--placeholder svg{ color: rgba(255,255,255,.8); width:44px; height:44px; }

.c-fcard__level{
  position:absolute; top: var(--space-4); left: var(--space-4);
  padding:.35rem .8rem; border-radius: var(--radius-sm);
  background: rgba(8,18,38,.78);
  color:#fff; font-family: var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.03em;
}

.c-fcard__body{ padding: var(--space-7) var(--space-6) var(--space-6); display:flex; flex-direction:column; flex:1; }
.c-fcard__name{
  font-family: var(--font-display); font-size:1.35rem; font-weight:600; color: var(--blue-900); line-height:1.22;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: var(--space-3);
}
.c-fcard__desc{ color: var(--gray-600); font-size:.92rem; line-height:1.6; flex:1; }

.c-fcard__meta{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top: var(--space-5);
}
.c-fcard__meta span{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem; border-radius: var(--radius-sm); background: var(--gray-50); border:1px solid var(--gray-200);
  font-size:.78rem; color: var(--blue-900); font-weight:500;
}
.c-fcard__meta svg{ color: var(--yellow-500); flex-shrink:0; }

.c-fcard__actions{
  display:flex; align-items:center; gap:.75rem; margin-top: var(--space-6); flex-wrap:wrap;
  padding-top: var(--space-5); border-top: 1px solid var(--gray-100);
}
.c-fcard__more{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-display); font-size:.85rem; font-weight:600; color: var(--blue-700);
  padding:.5rem 0; position:relative;
}
.c-fcard__more::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor; transition: right .35s var(--ease-out);
}
.c-fcard__more:hover::after{ right:0; }
.c-fcard__more svg{ transition: transform .35s var(--ease-out); }
.c-fcard__more[aria-expanded="true"] svg{ transform: rotate(180deg); }
.c-fcard__enroll{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.7rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--blue-900); color:#fff;
  font-family: var(--font-display); font-size:.85rem; font-weight:500;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.c-fcard__enroll:hover{ background: var(--yellow-500); color: var(--blue-950); transform: translateY(-2px); }

.c-fcard__detail{
  height:0; overflow:hidden;
}
.c-fcard__detail-inner{
  padding-top: var(--space-5); margin-top: var(--space-5); border-top:1px solid var(--gray-200);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-5);
}
.c-fcard__detail h4{
  font-family: var(--font-display); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--yellow-500); font-weight:600; margin-bottom:.6rem;
}
.c-fcard__detail ul{ display:flex; flex-direction:column; gap:.45rem; }
.c-fcard__detail li{ font-size:.85rem; color: var(--gray-600); padding-left:.9rem; position:relative; }
.c-fcard__detail li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:1px; background: var(--gray-400); }
.c-fcard__detail p{ font-size:.9rem; color: var(--blue-900); font-weight:500; grid-column:1/-1; }

/* ---------- Cross-links footer band ---------- */
.c-fcross{
  padding-block: var(--space-16);
  background: var(--gray-50);
  text-align:center;
}
.c-fcross__links{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top: var(--space-6); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .c-fhero__grid{ grid-template-columns:1fr; }
  .c-fhero__art{ order:-1; aspect-ratio: 16/9; }
  .c-fgrid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .c-fcard__body{ padding: var(--space-5); }
  .c-fcard__actions{ flex-direction:column; align-items:stretch; }
  .c-fcard__enroll{ margin-left:0; justify-content:center; }
  .c-fhero__cta{ flex-direction:column; }
  .c-fhero__cta .c-btn{ justify-content:center; }
}