/* ============================================================
   PAGES-CARRIERES.CSS — Athenia Academy
   Styles propres à la page Carrières
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   CARRIÈRES — grille métiers et cards
════════════════════════════════════════════════════════════ */

.careers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-bottom: 3rem; }

.career-card {
  padding: 2.5rem;
  border: 1px solid rgba(29,29,31,0.08);
  border-radius: 24px;
  background: #FFFFFF;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.career-card:hover {
  border-color: rgba(0,168,107,0.22);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.career-level { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; }
.level-bar    { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.level-fill   { height: 100%; background: var(--accent); border-radius: 2px; }

.salary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 20px;
  background: rgba(0,168,107,0.08);
  border: 1px solid rgba(0,168,107,0.18);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  color: #00A86B;
  margin-top: 0.75rem;
}


/* ════════════════════════════════════════════════════════════
   CARRIERES — Système visuel aligné sur la Home
   Remplace l'ancien bloc careers-hero latéral (flex-end)
   par un hero full-width centré avec vidéo en fond.
════════════════════════════════════════════════════════════ */

/* Page wrapper — variables home héritées, pas d'overflow:hidden */
.careers-page {
  --home-white: #FFFFFF;
  --home-bg: #F5F5F7;
  --home-bg-soft: #F5F5F7;
  --home-text: #1D1D1F;
  --home-muted: #6E6E73;
  --home-border: rgba(29,29,31,0.10);
  --home-green: #00A86B;
  --home-green-bright: #00E676;
  --home-graphite: #0B0F14;
  --home-radius: 28px;
  background: var(--home-white);
}

/* Système reveal (identique à home-page) */
.careers-page .reveal,
.careers-page [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(.2,.8,.2,1), transform 0.75s cubic-bezier(.2,.8,.2,1);
}
.careers-page .reveal.is-visible,
.careers-page [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── HERO full-width centré ──────────────────────────────── */
.carr-hero-fw {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #0B0F14, #1D1D1F);
}

/* Vidéo en fond absolu */
.carr-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carr-hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.72) contrast(.96);
}

/* Overlay dégradé vertical pour lisibilité */
.carr-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.18) 0%,
      rgba(0,0,0,.50) 50%,
      rgba(0,0,0,.82) 100%);
}

/* Contenu centré */
.carr-hero-content {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 140px 0 96px;
  text-align: center;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: carr-fade-up .9s cubic-bezier(.22,.9,.36,1) both;
}

@keyframes carr-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow centré */
.carr-hero-eyebrow {
  justify-content: center;
  color: var(--home-green-bright, #00e091);
}
.carr-hero-eyebrow::before {
  background: var(--home-green-bright, #00e091);
}

/* H1 pleine largeur, centré */
.carr-hero-h1 {
  width: 100%;
  max-width: 100%;
  margin: 20px 0 28px;
  color: #FFFFFF;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(52px, 8vw, 116px);
  font-weight: 800;
  letter-spacing: -.068em;
  line-height: .92;
  text-align: center;
}
.carr-hero-h1 span {
  color: var(--home-green-bright, #00e091);
}

/* Sous-titre centré */
.carr-hero-sub {
  max-width: 780px;
  margin: 0 auto 36px;
  color: rgba(255,255,255,.82);
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.5;
  text-align: center;
}
.carr-hero-sub strong {
  color: #FFFFFF;
  font-weight: 700;
}

/* Badges salaire centrés */
.carr-hero-salary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 36px;
}

/* Badges salary adaptés fond sombre */
.carr-hero-fw .salary-item.without-ai {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color: rgba(255,255,255,.80);
}
.carr-hero-fw .salary-item.with-ai {
  background: rgba(0,168,107,.20);
  border-color: rgba(0,168,107,.70);
  color: #FFFFFF;
}

/* Source */
.careers-hero-source {
  max-width: 280px;
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  line-height: 1.45;
}

/* CTAs centrés */
.carr-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── SECTIONS SUIVANTES ─────────────────────────────────── */
.careers-page .careers-partners {
  background: var(--home-bg-soft);
}
.careers-page .careers-jobs {
  background: #FFFFFF;
}
.careers-page .careers-local-card {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 820px;
  margin: 0 auto 36px;
  padding: 24px;
  border: 1px solid rgba(0,168,107,.18);
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  text-align: left;
}
.careers-page .ticker-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--home-border);
  border-radius: 30px;
  box-shadow: 0 18px 60px rgba(0,0,0,.05);
}
.careers-page .careers-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 88px;
}
.careers-page .career-card {
  padding: 30px;
  border: 1px solid var(--home-border);
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.careers-page .career-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,168,107,.24);
  box-shadow: 0 22px 70px rgba(0,0,0,.07);
}
.careers-page .careers-path {
  margin-top: 24px;
}
.careers-page .careers-path .home-section-head h2 span,
.careers-page .careers-final h2 span {
  color: var(--home-green);
}

