/* ============================================================
   FACTOxRH Blog — Design Professionnel v2
   Björn Morestin · Psychologue du travail & ex-DRH
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --primary:    #132852;
  --primary-lt: #1a3568;
  --accent:     #F59D33;
  --accent-dk:  #d4861e;
  --blue:       #1d72aa;
  --blue-lt:    #e8f4fb;
  --text:       #1a1a2e;
  --text-light: #5a6478;
  --border:     #e2e8f0;
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --max-w:      760px;
  --radius:     10px;
}

/* ── BASE ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: var(--text) !important;
  background: var(--bg) !important;
  padding: 0 !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── READING PROGRESS BAR ──────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #ffb84d);
  z-index: 9999;
  transition: width 0.15s linear;
  border-radius: 0 2px 2px 0;
}

/* ── STICKY HEADER ─────────────────────────────────────────── */
.blog-header {
  background: var(--primary) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.22) !important;
}

.blog-header-inner {
  max-width: calc(var(--max-w) + 80px);
  margin: 0 auto;
  padding: .7rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: .02em !important;
  flex-shrink: 0;
}
.logo img { height: 32px; width: auto; border-radius: 3px; display: block; }
.logo span { color: #fff !important; }

.blog-header nav { display: flex; align-items: center; gap: 1.8rem; }
.blog-header nav a {
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
  transition: color .15s !important;
  white-space: nowrap;
}
.blog-header nav a:hover { color: var(--accent) !important; }

/* ── ARTICLE PAGE WRAPPER ──────────────────────────────────── */
.article-page {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem 5rem !important;
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb {
  font-size: .78rem !important;
  color: var(--text-light) !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  flex-wrap: wrap !important;
  letter-spacing: .01em;
}
.breadcrumb a { color: var(--blue) !important; text-decoration: none !important; }
.breadcrumb a:hover { text-decoration: underline !important; }
.breadcrumb .sep { color: #c9d1dc; }

/* ── ARTICLE META ─────────────────────────────────────────── */
.article-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem 2.5rem !important;
  flex-wrap: wrap !important;
  font-size: .82rem !important;
  color: var(--text-light) !important;
  margin: .75rem 0 2.5rem !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border) !important;
}
.article-meta .author { font-weight: 600 !important; color: var(--primary) !important; }

/* ── HEADINGS ─────────────────────────────────────────────── */
h1 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 2.05em !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  line-height: 1.18 !important;
  margin: 0 0 .4rem !important;
  letter-spacing: -.02em;
}

h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 1.35em !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  margin: 2.8rem 0 .8rem !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em;
  padding-bottom: .5rem !important;
  border-bottom: 2px solid #eef2f7 !important;
  display: block !important;
  align-items: unset !important;
  gap: unset !important;
}

h3 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 1.08em !important;
  font-weight: 700 !important;
  color: var(--blue) !important;
  margin: 2rem 0 .5rem !important;
  line-height: 1.35 !important;
}

h4 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 1em !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 1.5rem 0 .4rem !important;
}

/* ── PARAGRAPHS & LISTS ────────────────────────────────────── */
p {
  text-align: justify !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  margin-bottom: 1.1rem !important;
  color: var(--text) !important;
}

ul, ol { padding-left: 1.5em !important; margin-bottom: 1.2rem !important; }
ul li, ol li { margin-bottom: .55rem !important; line-height: 1.7; }

a { color: var(--blue) !important; transition: color .15s !important; }
a:hover { color: var(--accent) !important; }

strong { font-weight: 700; color: inherit; }
em { font-style: italic; }

/* ── BLOCKQUOTE ───────────────────────────────────────────── */
blockquote {
  position: relative;
  margin: 2rem 0 !important;
  padding: 1.2rem 1.5rem 1.2rem 1.8rem !important;
  background: var(--bg-soft) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  color: var(--text) !important;
  font-style: italic !important;
}
blockquote p { text-align: left !important; margin-bottom: .4rem !important; color: inherit !important; }
blockquote p:last-child { margin-bottom: 0 !important; }

/* ── HORIZONTAL RULE ──────────────────────────────────────── */
hr {
  border: none !important;
  border-top: 2px solid #eef2f7 !important;
  margin: 2.5rem 0 !important;
}

/* ── CONTENT BOXES ────────────────────────────────────────── */
.box,
div.box {
  background: var(--blue-lt) !important;
  border: 1px solid #bee3f8 !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  padding: 1.4rem 1.6rem !important;
  margin: 2rem 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 10px rgba(19,40,82,.06) !important;
  font-size: .97em !important;
}
.box strong, div.box strong {
  font-size: 1em !important;
  display: block !important;
  margin-bottom: .7rem !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}
