/* =========================================================
   Career & CV — Revamped isolated stylesheet (NO collisions)
   Scope: body.career-body, .career-page, #career-root only.
   Load AFTER css/style.css.
   Goals: readable header, white hero, soft-contrast cards,
   elegant spacing, no black-on-black.
   ========================================================= */

/* ---------- Page scope & theme ---------- */
.career-body #career-root,
.career-page,
#career-root{
  --c-bg: #0d1117;
  --c-page: #0d1117;
  --c-ink: #f0f6fc;
  --c-ink-dim: #b8c2cc;
  --c-ink-muted: #7d8590;

  --c-hero: #ffffff;
  --c-hero-ink: #1f2328;
  --c-stroke: rgba(240,246,252,.14);

  --c-card: color-mix(in oklab, #0d1117 86%, #fff 14%);
  --c-card-2: color-mix(in oklab, #0d1117 92%, #fff 8%);
  --c-border: rgba(240,246,252,.12);
  --c-chip: color-mix(in oklab, #0d1117 82%, #fff 18%);

  --c-accent: var(--pri);
  --c-accent-2: var(--text-dim);

  --c-shadow-s: 0 8px 24px rgba(0,0,0,.18);
  --c-shadow-m: 0 14px 40px rgba(0,0,0,.28);
  --r: 8px; --r-xl: 10px; --pad: clamp(12px,1.6vw,18px);
  --gap: clamp(12px,1.8vw,22px); --w: min(1200px,92vw);
}

html[data-theme="dawn"] .career-body #career-root,
html[data-theme="dawn"] .career-page,
html[data-theme="dawn"] #career-root{
  --c-bg: #f6f8fa;
  --c-page: #f6f8fa;
  --c-ink: #1f2328;
  --c-ink-dim: #435264;
  --c-ink-muted: #6b7280;
  --c-hero: #ffffff;
  --c-hero-ink: #1f2328;
  --c-stroke: rgba(31,35,40,.12);
  --c-card: #ffffff;
  --c-card-2: #ffffff;
  --c-border: rgba(31,35,40,.12);
  --c-chip: #eef2f6;
  --c-accent: var(--pri);
  --c-accent-2: #57606a;
  --c-shadow-s: 0 14px 28px rgba(31,35,40,.08);
  --c-shadow-m: 0 22px 44px rgba(31,35,40,.1);
}

/* Canvas & containers */
.career-page{ background: var(--c-page); color: var(--c-ink); }
.career-page .container{ max-width: var(--w); margin-inline:auto; padding-inline: clamp(12px,2vw,24px) }

/* ---------- HEADER ---------- */
body.career-body .header{ position:sticky; top:0; z-index: var(--z-float) }
body.career-body .header .header__row{
  display:flex;
  align-items:center;
  gap: var(--sp-4);
  height: var(--header-h);
  padding-block: 0;
}
body.career-body .header #halo-nav{
  flex: 1 1 auto;
  max-width: none;
  margin-inline: clamp(20px, 4vw, 56px) 0;
}
body.career-body .header .header__actions{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
body.career-body .header .header__actions .btn{
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
}

/* ---------- TITRES & textes ---------- */
.career-kicker{
  margin:0;
  color: var(--c-accent);
  font: 700 .78rem/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.career-title{ font-size: clamp(34px,5.4vw,64px); line-height:1.02; letter-spacing:-.03em; margin:0 }
.career-title span{ color: var(--c-accent) }
.section-title{ font-size: clamp(22px,2.8vw,32px); line-height:1.2; margin:0 }
.section-lead{ color: var(--c-ink-muted); margin:6px 0 0 }

/* ---------- HERO (dark theme for consistency) ---------- */
.career-hero{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 26%),
    var(--c-page);
  color: var(--c-ink);
}
.career-hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .82fr);
  gap: clamp(22px, 3vw, 42px);
  align-items:start;
  padding-block: clamp(24px,4vw,44px) clamp(16px,2vw,24px);
}
.career-hero__main{ display:grid; gap:18px }
.career-hero__head{ display:grid; gap:10px; margin-bottom:4px }
.career-subtitle{ color: var(--c-ink-muted); max-width:70ch }
.career-hero__actions{ display:flex; gap:10px; flex-wrap:wrap }
.career-hero .btn{
  background: var(--c-ink);
  color: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  padding: 10px 18px;
  font: 700 .76rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.career-hero .btn.btn-ghost{ background: transparent; color: var(--c-ink); border:1px solid var(--c-border) }
.career-hero__panel{
  display:grid;
  gap:12px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border:1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--c-shadow-s);
}
.career-hero__status,
.career-hero__fact{
  display:grid;
  gap:6px;
  padding: 14px;
  background: rgba(255,255,255,.025);
  border:1px solid color-mix(in oklab, var(--c-border) 88%, #fff 12%);
  border-radius: var(--r);
}
.career-hero__status strong{
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height:1.4;
}
.career-hero__facts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.career-hero__label{
  color: var(--c-accent);
  font: 700 .74rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.career-hero__fact span:last-child{
  color: var(--c-ink-dim);
  line-height:1.5;
}
.career-hero__divider .container{
  padding-bottom: clamp(10px, 2vw, 16px);
}
.career-hero__divider-line{
  display:block;
  height:1px;
  width:100%;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}

/* ---------- SECTION CV (grid 2 colonnes) ---------- */
.career-cv{ padding-block: clamp(12px,3vw,24px) clamp(32px,6vw,64px) }
.career-grid{ display:grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .88fr); gap: clamp(20px, 3vw, 28px); align-items:start }

/* Viewer */
.career-cv__viewer{ background: var(--c-card-2); border:1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--c-shadow-m); overflow: clip }
.career-cv__toolbar{ position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--pad); border-bottom:1px solid var(--c-border); backdrop-filter: blur(8px) saturate(1.1) }