/* CTA final */
.careers-page .careers-final {
  max-width: 920px;
  margin: 88px auto 0;
  padding: 72px 34px;
  border-radius: 36px;
  background: linear-gradient(135deg, #0B0F14, #1D1D1F);
  color: #FFFFFF;
  text-align: center;
}
.careers-page .careers-final h2 {
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(38px, 5vw, 76px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .96;
}
.careers-page .careers-final p {
  max-width: 520px;
  margin: 22px auto 34px;
  color: rgba(255,255,255,.76);
  font-size: 18px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   CARRIÈRES — FAQ (même modèle visuel que la Home)
════════════════════════════════════════════════════════════ */

#carr-faq .home-section-head--single-line {
  max-width: 1180px;
}

@media (min-width: 1080px) {
  #carr-faq .home-section-head--single-line h2 {
    white-space: nowrap;
  }
}

#carr-faq .home-faq-list {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

#carr-faq .home-faq-item {
  position: relative;
}

#carr-faq .home-faq-question {
  min-height: 66px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42) 52%, rgba(255, 255, 255, .26)),
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .86), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(0, 168, 107, .12), transparent 34%);
  box-shadow:
    0 22px 58px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .92);
  color: var(--text, #1D1D1F);
  cursor: pointer;
  list-style: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

#carr-faq .home-faq-question::-webkit-details-marker {
  display: none;
}

#carr-faq .home-faq-question:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 168, 107, .28);
  box-shadow:
    0 28px 70px rgba(15, 23, 42, .13),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

#carr-faq .home-faq-question span {
  min-width: 0;
  overflow: hidden;
  color: var(--text, #1D1D1F);
  font-size: clamp(12px, 1.55vw, 17px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#carr-faq .home-faq-question i {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-right: 2px solid var(--accent, #00A86B);
  border-bottom: 2px solid var(--accent, #00A86B);
  transform: rotate(45deg);
  transition: transform .25s ease;
}

#carr-faq .home-faq-item[open] .home-faq-question i {
  transform: translateY(4px) rotate(-135deg);
}

#carr-faq .home-faq-answer {
  margin: 10px 16px 0;
  padding: 20px 24px 22px;
  border: 1px solid rgba(29, 29, 31, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  color: var(--text2, #6E6E73);
  font-size: 15.5px;
  line-height: 1.58;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .07);
}

@media (max-width: 640px) {
  #carr-faq .home-faq-question {
    min-height: 58px;
    padding: 0 18px;
    border-radius: 18px;
  }

  #carr-faq .home-faq-answer {
    margin-right: 8px;
    margin-left: 8px;
    padding: 18px;
  }
}

/* À retenir : bloc discret, aligné sur le standard Home/Academy
   (pages-carrieres.css n'inclut pas pages-shared.css). */
#carr-a-retenir .home-section-head {
  max-width: 680px;
}
#carr-a-retenir .home-section-head h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -.03em;
  line-height: 1.12;
}
#carr-a-retenir .home-section-head p {
  font-size: 15.5px;
  line-height: 1.6;
}