.box ul, div.box ul { margin-bottom: 0 !important; }

.exemple {
  background: #fffbf3 !important;
  border: none !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  padding: 1.1rem 1.5rem !important;
  margin: 1.8rem 0 !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  box-sizing: border-box !important;
  font-size: .97em !important;
}

/* Generic colored info boxes */
div[style*="border: 2px solid #3498db"],
div[style*="border:2px solid #3498db"] {
  background: var(--blue-lt) !important;
  border: 1px solid #bee3f8 !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: var(--radius) !important;
  padding: 1.4rem 1.6rem !important;
  margin: 2rem 0 !important;
}

/* ── INTRO FLEX (box à côté du texte) ─────────────────────── */
.intro-flex { display: block !important; }
.intro-flex .box,
.intro-flex div.box { margin-top: 1.5rem !important; }
@media (min-width: 680px) {
  .intro-flex { display: flex !important; gap: 2rem !important; align-items: flex-start !important; }
  .intro-text  { flex: 2 !important; min-width: 0 !important; }
  .intro-flex .box,
  .intro-flex div.box { flex: 1 !important; min-width: 0 !important; margin-top: 0 !important; }
}

/* ── FAQ / DETAILS ────────────────────────────────────────── */
details {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: .6rem !important;
  padding: 0 1.2rem !important;
  transition: background .15s;
}
details[open] { background: #fff !important; }
summary {
  font-weight: 600 !important;
  cursor: pointer !important;
  color: var(--primary) !important;
  padding: .85rem 0 !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: .97em;
  user-select: none;
  outline: none !important;
}
summary::-webkit-details-marker { display: none !important; }
summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.2em;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 1rem;
}
details[open] summary::after { content: '−'; }
details p {
  margin: 0 0 .9rem !important;
  color: var(--text) !important;
  font-size: .95em !important;
  text-align: left !important;
}

/* ── SIGNATURE ────────────────────────────────────────────── */
.signature,
p.signature {
  margin: 3.5rem 0 0 !important;
  padding: 1.5rem 1.8rem !important;
  background: var(--bg-soft) !important;
  border-top: 2px dashed var(--accent) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  font-style: italic !important;
  color: var(--primary) !important;
  font-size: .93em !important;
  text-align: left !important;
}

/* ── CTA INLINE ───────────────────────────────────────────── */
a[style*="background-color: #2ecc71"],
a[style*="background-color:#2ecc71"] {
  background: var(--accent) !important;
  color: #fff !important;
  padding: .75rem 1.5rem !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background .15s, transform .1s !important;
}
a[style*="background-color: #2ecc71"]:hover,
a[style*="background-color:#2ecc71"]:hover {
  background: var(--accent-dk) !important;
  transform: translateY(-1px) !important;
}

/* ── ARTICLE FOOTER ───────────────────────────────────────── */
.article-footer {
  background: var(--primary) !important;
  color: rgba(255,255,255,.65) !important;
  padding: 2.5rem 2rem !important;
  font-size: .82rem !important;
  text-align: center !important;
  margin-top: 0 !important;
}
.footer-inner { max-width: calc(var(--max-w) + 80px); margin: 0 auto; }
.footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: .4rem 2rem !important;
  margin-bottom: .9rem !important;
}
.footer-links a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.footer-links a:hover { color: var(--accent) !important; }
.article-footer p { margin: 0 !important; }

/* ── BACK TO TOP ──────────────────────────────────────────── */
.back-to-top {
  position: fixed !important;
  bottom: 1.8rem !important;
  right: 1.8rem !important;
  background: var(--primary) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
  transition: background .15s, transform .15s !important;
  z-index: 50 !important;
}
.back-to-top.visible { display: flex !important; }
.back-to-top:hover { background: var(--accent) !important; transform: translateY(-2px) !important; }

