/* ==========================================================================
   CERPE — Styles spécifiques à la page d'accueil
   Chargé uniquement sur l'accueil via index.php ($isHome).
   ========================================================================== */

/* ---- Héro ---- */
.hero { background: var(--grad); color: var(--ink); position: relative; overflow: hidden; }
.hero__inner {
  padding-block: clamp(2.5rem, 8vw, 5.5rem);
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5);
}
.hero__kicker {
  font-family: var(--font-head); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase; color: #5a5410;
}
.hero h1 { font-size: var(--step-5); margin-top: var(--sp-3); }
.hero__aside { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 46ch; }
.hero__aside p { font-size: var(--step-1); color: #3f3b12; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__meta {
  display: grid; grid-template-columns: repeat(2, auto); gap: var(--sp-4) var(--sp-6);
  border-top: 0.12rem solid #1c1b1622; padding-top: var(--sp-4); margin-top: var(--sp-2);
}
.hero__meta dt { font-family: var(--font-head); font-weight: 700; font-size: var(--step-3); line-height: 1; }
.hero__meta dd { margin: 0.3rem 0 0; font-size: var(--step--1); color: #4a460f; max-width: 22ch; }
@media (min-width: 58rem) {
  .hero__inner { grid-template-columns: 1.25fr 0.75fr; align-items: end; }
  .hero__meta { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); }
}

/* ---- Bloc intro « Le CERPE » ---- */
.intro { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center; }
.intro__media { aspect-ratio: 4/3; }
img.intro__media { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* Photo éditable des cartes formation (même zone que .card .ph : 16/10) */
.card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.intro h2 { font-size: var(--step-3); }
.intro p { color: var(--ink-soft); font-size: var(--step-1); }
@media (min-width: 56rem) { .intro { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); } }

/* ---- Bandeau Espace apprenant ---- */
.login-band__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
  padding-block: var(--sp-7); align-items: center;
}
.login-band h2 { font-size: var(--step-3); color: #fff; }
.login-band p { color: #c9c6b6; max-width: 48ch; }
@media (min-width: 54rem) { .login-band__inner { grid-template-columns: 1.4fr auto; } }

/* ---- Actualités (news-cards) — styles partagés avec page-actualites.css ---- */
.news-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); }
.news-card__img { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--paper-3); flex: none; }
.news-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__img .ph { aspect-ratio: 16/9; min-height: unset; }
.news-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.news-card__meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.news-card__date { font-size: var(--step--1); color: var(--ink-soft); font-family: var(--font-head); }
.news-card__title { font-size: var(--step-1); line-height: 1.3; margin: 0; }
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { text-decoration: underline; }
.news-card__excerpt { color: var(--ink-soft); font-size: var(--step-0); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__more { font-family: var(--font-head); font-weight: 600; font-size: var(--step--1);
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.news-card__more:hover { text-decoration: underline; }
.news-card__more .arrow { color: var(--olive); }

/* ---- Teaser Vie étudiante ---- */
.vie { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
.vie__feature {
  position: relative; min-height: 18rem; color: #fff;
  display: flex; align-items: flex-end; padding: var(--sp-5); overflow: hidden;
}
.vie__feature .ph { position: absolute; inset: 0; }
.vie__feature .ph__label { z-index: 1; }
.vie__feature .vie__caption {
  position: relative; z-index: 2;
  background: linear-gradient(0deg, rgba(28,27,22,.82), rgba(28,27,22,.2));
}
.vie__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.vie__item {
  border: 1px solid var(--line); padding: var(--sp-4);
  display: flex; gap: var(--sp-3); align-items: flex-start;
}
.vie__item .n { font-family: var(--font-head); font-weight: 700; color: var(--olive); }
.vie__item h3 { font-size: var(--step-1); }
.vie__item p { color: var(--ink-soft); font-size: var(--step--1); }
@media (min-width: 56rem) { .vie { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }

/* ---- Réseau & partenaires : bloc UNAFORIS ---- */
.unaforis {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: center;
  border: 1px solid var(--line); background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: var(--sp-5);
}
.unaforis__logo { aspect-ratio: 5/2; display: flex; align-items: center; justify-content: center; }
.unaforis__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.unaforis .eyebrow { margin-bottom: 0.6rem; }
.unaforis h3 { font-size: var(--step-2); }
.unaforis p { color: var(--ink-soft); font-size: var(--step-0); margin-top: 0.5rem; max-width: 52ch; }
@media (min-width: 48rem) { .unaforis { grid-template-columns: 1fr 15rem; gap: var(--sp-6); } }

/* ---- Bandeau défilant partenaires (100 % CSS, pause au survol) ---- */
.logo-marquee {
  overflow: hidden; position: relative;
  border-block: 1px solid var(--line); padding-block: var(--sp-4);
}
.logo-marquee::before,
.logo-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 2; pointer-events: none;
}
.logo-marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.logo-marquee::after  { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.logo-marquee__track {
  display: flex; gap: var(--sp-3); width: max-content;
  animation: logo-scroll 40s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-tile {
  border: 1px solid var(--line); aspect-ratio: 3/2;
  background-color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0.6rem;
}
.logo-tile span { font-family: var(--font-head); font-size: var(--step--1); color: #9a9684; }
.logo-tile img { max-width: 78%; max-height: 66%; object-fit: contain; }
.logo-marquee .logo-tile { flex: none; width: 12rem; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-marquee__track { animation: none; } }

/* Bouton pause/lecture du bandeau (RGAA 2.2.2 : commande accessible clavier + tactile) */
.logo-marquee-wrap { position: relative; }
.marquee-toggle {
  position: absolute; top: 0.4rem; right: 0.4rem; z-index: 3;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, .25); transition: background .15s ease;
}
.marquee-toggle:hover { background: var(--olive); }
.marquee-toggle:focus-visible { outline: 0.18rem solid var(--yellow-2); outline-offset: 0.2rem; }
.marquee-toggle__i { width: 1.1rem; height: 1.1rem; }
.marquee-toggle__i--play { display: none; }
.logo-marquee-wrap.is-paused .logo-marquee__track { animation-play-state: paused; }
.logo-marquee-wrap.is-paused .marquee-toggle__i--pause { display: none; }
.logo-marquee-wrap.is-paused .marquee-toggle__i--play { display: block; }
/* Mouvement réduit : le bandeau est déjà figé → le bouton n'a plus d'objet */
@media (prefers-reduced-motion: reduce) { .marquee-toggle { display: none; } }

/* ---- Certification Qualiopi ---- */
.cert {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-4); align-items: center;
  border: 1px solid var(--line); background: var(--paper);
  padding: clamp(1.25rem, 3vw, 2rem); margin-top: var(--sp-5);
}
.cert__logo { width: 100%; max-width: 15rem; height: auto; margin-inline: auto; }
.cert h3 { font-size: var(--step-1); }
.cert p { color: var(--ink-soft); font-size: var(--step-0); margin-top: 0.4rem; max-width: 48ch; }
@media (min-width: 48rem) { .cert { grid-template-columns: 15rem 1fr; gap: var(--sp-6); } }