@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap');

:root {
  --bg0: #070a12;
  --bg1: #0b1220;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.08);
  --surface-solid: #0f172a;
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.68);
  --faint: rgba(255, 255, 255, 0.52);
  --border: rgba(255, 255, 255, 0.10);
  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --success: #34d399;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.35);
  --radius: 22px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(56, 189, 248, 0.22), transparent 55%),
    radial-gradient(900px 600px at 90% 15%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(900px 600px at 50% 100%, rgba(52, 211, 153, 0.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  line-height: 1.8;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.container {
  width: min(1100px, 92%);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 10, 18, 0.62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.logo {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 650;
  letter-spacing: 0.2px;
  font-size: 1.05rem;
  color: var(--text);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.95rem;
}

.nav a {
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.nav a:hover {
  text-decoration: none;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 720px) {
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav { gap: 10px; }
}

.hero {
  padding: 56px 0 24px;
}

.hero-card {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-card:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 8px);
  background: radial-gradient(800px 240px at 20% 10%, rgba(56, 189, 248, 0.22), transparent 55%),
              radial-gradient(800px 260px at 80% 20%, rgba(167, 139, 250, 0.18), transparent 55%);
  opacity: 0.75;
  pointer-events: none;
  filter: blur(18px);
}

.hero-card > * { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.70);
  font-weight: 650;
}

.eyebrow:before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.14);
}

.hero h1 {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  letter-spacing: -0.02em;
  margin: 14px 0 10px;
}

.hero p {
  color: var(--muted);
  font-size: 1.08rem;
  margin: 0 0 14px;
  max-width: 70ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 600;
}

.btn:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
}

.btn.primary {
  border: 1px solid rgba(56, 189, 248, 0.35);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(167, 139, 250, 0.18));
}

.btn.primary:hover {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(167, 139, 250, 0.22));
}

.section { padding: 18px 0 52px; }

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.95rem;
}

.pill strong { color: var(--text); font-weight: 650; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.card {
  grid-column: span 6;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  padding: 22px;
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

.card.featured {
  grid-column: span 12;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(255, 255, 255, 0.04));
  border-color: rgba(56, 189, 248, 0.22);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.card h2 {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.35rem;
  margin: 12px 0 10px;
  line-height: 1.25;
}

.card p { color: var(--muted); margin: 0 0 12px; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  color: var(--faint);
  font-size: 0.95rem;
}

.highlights {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.highlights li { margin: 6px 0; }

@media (max-width: 920px) {
  .card { grid-column: span 12; }
}

.site-footer {
  padding: 28px 0 50px;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}

.site-footer p { color: var(--muted); margin: 0; }

/* Post */
.post { padding: 30px 0 72px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin-top: 12px;
}

.back-link:hover { text-decoration: none; color: var(--text); }

.post-hero {
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  border-radius: calc(var(--radius) + 6px);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}

.post-hero h1 {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0 0 10px;
  font-size: clamp(2rem, 3vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lead {
  color: var(--muted);
  font-size: 1.1rem;
  margin: 0 0 16px;
  max-width: 75ch;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--faint);
  font-size: 0.95rem;
}

.post-meta span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

.post-content {
  margin-top: 18px;
  max-width: 78ch;
}

.post-content p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.88); }

.post-content h2 {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.55rem;
  margin: 34px 0 12px;
  line-height: 1.2;
}

.post-content h3 {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.2rem;
  margin: 24px 0 10px;
}

.post-content ul {
  margin: 0 0 14px;
  padding-left: 18px;
  color: var(--muted);
}

.post-content li { margin: 6px 0; }

.callout {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 16px;
  margin: 18px 0;
  color: var(--muted);
}

.callout strong { color: var(--text); }

.callout.accent {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(255, 255, 255, 0.03));
}

blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid rgba(56, 189, 248, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.80);
}

.post-cta {
  margin-top: 34px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.14), rgba(56, 189, 248, 0.12));
  padding: 22px;
}

.post-cta h2 {
  margin: 0 0 8px;
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.post-cta p { margin: 0 0 14px; color: var(--muted); }

/* --------------------------------------------
   Added styles for "sexy" blog article layout
   to support progress bar, sticky table of contents,
   callouts, mini cards, and responsive grid.
   These classes are used in the blog article pages
   (power-bi-decisions, tableau-storytelling, automatisation-qualite-donnees).
*/

/* Top progress bar that indicates reading progress */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 100;
  background: transparent;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.8), rgba(167, 139, 250, 0.8));
  transition: width 0.1s ease-out;
}

/* Layout for blog posts: a sidebar for the table of contents and the main article */
.post-layout {
  display: flex;
  gap: 32px;
  margin-top: 24px;
}

/* Table of contents sidebar */
.post-layout .toc {
  flex: 0 0 220px;
  max-width: 220px;
  position: sticky;
  top: 120px;
  align-self: flex-start;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.post-layout .toc .toc-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--text);
}
.post-layout .toc a {
  display: block;
  margin: 4px 0;
  color: inherit;
  text-decoration: none;
}
.post-layout .toc a:hover {
  color: var(--text);
}

/* Main article takes remaining space */
.post-layout article {
  flex: 1 1 auto;
}

/* Responsive adjustments: stack TOC above article on small screens */
@media (max-width: 900px) {
  .post-layout {
    flex-direction: column;
  }
  .post-layout .toc {
    position: relative;
    top: 0;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--muted);
  }
  .post-layout .toc a {
    display: inline-block;
    margin: 0;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
  }
  .post-layout .toc a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
  }
}

/* Accentuated TL;DR callout */
.callout.tldr {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(167, 139, 250, 0.05));
  color: var(--text);
}

/* Two-column grid used in posts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

/* Mini cards used inside the grid */
.mini-card {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
}
.mini-title {
  font-weight: bold;
  margin-bottom: 6px;
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
}

/* Top bar for post actions and back link */
.post-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  gap: 16px;
}
.post-actions a {
  margin-left: 8px;
}
.post-actions .btn {
  padding: 6px 14px;
  font-size: 0.95rem;
}