/* ── TABLES ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .93em; }
th { background: var(--primary); color: #fff; padding: .7rem 1rem; text-align: left; font-weight: 600; }
td { padding: .65rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:nth-child(even) td { background: var(--bg-soft); }
tr:last-child td { border-bottom: none; }

/* ── IMAGES ───────────────────────────────────────────────── */
img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* ── FRAGMENT WRAPPER ─────────────────────────────────────── */
/* Pour les articles fragments sans structure propre */
.fragment-content {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: 1em !important;
  line-height: 1.85 !important;
  color: var(--text) !important;
}
.fragment-content p { text-align: justify !important; hyphens: auto !important; margin-bottom: 1.1rem !important; }
.fragment-content h2 { font-size: 1.35em !important; font-weight: 700 !important; color: var(--primary) !important; margin: 2.8rem 0 .8rem !important; padding-bottom: .5rem !important; border-bottom: 2px solid #eef2f7 !important; }
.fragment-content h3 { font-size: 1.08em !important; font-weight: 700 !important; color: var(--blue) !important; margin: 2rem 0 .5rem !important; }
.fragment-content ul, .fragment-content ol { padding-left: 1.5em !important; margin-bottom: 1.2rem !important; }
.fragment-content ul li, .fragment-content ol li { margin-bottom: .55rem !important; }
.fragment-content blockquote { margin: 2rem 0 !important; padding: 1.2rem 1.5rem 1.2rem 1.8rem !important; background: var(--bg-soft) !important; border-left: 4px solid var(--accent) !important; border-radius: 0 var(--radius) var(--radius) 0 !important; font-style: italic !important; }
.fragment-content blockquote p { text-align: left !important; }
.fragment-content hr { border: none !important; border-top: 2px solid #eef2f7 !important; margin: 2.5rem 0 !important; }

/* ── TWO-COLUMN LAYOUT (desktop sidebar) ─────────────────── */

/* On desktop, .article-page expands to fit both columns */
@media (min-width: 1100px) {
  :root { --max-w: 760px; }

  .article-page {
    max-width: 1140px !important;
    padding: 2.5rem 2rem 5rem !important;
  }

  .article-layout {
    display: grid !important;
    grid-template-columns: 1fr 270px !important;
    gap: 3rem !important;
    align-items: start !important;
  }

  .article-main {
    min-width: 0 !important;
  }

  .article-sidebar {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* ── TOC ──────────────────────────────────────────────────── */
.toc {
  background: var(--bg-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 1.2rem 1.4rem !important;
  overflow: hidden !important;
}

.toc-title {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: var(--text-light) !important;
  margin: 0 0 .85rem !important;
  text-align: left !important;
}

.toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.toc-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.toc-list a {
  display: block !important;
  padding: .32rem .5rem !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--text-light) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 4px 4px 0 !important;
  transition: color .15s, border-color .15s, background .15s !important;
  line-height: 1.4 !important;
}

.toc-list a:hover {
  color: var(--primary) !important;
  background: rgba(19,40,82,.05) !important;
  border-left-color: var(--border) !important;
}

.toc-list a.active {
  color: var(--primary) !important;
  font-weight: 700 !important;
  border-left-color: var(--accent) !important;
  background: rgba(245,157,51,.07) !important;
}

/* sub-items (H3) */
.toc-list li.toc-sub a {
  padding-left: 1.3rem !important;
  font-size: .78rem !important;
  font-weight: 400 !important;
}

/* ── SIDEBAR AUTHOR ───────────────────────────────────────── */
.sidebar-author {
  display: flex !important;
  align-items: center !important;
  gap: .85rem !important;
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 1rem 1.2rem !important;
}

.sidebar-author-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: .9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  letter-spacing: .03em !important;
}

.sidebar-author strong {
  display: block !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  margin-bottom: .15rem !important;
}

.sidebar-author span {
  font-size: .75rem !important;
  color: var(--text-light) !important;
  line-height: 1.3 !important;
}

/* ── SIDEBAR CTA ──────────────────────────────────────────── */
.sidebar-cta {
  background: var(--primary) !important;
  border-radius: var(--radius) !important;
  padding: 1.3rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .7rem !important;
}

.sidebar-cta p {
  font-size: .84rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.92) !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

.sidebar-cta-btn {
  display: block !important;
  text-align: center !important;
  padding: .62rem 1rem !important;
  border-radius: 7px !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .15s, transform .1s, color .15s !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: 2px solid var(--accent) !important;
}

.sidebar-cta-btn:hover {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.sidebar-cta-btn--outline {
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.35) !important;
}

.sidebar-cta-btn--outline:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.6) !important;
  color: #fff !important;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size: 16px !important; }
  h1 { font-size: 1.65em !important; }
  h2 { font-size: 1.18em !important; }
  h3 { font-size: 1.02em !important; }
  .article-page { padding: 1.8rem 1.2rem 4rem !important; }
  .blog-header-inner { padding: .6rem 1.2rem; }
  .blog-header nav { gap: 1rem; }
  .blog-header nav a { font-size: .78rem !important; }
}
@media (max-width: 480px) {
  .blog-header nav .hide-xs { display: none !important; }
  h1 { font-size: 1.4em !important; }
  blockquote { padding: 1rem 1.2rem 1rem 1.4rem !important; }
}