/* Toggle EN/FR */
.career-toggle{ display:inline-flex; gap:4px; padding:4px; background: color-mix(in oklab, var(--c-card-2) 70%, #fff 30%); border:1px solid var(--c-border); border-radius:10px }
.toggle-pill{ appearance:none; border:0; padding:8px 14px; background:transparent; color:var(--c-ink); border-radius:6px; font:700 .74rem/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; cursor:pointer }
.toggle-pill.is-active{ background: var(--c-ink); color: var(--c-page) }

/* Zoom & controls */
.career-zoom{ display:inline-flex; align-items:center; gap:8px }
.icon-btn{ appearance:none; border:1px solid var(--c-border); background: var(--c-chip); color: var(--c-ink); padding:8px 12px; border-radius:8px; font:700 .76rem/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; cursor:pointer }
.icon-btn[aria-pressed="true"]{ outline:2px solid color-mix(in oklab, var(--c-accent) 30%, #fff 70%); outline-offset:2px }
.zoom-level{ min-width:48px; text-align:center; color: var(--c-ink-muted); font-variant-numeric: tabular-nums }
.divider{ width:1px; height:24px; background: var(--c-border) }

/* Viewport */
.career-cv__viewport{ position:relative; min-height:60vh; background: color-mix(in oklab, var(--c-page) 85%, #fff 15%) }
.career-cv__frame{ display:block; width:100%; height: clamp(60vh, 70vh, 80vh); border:0; background:#fff }

/* Skeleton */
.career-cv__loader{ position:absolute; inset:0; padding: var(--pad); display:grid; gap:8px; pointer-events:none }
.skeleton-line{ height:10px; width:60%; background: linear-gradient(90deg,#dfe6f2,#eef3fb,#dfe6f2); border-radius:6px; opacity:.35 }
.skeleton-block{ height:60%; width:100%; background: linear-gradient(90deg,#dfe6f2,#eef3fb,#dfe6f2); border-radius:10px; opacity:.25 }
.career-cv__error{ background:#182233; color:#eef3fb; padding:16px; border-top:1px dashed var(--c-border) }

/* Aside */
.career-cv__aside{
  background: var(--c-card);
  border:1px solid var(--c-border);
  border-radius: var(--r);
  padding: calc(var(--pad) + 4px);
  box-shadow: var(--c-shadow-s);
}
.career-highlights{ margin:10px 0 12px; padding-left:18px; display:grid; gap:6px }
.career-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px }
.tag{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:6px; border:1px dashed var(--c-border); background: var(--c-chip); color: var(--c-ink); font:600 .74rem/1 var(--mono); letter-spacing:.05em; text-transform:uppercase }
.career-cta .btn{ width:100%; border-radius:12px }

/* ---------- Journey ---------- */
.career-journey{ padding: 0 0 clamp(28px,6vw,72px) }
.career-timeline{
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 92px;
}
.career-timeline::before{
  content:"";
  position:absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 46%, transparent), transparent);
}
.career-timeline__item{
  position: relative;
  display: grid;
  gap: 12px;
}
.career-timeline__year{
  position: absolute;
  left: -92px;
  top: 8px;
  width: 58px;
  padding: 12px 8px;
  text-align: center;
  font: 700 .95rem/1 var(--mono);
  color: var(--c-accent);
  background: color-mix(in oklab, var(--c-card) 80%, #000 20%);
  border:1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--c-shadow-s);
}
.career-timeline__item::before{
  content:"";
  position:absolute;
  left: -65px;
  top: 28px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.career-timeline__card{
  background: var(--c-card);
  border:1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--c-shadow-s);
  padding: clamp(18px,2vw,28px);
}
.career-timeline__tag{
  margin:0 0 12px;
  color: var(--c-accent);
  font: 700 .82rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.career-timeline__title{
  margin:0 0 12px;
  font-size: clamp(24px,3vw,36px);
  line-height:1.05;
  letter-spacing:-.03em;
  color: var(--c-ink);
}
.career-timeline__text{
  margin:0;
  font-size: clamp(1rem,1.7vw,1.2rem);
  line-height:1.65;
  color: var(--c-ink-muted);
}

/* ---------- LinkedIn preview ---------- */
.career-linkedin{ padding-block: clamp(28px,6vw,72px) }
.career-section-head{ display:grid; gap:6px; margin-bottom:12px }
.section-actions{ display:flex; gap:8px; flex-wrap:wrap }
.career-linkedin__frame-wrap{
  position:relative;
  width: min(640px, 100%);
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 20px);
  display:grid;
  place-items:center;
  border:1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-card-2);
  box-shadow: var(--c-shadow-m);
  overflow: clip;
}
.career-linkedin__frame{ display:block; width:100%; height: clamp(50vh,60vh,72vh); border:0; background:#fff }
.career-linkedin__fallback{ position:absolute; inset:0; display:grid; place-content:center; gap:10px; text-align:center; padding:20px; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%) }
.career-linkedin__fallback img{ width:min(560px,80%); height:auto; border-radius:10px; border:1px solid var(--c-border); box-shadow: var(--c-shadow-s) }

/* ---------- Elevator Speech ---------- */
.career-pitch{ padding-block: clamp(28px,6vw,72px) }
.career-pitch__card{ background: var(--c-card); border:1px solid var(--c-border); border-radius: var(--r-xl); padding: clamp(14px,2vw,20px); box-shadow: var(--c-shadow-m) }
.pitch-text{ font-size: clamp(16px,1.6vw,18px); line-height:1.6; margin:0 }

/* Overlay fullscreen */
.career-pitch__overlay[aria-modal="true"]{ position:fixed; inset:0; display:grid; place-items:center; background: color-mix(in oklab, #000 60%, transparent 40%); z-index:1000 }
.career-pitch__overlay[hidden]{ display:none!important }
.career-pitch__overlay-inner{ width:min(980px,92vw); max-height:86vh; background:#0b111a; color:#eef3fb; border:1px solid #253044; border-radius:18px; box-shadow:0 20px 80px rgba(0,0,0,.55); display:grid; grid-template-rows:auto 1fr; overflow:hidden }
.overlay-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid #1d2736 }
.overlay-body{ padding: clamp(14px,2vw,20px); display:grid; gap:12px }
.overlay-content{ font-size: clamp(18px,2.2vw,28px); line-height:1.5 }
.overlay-timer{ height:4px; background:#0f1621; border-radius:999px; overflow:hidden }
.overlay-timer .timer-bar{ display:block; height:100%; width:0%; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)) }

/* ---------- Cards (opportunities/help/ambition) ---------- */
.career-opps{ padding-block: clamp(28px,6vw,72px) }
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap) }
.card{ background: var(--c-card); border:1px solid var(--c-border); border-radius: var(--r); padding: var(--pad); box-shadow: var(--c-shadow-s); display:grid; gap:10px }
.card-title{ margin:0; font-size: clamp(18px,1.9vw,22px) }
.bullets{ margin:0; padding-left:18px; display:grid; gap:6px }

/* ---------- Contact ---------- */
.career-contact{ padding-block: clamp(24px,5vw,56px); background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%) }
.career-contact .btn{ border-radius:10px }

/* ---------- Buttons (scoped) ---------- */
#career-root .btn{ padding:10px 16px; border-radius:10px; font-weight:800; letter-spacing:.2px }
#career-root .btn.btn-ghost{ background: transparent; border:1px solid var(--c-border); color: var(--c-ink) }
#career-root .icon-btn:hover, #career-root .toggle-pill:hover{ filter: brightness(1.06) }
#career-root .btn:focus-visible, #career-root .toggle-pill:focus-visible, #career-root .icon-btn:focus-visible{ outline:2px solid color-mix(in oklab, var(--c-accent) 40%, #fff 60%); outline-offset:2px }

html[data-theme="dawn"] #career-root .career-cv__error{
  background:#eef2f6;
  color: var(--c-ink);
}

html[data-theme="dawn"] #career-root .career-linkedin__fallback{
  background: linear-gradient(180deg, rgba(9,105,218,.04), transparent 40%);
}

html[data-theme="dawn"] #career-root .career-pitch__overlay-inner{
  background:#ffffff;
  color: var(--c-ink);
  border-color: var(--c-border);
}

html[data-theme="dawn"] #career-root .overlay-head{
  border-bottom-color: var(--c-border);
}

html[data-theme="dawn"] #career-root .overlay-timer{
  background:#e5e7eb;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .career-grid{ grid-template-columns:1fr }
  .career-hero__grid{ grid-template-columns:1fr }
  .career-hero__facts{ grid-template-columns:1fr 1fr }
  .career-cv__viewport{ min-height:52vh }
  .card-grid{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 720px){
  .career-hero__actions{ flex-direction:column; gap:8px }
  .career-hero__actions .btn{ width:100%; text-align:center }
  body.career-body .header .header__actions{ flex-wrap:wrap }
  body.career-body .header .header__row{ height:auto; padding-block:10px }
  
  /* Simplify CV toolbar on mobile */
  .career-cv__toolbar{ flex-direction:column; gap:8px; padding:8px }
  .career-zoom{ flex-wrap:wrap; justify-content:center; gap:6px }
  .career-zoom .divider{ display:none }
  .icon-btn{ padding:6px 10px; font-size:0.85rem }
  .career-hero__facts{ grid-template-columns:1fr }
  
  /* Make PDF viewport taller on mobile */
  .career-cv__viewport{ min-height:70vh }
  .career-cv__frame{ height:70vh }
  .career-timeline{
    padding-left: 0;
    gap: 14px;
  }
  .career-timeline::before{ display:none }
  .career-timeline__year{
    position: static;
    width: fit-content;
  }
  .career-timeline__item::before{ display:none }
  
  .card-grid{ grid-template-columns:1fr }
  
  /* LinkedIn fallback always visible on mobile */
  .career-linkedin__frame-wrap iframe{ display:none }
  .career-linkedin__fallback{ position:relative !important; display:grid !important }
  .career-linkedin__fallback[hidden]{ display:grid !important }
}

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important }
  .overlay-timer .timer-bar{ width:0!important }
}

/* Utilities */
#career-root [hidden]{ display:none!important }

/* LinkedIn - show fallback image since badge script often blocked */
.career-linkedin__fallback{
  position: relative !important;
  display: grid !important;
  background: transparent !important;
}
.career-linkedin__fallback[hidden]{
  display: grid !important;
}
.career-linkedin__fallback img{
  width: min(560px, 100%);
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  box-shadow: var(--c-shadow-s);
}
.career-linkedin__fallback p{
  color: var(--c-ink-muted);
  font-size: 0.9rem;
  margin-top: 8px;
}

/* Hide the badge div since it rarely loads */
.LI-profile-badge{
  display: none;
}