/* ============================================================
 * ESIC Online — Heroes par type de page (charte 2026)
 * Style unifié pour tous les heroes secondaires (hors homepage)
 * Le hero homepage (.esic-home-v2) garde son code rain spécifique.
 * ============================================================ */

/* ─── Style commun à tous les heroes secondaires ─── */
.esic-archive-hero,
.esic-formation-hero,
.esic-page-hero,
body:not(.home) .esic-hero {
  position: relative !important;
  background: linear-gradient(135deg, #0F172A 0%, #1A2C75 100%) !important;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Barre signature gradient 4px tout en haut */
.esic-archive-hero::before,
.esic-formation-hero::before,
.esic-page-hero::before,
body:not(.home) .esic-hero::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1A2C75 0%, #1F8FB0 50%, #5BD3A8 100%) !important;
  z-index: 2;
  display: block !important;
  pointer-events: none;
}

/* Glow radial subtil teal au centre/haut */
.esic-archive-hero::after,
.esic-formation-hero::after,
.esic-page-hero::after,
body:not(.home) .esic-hero::after {
  content: "";
  position: absolute;
  top: -20%; left: 50%;
  width: 800px; height: 800px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(31,143,176,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Contenu hero au-dessus */
.esic-archive-hero > *,
.esic-formation-hero > *,
.esic-page-hero > *,
body:not(.home) .esic-hero > * {
  position: relative;
  z-index: 1;
}

/* Variantes silo (couleur charte étendue) — gardent l'esprit ancré navy + accent silo */
.esic-archive-hero--blue,
.esic-formation-hero--blue {
  background: linear-gradient(135deg, #0F172A 0%, #1A2C75 100%) !important;
}
.esic-archive-hero--cyan,
.esic-formation-hero--cyan {
  background: linear-gradient(135deg, #0F172A 0%, #176D88 100%) !important;
}
.esic-archive-hero--violet,
.esic-formation-hero--violet {
  background: linear-gradient(135deg, #0F172A 0%, #3FA682 100%) !important;
}

/* Texte hero — éclairci pour bonne lisibilité sur navy */
.esic-archive-hero h1,
.esic-formation-hero h1,
.esic-page-hero h1,
body:not(.home) .esic-hero h1,
.esic-archive-hero__title,
.esic-formation-hero__title {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.esic-archive-hero p,
.esic-formation-hero p,
.esic-page-hero p,
body:not(.home) .esic-hero p,
.esic-archive-hero__sub,
.esic-formation-hero__sub,
.esic-archive-hero__desc,
.esic-formation-hero__desc {
  color: rgba(255,255,255,0.78) !important;
}

/* Eyebrow / kicker dans hero secondaire */
.esic-archive-hero__eyebrow,
.esic-formation-hero__eyebrow,
.esic-page-hero__eyebrow {
  color: #5BD3A8 !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

/* Breadcrumb dans hero */
.esic-breadcrumb,
.esic-formation-hero__breadcrumb {
  color: rgba(255,255,255,0.65) !important;
}
.esic-breadcrumb a,
.esic-formation-hero__breadcrumb a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none;
}
.esic-breadcrumb a:hover,
.esic-formation-hero__breadcrumb a:hover {
  color: #5BD3A8 !important;
}

/* Badges et meta dans hero (durée, niveau, etc.) */
.esic-formation-hero__meta,
.esic-formation-hero__badges,
.esic-archive-hero__meta {
  color: rgba(255,255,255,0.85);
}
.esic-formation-hero__meta strong,
.esic-archive-hero__meta strong {
  color: #fff;
}

/* CTA dans hero (boutons) — version dark-friendly */
.esic-archive-hero .esic-btn--primary,
.esic-formation-hero .esic-btn--primary,
.esic-page-hero .esic-btn--primary {
  background: #fff !important;
  color: #1A2C75 !important;
  border-color: #fff !important;
}
.esic-archive-hero .esic-btn--primary:hover,
.esic-formation-hero .esic-btn--primary:hover,
.esic-page-hero .esic-btn--primary:hover {
  background: linear-gradient(135deg, #1A2C75 0%, #1F8FB0 50%, #5BD3A8 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.esic-archive-hero .esic-btn--outline,
.esic-formation-hero .esic-btn--outline,
.esic-page-hero .esic-btn--outline,
.esic-archive-hero .esic-btn--ghost,
.esic-formation-hero .esic-btn--ghost {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(8px);
}
.esic-archive-hero .esic-btn--outline:hover,
.esic-formation-hero .esic-btn--outline:hover,
.esic-page-hero .esic-btn--outline:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: #5BD3A8 !important;
}

/* ─── 404 hero — épuré charte ─── */
.esic-404 {
  background: linear-gradient(135deg, #0F172A 0%, #1A2C75 100%) !important;
  color: #fff !important;
}
.esic-404::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1A2C75 0%, #1F8FB0 50%, #5BD3A8 100%);
}
.esic-404__digit {
  background: linear-gradient(135deg, #5BD3A8 0%, #1F8FB0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Page Contact — conserve son fond mais met l'accent charte */
.esic-contact-hero,
.esic-contact-page__hero {
  background: linear-gradient(135deg, #0F172A 0%, #1A2C75 100%) !important;
  color: #fff;
}
.esic-contact-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1A2C75 0%, #1F8FB0 50%, #5BD3A8 100%);
}

/* ─── Section title eyebrows partout (hors hero) ─── */
.esic-section-title__eyebrow,
.esic-eyebrow:not(.v2-eyebrow) {
  color: #1F8FB0 !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

/* Ligne décorative sous les titres de section */
.esic-section-title__divider {
  background: linear-gradient(90deg, #1A2C75 0%, #1F8FB0 50%, #5BD3A8 100%) !important;
  height: 3px !important;
  width: 60px;
  border-radius: 2px;
}