/* ============================================================
   DrepaPulse Blog — Design System
   Couleurs neutres + accent violet #5b21b6
   ============================================================ */

:root {
  --purple:     #5b21b6;
  --purple-light: #7c3aed;
  --purple-faint: #f5f3ff;
  --gray-50:    #f9fafb;
  --gray-100:   #f3f4f6;
  --gray-200:   #e5e7eb;
  --gray-300:   #d1d5db;
  --gray-400:   #9ca3af;
  --gray-500:   #6b7280;
  --gray-700:   #374151;
  --gray-900:   #111827;
  --red:        #dc2626;
  --green:      #059669;
  --blue:       #2563eb;
  --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:       'SF Mono', 'Fira Code', 'Consolas', monospace;
  --radius:     8px;
  --shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10);
}

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

html { font-size: var(--font-size-base, 16px); scroll-behavior: smooth; }

body {
  font-family: var(--font-body, var(--font));
  color: var(--gray-900);
  background: #fff;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--color-heading, var(--gray-900)); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Container ──────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-900);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand-name strong { color: var(--purple); }

.main-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.main-nav a {
  color: var(--gray-700);
  font-size: .875rem;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-app-link { color: var(--purple); font-weight: 700; }
.main-nav a:hover {
  background: var(--purple-faint);
  color: var(--purple);
  text-decoration: none;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 8px;
  color: var(--gray-700);
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--purple-faint) 0%, #ede9fe 100%);
  border-bottom: 1px solid #ddd6fe;
  padding: 64px 0 48px;
  margin-bottom: 48px;
}
.hero-content { max-width: 660px; }
.hero-badge {
  display: inline-block;
  background: var(--purple);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 16px;
}
.hero p {
  font-size: 1.1rem;
  color: var(--gray-500);
  max-width: 540px;
}

/* ── Layout 2-cols ───────────────────────────────────────────── */
.home-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding-bottom: 64px;
}

/* ── Post Card ───────────────────────────────────────────────── */
.posts-feed { display: flex; flex-direction: column; gap: 28px; }

.post-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.post-card-img { display: block; aspect-ratio: 16/7; overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }

.post-card-body { padding: 24px; }

.post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.post-cat {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 100px;
  color: var(--purple);
  background: var(--purple-faint);
}
.post-number { font-size: .8rem; color: var(--gray-400); font-family: var(--mono); font-weight: 600; }
.post-date { font-size: .8rem; color: var(--gray-400); }

.post-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.post-title a { color: var(--gray-900); }
.post-title a:hover { color: var(--purple); text-decoration: none; }

.post-excerpt { font-size: .9rem; color: var(--gray-500); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.read-more { font-size: .875rem; font-weight: 600; color: var(--purple); }
.read-more:hover { text-decoration: underline; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.widget { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; }
.widget-title { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-500); margin-bottom: 14px; }
.cat-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cat-list a { display: block; padding: 8px 12px; border-radius: 4px; color: var(--gray-700); font-size: .875rem; border-left: 3px solid var(--gray-300); transition: background .15s; }
.cat-list a:hover { background: var(--gray-100); text-decoration: none; }
.widget-disclaimer { background: #fffbeb; border-color: #fde68a; }
.widget-disclaimer p { font-size: .82rem; color: #92400e; line-height: 1.5; }

/* ── Article page ────────────────────────────────────────────── */
.page-article { padding: 48px 0; }
.article-main { max-width: 760px; }

.article-meta-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.article-title { font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.article-meta { display: flex; align-items: center; gap: 16px; font-size: .85rem; color: var(--gray-400); margin-bottom: 32px; }
.views::before { content: '· '; }
.article-cover { width: 100%; border-radius: var(--radius); margin-bottom: 32px; aspect-ratio: 16/7; object-fit: cover; }
.article-lead { font-size: 1.1rem; color: var(--gray-500); border-left: 3px solid var(--purple); padding-left: 20px; margin-bottom: 32px; font-style: italic; }

/* ── Prose ───────────────────────────────────────────────────── */
.prose { max-width: 100%; }
.prose h2 { font-size: 1.45rem; font-weight: 700; margin: 2em 0 .75em; padding-bottom: .35em; border-bottom: 1px solid var(--gray-200); color: var(--gray-900); }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.5em 0 .6em; color: var(--gray-700); }
.prose p {
  margin-bottom: 1.2em;
  color: var(--gray-700);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word;
}
.prose strong { color: var(--gray-900); font-weight: 600; }
.prose ul, .prose ol { margin: 1em 0 1.2em 1.5em; color: var(--gray-700); }
.prose li {
  margin-bottom: .4em;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prose a { color: var(--purple); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9rem; }
.prose th { background: var(--gray-50); text-align: left; padding: 10px 14px; font-weight: 600; border: 1px solid var(--gray-200); }
.prose td { padding: 9px 14px; border: 1px solid var(--gray-200); vertical-align: top; }
.prose tr:nth-child(even) td { background: var(--gray-50); }
.prose blockquote { border-left: 4px solid var(--purple); padding: 12px 20px; background: var(--purple-faint); margin: 1.5em 0; color: var(--gray-700); }
.prose code { background: var(--gray-100); padding: 2px 6px; border-radius: 4px; font-family: var(--mono); font-size: .875em; }
.prose pre { background: var(--gray-900); color: #e5e7eb; padding: 20px; border-radius: var(--radius); overflow-x: auto; margin: 1.5em 0; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: none; border-top: 1px solid var(--gray-200); margin: 2em 0; }

/* ── Tags / Sujets traités ───────────────────────────────────── */
.article-tags-section { margin: 32px 0 24px; padding: 18px 22px; background: var(--gray-50); border-radius: 12px; border-left: 3px solid var(--purple); }
.article-tags-label { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--purple); margin-bottom: 12px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.tag { display: inline-flex; align-items: center; background: #fff; color: var(--gray-700); font-size: .8rem; padding: 5px 14px; border-radius: 100px; font-weight: 500; border: 1.5px solid var(--gray-200); }

/* ── Article links ───────────────────────────────────────────── */
.article-links { margin: 40px 0; padding: 28px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); }
.article-links h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 20px; }
.link-group { margin-bottom: 20px; }
.link-group h3 { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin-bottom: 10px; }
.link-group ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.link-group a { display: flex; align-items: flex-start; gap: 6px; color: var(--purple); font-size: .9rem; line-height: 1.4; }
.link-group a:hover { text-decoration: underline; }
.link-group svg { flex-shrink: 0; margin-top: 3px; }
.link-source { color: var(--gray-400); font-size: .82rem; }

/* ── Related posts ───────────────────────────────────────────── */
.related-posts { margin: 48px 0; }
.related-posts h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; color: var(--gray-700); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--gray-200); border-radius: var(--radius); color: var(--gray-900); transition: box-shadow .15s; }
.related-card:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.related-num { font-size: .75rem; font-family: var(--mono); color: var(--gray-400); }
.related-card h3 { font-size: .9rem; font-weight: 600; line-height: 1.3; }
.related-date { font-size: .78rem; color: var(--gray-400); margin-top: auto; }

/* ── Comments ────────────────────────────────────────────────── */
.comments-section { margin: 48px 0; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.comments-section h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 24px; }
.comment { padding: 20px; border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 16px; }
.comment-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.comment-header strong { color: var(--gray-900); }
.comment-header time { font-size: .8rem; color: var(--gray-400); }
.comment p { font-size: .9rem; color: var(--gray-700); }
.no-comments { color: var(--gray-400); font-size: .9rem; margin-bottom: 24px; }
.comments-closed { color: var(--gray-400); font-size: .9rem; font-style: italic; }

.comment-form { margin-top: 32px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 24px; }
.comment-form h3 { font-size: 1rem; font-weight: 700; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.comment-form label { display: flex; flex-direction: column; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--gray-700); margin-bottom: 16px; }
.comment-form input, .comment-form textarea {
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: .9rem;
  font-family: var(--font);
  background: #fff;
  transition: border-color .15s;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(91,33,182,.1); }
.comment-msg { font-size: .875rem; padding: 10px 14px; border-radius: 6px; background: #d1fae5; color: #065f46; margin-top: 12px; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 40px; padding: 20px 0; }
.btn-page { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: .875rem; color: var(--gray-700); background: #fff; transition: all .15s; }
.btn-page:hover { border-color: var(--purple); color: var(--purple); text-decoration: none; background: var(--purple-faint); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple); color: #fff;
  padding: 10px 20px; border-radius: 6px;
  font-size: .875rem; font-weight: 600;
  border: none; cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: var(--purple-light); text-decoration: none; color: #fff; }
.btn-block { width: 100%; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-700);
  padding: 10px 20px; border-radius: 6px;
  font-size: .875rem; font-weight: 600;
  border: 1px solid var(--gray-300); cursor: pointer; transition: all .15s;
}
.btn-secondary:hover { background: var(--gray-200); text-decoration: none; }

/* ── Category page ───────────────────────────────────────────── */
.page-category { padding: 40px 0; }
.cat-header { padding: 24px; margin-bottom: 32px; background: var(--gray-50); border-radius: var(--radius); }
.cat-header h1 { font-size: 1.75rem; font-weight: 800; margin-bottom: 8px; }
.cat-header p { color: var(--gray-500); }

/* ── Category hero ───────────────────────────────────────────── */
.cat-hero {
  padding: 48px 0 36px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--gray-200);
}
.cat-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
.cat-hero p { color: var(--gray-500); font-size: 1rem; }

/* ── Article 2-cols layout ───────────────────────────────────── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 80px;
}

/* ── About page ──────────────────────────────────────────────── */
.page-about { padding: 48px 0; max-width: 760px; }
.page-header { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-200); }
.page-header h1 { font-size: 2rem; font-weight: 800; }
.about-content .lead { font-size: 1.1rem; color: var(--gray-500); margin-bottom: 32px; }
.disclaimer-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: 20px; margin: 20px 0; }
.disclaimer-box p { color: #92400e; margin: 0; }

/* ── Error pages ─────────────────────────────────────────────── */
.page-error { text-align: center; padding: 100px 0; }
.page-error h1 { font-size: 6rem; font-weight: 900; color: var(--gray-200); line-height: 1; margin-bottom: 16px; }
.page-error p { color: var(--gray-500); margin-bottom: 32px; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--gray-50); border-top: 1px solid var(--gray-200); margin-top: 64px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 32px 0; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gray-700); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.footer-nav a { color: var(--gray-500); font-size: .875rem; padding: 4px 10px; border-radius: 4px; }
.footer-nav a:hover { color: var(--purple); background: var(--purple-faint); text-decoration: none; }
.footer-legal { font-size: .78rem; color: var(--gray-400); width: 100%; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { color: var(--gray-400); font-size: .95rem; padding: 40px 0; text-align: center; }

/* ── Pagination numérotée ────────────────────────────────────── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 40px; padding: 20px 0; }
.btn-page { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: .875rem; color: var(--gray-700); background: #fff; transition: all .15s; text-decoration: none; }
.btn-page:hover { border-color: var(--purple); color: var(--purple); text-decoration: none; background: var(--purple-faint); }
.btn-page-active { background: var(--purple); color: #fff !important; border-color: var(--purple); font-weight: 700; }
.btn-page-active:hover { background: var(--purple); color: #fff; }
.btn-page-arrow { font-size: 1rem; }
.pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--gray-400); font-size: .875rem; }

/* ── Topics cloud (sidebar) ──────────────────────────────────── */
.widget-topics { background: #f5f3ff; border-color: #ddd6fe; }
.topics-cloud { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 4px; }
.topic-tag { display: block; font-size: .78rem; color: #5b21b6; background: rgba(91,33,182,.07); border-radius: 4px; padding: 5px 8px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .15s; }
.topic-tag:hover { background: rgba(91,33,182,.15); text-decoration: none; }

/* ── Lexique public ──────────────────────────────────────────── */
.hero-sm { padding: 36px 0 28px; margin-bottom: 32px; }
.lexique-layout { display: grid; grid-template-columns: 60px 1fr; gap: 40px; padding: 0 0 60px; }
.lexique-alpha { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 80px; align-self: start; }
.alpha-link { display: block; text-align: center; font-size: .8rem; font-weight: 700; color: var(--gray-500); padding: 4px 6px; border-radius: 4px; text-decoration: none; transition: all .15s; }
.alpha-link:hover { background: var(--purple-faint); color: var(--purple); text-decoration: none; }
.lexique-search-wrap { margin-bottom: 24px; }
.lexique-search { font-size: .95rem; padding: 10px 16px; }
.lexique-letter { font-size: 1.5rem; font-weight: 800; color: var(--purple); margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--purple-faint); }
.lexique-letter:first-of-type { margin-top: 0; }
.lexique-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; transition: box-shadow .15s; }
.lexique-card:hover { box-shadow: var(--shadow); }
.lexique-card-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.lexique-term { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); }
.lexique-count { font-size: .75rem; color: var(--purple); background: var(--purple-faint); padding: 2px 8px; border-radius: 10px; white-space: nowrap; margin-left: auto; }
.lexique-def { font-size: .875rem; color: var(--gray-700); line-height: 1.65; }
.lexique-empty { color: var(--gray-400); font-style: italic; }

/* ── Admin lexique ───────────────────────────────────────────── */
.lexique-admin-row { padding: 14px 16px; border-bottom: 1px solid var(--gray-200); }
.lexique-admin-row:last-child { border-bottom: none; }
.lexique-admin-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lexique-edit-form { display: flex; flex-direction: column; }

/* ── Share bar ───────────────────────────────────────────────── */
.share-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 20px 0 24px; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; }
.share-bar-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-right: 4px; white-space: nowrap; }
.share-bar-sep { width: 1px; height: 24px; background: var(--gray-200); margin: 0 4px; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; font-size: .8rem; font-weight: 600; cursor: pointer; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); text-decoration: none; transition: all .15s; white-space: nowrap; }
.share-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.share-fb  { color: #1877f2; border-color: #1877f220; background: #f0f7ff; }
.share-fb:hover  { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-x   { color: #000; border-color: #00000020; background: #f8f8f8; }
.share-x:hover   { background: #000; color: #fff; border-color: #000; }
.share-li  { color: #0a66c2; border-color: #0a66c220; background: #f0f5ff; }
.share-li:hover  { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share-wa  { color: #25d366; border-color: #25d36620; background: #f0fdf4; }
.share-wa:hover  { background: #25d366; color: #fff; border-color: #25d366; }
.share-native { color: var(--purple); border-color: var(--purple-faint); background: var(--purple-faint); }
.share-native:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.share-copy  { color: var(--gray-600, #4b5563); }
.share-copy:hover { background: var(--gray-100); }
.share-copied { background: #ecfdf5 !important; color: #059669 !important; border-color: #a7f3d0 !important; }
.share-print { color: var(--gray-600, #4b5563); }
.share-print:hover { background: var(--gray-100); }

/* ── Promo bar ───────────────────────────────────────────────── */
.promo-bar { background: linear-gradient(135deg, #5b21b6, #7c3aed); color: #fff; padding: 8px 0; }
.promo-bar-inner { display: flex; align-items: center; gap: 12px; }
.promo-bar-logo { width: 22px; height: 22px; border-radius: 4px; }
.promo-bar-logo-svg { color: #e9d5ff; flex-shrink: 0; }
.promo-bar-text { font-size: .875rem; font-weight: 600; flex: 1; }
.promo-bar-cta { background: #fff; color: #5b21b6; padding: 4px 14px; border-radius: 20px; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.promo-bar-cta:hover { background: #f5f3ff; text-decoration: none; }
.promo-bar-link { color: rgba(255,255,255,.75); font-size: .8rem; white-space: nowrap; text-decoration: none; }
.promo-bar-link:hover { color: #fff; }

/* ── Application page ────────────────────────────────────────── */
.app-hero { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 60%, #ddd6fe 100%); padding: 64px 0 56px; margin-bottom: 48px; }
.app-hero-badge { display: inline-block; background: #5b21b6; color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; }
.app-hero-title { font-size: 2.8rem; font-weight: 900; color: #2e1065; margin-bottom: 16px; }
.app-hero-sub { font-size: 1.1rem; color: #4c1d95; max-width: 600px; line-height: 1.7; margin-bottom: 32px; }
.app-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.app-cta-primary { display: inline-flex; align-items: center; gap: 8px; background: #5b21b6; color: #fff; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: background .15s; }
.app-cta-primary:hover { background: #7c3aed; color: #fff; text-decoration: none; }
.app-cta-large { padding: 16px 36px; font-size: 1.05rem; }
.app-cta-secondary { display: inline-flex; align-items: center; background: rgba(91,33,182,.1); color: #5b21b6; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .15s; }
.app-cta-secondary:hover { background: rgba(91,33,182,.18); text-decoration: none; }

.app-features { margin-bottom: 64px; }
.section-title { font-size: 1.75rem; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; text-align: center; }
.section-sub { color: var(--gray-500); text-align: center; max-width: 600px; margin: 0 auto 36px; line-height: 1.7; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 24px; }
.feature-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: .875rem; color: var(--gray-500); line-height: 1.6; }

.app-section { margin-bottom: 64px; }
.app-section-label { display: inline-block; background: var(--purple-faint); color: var(--purple); font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
.app-web-screenshot { border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: 0 8px 32px rgba(0,0,0,.1); max-width: 900px; margin: 0 auto; }
.browser-chrome { background: #f1f3f5; border-bottom: 1px solid #e0e0e0; padding: 10px 16px; display: flex; align-items: center; gap: 12px; }
.browser-dots { display: flex; gap: 6px; }
.browser-dots span { width: 12px; height: 12px; border-radius: 50%; background: #d1d5db; }
.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; }
.browser-bar { background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 4px 12px; font-size: .8rem; color: var(--gray-500); flex: 1; }
.screenshot-web { width: 100%; height: auto; display: block; }

.ios-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.ios-frame { text-align: center; }
.ios-frame img { width: 100%; border-radius: 20px; border: 6px solid #1c1c1e; box-shadow: 0 12px 40px rgba(0,0,0,.18); display: block; }
.ios-frame p { margin-top: 12px; font-size: .8rem; color: var(--gray-500); font-weight: 600; }
.app-store-cta { text-align: center; }
.app-store-badge-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.app-store-badge-link { text-decoration: none; display: inline-block; }
.app-store-badge-link:hover .app-store-badge { background: #1a1a1a; text-decoration: none; }
.app-store-badge { display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff; padding: 12px 24px; border-radius: 10px; font-size: .95rem; transition: background .15s; }
.app-store-badge strong { display: block; font-size: 1.1rem; }
.app-store-badge-soon { opacity: .6; cursor: default; }
.app-store-note { font-size: .8rem; color: var(--gray-400); margin-top: 8px; text-align: center; }
.app-final-cta { text-align: center; background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-radius: 16px; padding: 56px 24px; margin-bottom: 60px; }
.app-final-cta h2 { font-size: 1.75rem; font-weight: 800; margin-bottom: 12px; }
.app-final-cta p { color: var(--gray-500); margin-bottom: 28px; font-size: 1rem; }

/* ── Alert ───────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 6px; font-size: .875rem; margin-bottom: 16px; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ── Print / PDF ─────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .article-sidebar, .promo-bar,
  .share-bar, .comments-section, .related-posts, .main-nav,
  .nav-toggle, .pagination, .sidebar { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .container, .page-article, .article-layout { display: block; max-width: 100%; padding: 0; margin: 0; }
  .article-main { width: 100%; }

  .article-title { font-size: 22pt; margin-bottom: 6pt; }
  .article-header { border-bottom: 1pt solid #ccc; margin-bottom: 14pt; padding-bottom: 8pt; }
  .article-meta { font-size: 9pt; color: #555; }

  .article-cover { max-height: 220pt; object-fit: cover; margin: 12pt 0; page-break-inside: avoid; }
  .article-content { font-size: 11pt; line-height: 1.6; }
  .article-content h2 { font-size: 15pt; page-break-after: avoid; }
  .article-content h3 { font-size: 13pt; page-break-after: avoid; }
  .article-content img { max-width: 100%; page-break-inside: avoid; }
  .article-links { page-break-inside: avoid; border-top: 1pt solid #ccc; margin-top: 14pt; padding-top: 8pt; }

  a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .share-btn::after, .btn-primary::after, .btn-secondary::after,
  .post-cat::after, .tag::after, .post-number::after { content: none; }

  .article-tags { margin-top: 12pt; }
  .tag { border: 1pt solid #ccc; padding: 2pt 6pt; font-size: 9pt; }

  /* Print footer */
  .article-main::after {
    content: "Source : DrepaPulse Blog — blog.drepapulse.fr — À but éducatif uniquement. Ne se substitue pas à un avis médical.";
    display: block;
    margin-top: 20pt;
    padding-top: 8pt;
    border-top: 1pt solid #ccc;
    font-size: 8pt;
    color: #777;
  }
}

/* ── Popup promo ─────────────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.popup-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.popup-card {
  background: #fff;
  border-radius: 18px;
  padding: 40px 36px 32px;
  max-width: 440px;
  width: calc(100% - 32px);
  position: relative;
  box-shadow: 0 20px 60px rgba(91,33,182,.18), 0 4px 16px rgba(0,0,0,.12);
  text-align: center;
  animation: popupSlideIn .4s ease;
}
@keyframes popupSlideIn {
  from { transform: translateY(28px) scale(.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--gray-100);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.popup-close:hover { background: var(--gray-200); }
.popup-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.popup-logo-wrap svg { color: var(--color-primary, #5b21b6); }
.popup-logo-name { font-size: 1.35rem; font-weight: 800; color: var(--gray-900); }
.popup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  color: #059669;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.popup-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 10px;
  line-height: 1.25;
}
.popup-sub {
  font-size: .92rem;
  color: var(--gray-500);
  margin-bottom: 24px;
  line-height: 1.5;
}
.popup-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.popup-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%);
  color: #fff;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
}
.popup-cta-primary:hover { opacity: .9; transform: translateY(-1px); text-decoration: none; color: #fff; }
.popup-cta-store {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gray-900);
  color: #fff;
  border-radius: 10px;
  padding: 11px 20px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: opacity .2s;
}
.popup-cta-store:hover { opacity: .85; color: #fff; text-decoration: none; }
.popup-no-more {
  margin-top: 16px;
  font-size: .78rem;
  color: var(--gray-400);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  display: block;
  width: 100%;
  text-align: center;
}
.popup-no-more:hover { color: var(--gray-600); }

/* ── App final CTA free badge ────────────────────────────────── */
.app-final-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  color: #059669;
  font-size: .82rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Theme toggle button ─────────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--gray-500);
  transition: background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover { background: var(--gray-100); color: var(--gray-900); }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--gray-700);
  transition: background .15s;
}
.nav-toggle:hover { background: var(--gray-100); }

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --purple-faint: rgba(124,58,237,.18);
  --gray-50:   #1e293b;
  --gray-100:  #263244;
  --gray-200:  #334155;
  --gray-300:  #475569;
  --gray-400:  #64748b;
  --gray-500:  #94a3b8;
  --gray-700:  #cbd5e1;
  --gray-900:  #f1f5f9;
  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
}
[data-theme="dark"] body { background: #0f172a; color: #e2e8f0; }
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: #f1f5f9; }
[data-theme="dark"] a { color: #a78bfa; }

[data-theme="dark"] .site-header {
  background: #111827;
  border-bottom-color: #1e293b;
}
[data-theme="dark"] .main-nav a { color: #e2e8f0; }
[data-theme="dark"] .main-nav a:hover { background: rgba(124,58,237,.22); color: #c4b5fd; }
[data-theme="dark"] .nav-app-link { color: #c4b5fd; font-weight: 700; }
[data-theme="dark"] .nav-app-link:hover { color: #e9d5ff; }
[data-theme="dark"] .main-nav { background: #111827; border-bottom-color: #1e293b; }
[data-theme="dark"] .brand { color: #f1f5f9; }
[data-theme="dark"] .brand-name strong { color: #a78bfa; }
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .nav-toggle { border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .nav-toggle:hover { background: #1e293b; color: #e2e8f0; }

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #1e1433 0%, #1a1040 100%);
  border-bottom-color: #2e1065;
}
[data-theme="dark"] .hero h1 { color: #f1f5f9; }
[data-theme="dark"] .hero p  { color: #94a3b8; }

[data-theme="dark"] .post-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .post-title a { color: #f1f5f9; }
[data-theme="dark"] .post-excerpt  { color: #94a3b8; }
[data-theme="dark"] .post-date, [data-theme="dark"] .post-number { color: #64748b; }

[data-theme="dark"] .widget { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .widget-title { color: #94a3b8; letter-spacing: .08em; }
[data-theme="dark"] .cat-list a { color: #e2e8f0; border-left-color: #7c3aed; font-weight: 500; }
[data-theme="dark"] .cat-list a:hover { background: #263244; color: #c4b5fd; }
[data-theme="dark"] .widget-disclaimer { background: #1f1608; border-color: #713f12; }
[data-theme="dark"] .widget-disclaimer p { color: #fcd34d; }
[data-theme="dark"] .widget-topics { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.3); }
[data-theme="dark"] .topic-tag { color: #a78bfa; background: rgba(124,58,237,.15); }
[data-theme="dark"] .topic-tag:hover { background: rgba(124,58,237,.28); }

[data-theme="dark"] .prose p,
[data-theme="dark"] .prose ul,
[data-theme="dark"] .prose ol,
[data-theme="dark"] .prose li { color: #e2e8f0; }
[data-theme="dark"] .prose h2 { color: #f8fafc; border-bottom-color: #334155; }
[data-theme="dark"] .prose h3 { color: #f1f5f9; }
[data-theme="dark"] .prose strong { color: #fff; }
[data-theme="dark"] .prose th { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .prose td { border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .prose tr:nth-child(even) td { background: #1a2333; }
[data-theme="dark"] .prose blockquote { background: rgba(124,58,237,.15); color: #cbd5e1; border-left-color: #7c3aed; }
[data-theme="dark"] .prose code { background: #263244; color: #e2e8f0; }
[data-theme="dark"] .prose hr { border-top-color: #334155; }

[data-theme="dark"] .article-lead { color: #cbd5e1; border-left-color: #7c3aed; }
[data-theme="dark"] .article-meta { color: #94a3b8; }
[data-theme="dark"] .article-title { color: #f8fafc; }
[data-theme="dark"] .article-tags-section { background: #1a2333; border-left-color: #a78bfa; }
[data-theme="dark"] .article-tags-label { color: #a78bfa; }
[data-theme="dark"] .tag { background: #1e293b; color: #e2e8f0; border: 1.5px solid #334155; }

[data-theme="dark"] .article-links { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .article-links h2 { color: #f1f5f9; }
[data-theme="dark"] .link-group h3 { color: #64748b; }
[data-theme="dark"] .link-source { color: #475569; }

[data-theme="dark"] .related-card { background: #1e293b; border-color: #334155; color: #f1f5f9; }
[data-theme="dark"] .related-card:hover { border-color: #475569; }
[data-theme="dark"] .related-card h3 { color: #e2e8f0; }
[data-theme="dark"] .related-num,
[data-theme="dark"] .related-date { color: #64748b; }
[data-theme="dark"] .related-posts h2 { color: #94a3b8; }

[data-theme="dark"] .comment { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .comment-header strong { color: #f1f5f9; }
[data-theme="dark"] .comment-header time { color: #64748b; }
[data-theme="dark"] .comment p { color: #cbd5e1; }
[data-theme="dark"] .comment-form { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .comment-form label { color: #cbd5e1; }
[data-theme="dark"] .comment-form input,
[data-theme="dark"] .comment-form textarea { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .comment-form input:focus,
[data-theme="dark"] .comment-form textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.2); }
[data-theme="dark"] .no-comments,
[data-theme="dark"] .comments-closed { color: #475569; }

[data-theme="dark"] .comments-section { border-top-color: #334155; }

[data-theme="dark"] .btn-page { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .btn-page:hover { border-color: #7c3aed; color: #a78bfa; background: rgba(124,58,237,.15); }
[data-theme="dark"] .pagination-ellipsis { color: #475569; }

[data-theme="dark"] .btn-secondary { background: #263244; color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .btn-secondary:hover { background: #334155; }

[data-theme="dark"] .share-bar { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .share-bar-label { color: #64748b; }
[data-theme="dark"] .share-bar-sep { background: #334155; }
[data-theme="dark"] .share-btn { background: #263244; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .share-x { background: #1a1a1a; border-color: #333; color: #e2e8f0; }
[data-theme="dark"] .share-copy:hover,
[data-theme="dark"] .share-print:hover { background: #334155; }

[data-theme="dark"] .site-footer { background: #111827; border-top-color: #263244; }
[data-theme="dark"] .footer-brand { color: #f1f5f9; }
[data-theme="dark"] .footer-brand strong { color: #a78bfa; }
[data-theme="dark"] .footer-nav a { color: #94a3b8; font-weight: 500; }
[data-theme="dark"] .footer-nav a:hover { color: #c4b5fd; background: rgba(124,58,237,.18); }
[data-theme="dark"] .footer-legal { color: #64748b; }

[data-theme="dark"] .cat-hero { border-bottom-color: #334155; }
[data-theme="dark"] .cat-hero h1 { color: #f1f5f9; }
[data-theme="dark"] .cat-hero p { color: #94a3b8; }
[data-theme="dark"] .cat-header { background: #1e293b; }
[data-theme="dark"] .cat-header h1 { color: #f1f5f9; }

[data-theme="dark"] .page-header { border-bottom-color: #334155; }
[data-theme="dark"] .about-content .lead { color: #94a3b8; }
[data-theme="dark"] .disclaimer-box { background: #1f1608; border-color: #713f12; }
[data-theme="dark"] .disclaimer-box p { color: #fcd34d; }
[data-theme="dark"] .page-error h1 { color: #263244; }
[data-theme="dark"] .page-error p { color: #94a3b8; }

[data-theme="dark"] .lexique-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .lexique-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .lexique-term { color: #f1f5f9; }
[data-theme="dark"] .lexique-def { color: #94a3b8; }
[data-theme="dark"] .lexique-letter { color: #a78bfa; border-bottom-color: rgba(167,139,250,.2); }
[data-theme="dark"] .alpha-link { color: #64748b; }
[data-theme="dark"] .alpha-link:hover { background: rgba(124,58,237,.2); color: #a78bfa; }
[data-theme="dark"] .lexique-empty { color: #475569; }

[data-theme="dark"] .feature-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .feature-card h3 { color: #f1f5f9; }
[data-theme="dark"] .feature-card p { color: #94a3b8; }
[data-theme="dark"] .section-title { color: #f1f5f9; }
[data-theme="dark"] .section-sub { color: #94a3b8; }

[data-theme="dark"] .app-hero {
  background: linear-gradient(135deg, #1a1033 0%, #1e1040 60%, #231350 100%);
}
[data-theme="dark"] .app-hero-title { color: #e9d5ff; }
[data-theme="dark"] .app-hero-sub { color: #c4b5fd; }
[data-theme="dark"] .app-cta-secondary { background: rgba(167,139,250,.15); color: #c4b5fd; }
[data-theme="dark"] .app-cta-secondary:hover { background: rgba(167,139,250,.25); }

[data-theme="dark"] .app-web-screenshot { border-color: #334155; }
[data-theme="dark"] .browser-chrome { background: #1e293b; border-bottom-color: #334155; }
[data-theme="dark"] .browser-bar { background: #0f172a; border-color: #334155; color: #64748b; }

[data-theme="dark"] .app-final-cta { background: linear-gradient(135deg, #1a1033, #231350); }
[data-theme="dark"] .app-final-cta h2 { color: #f1f5f9; }
[data-theme="dark"] .app-final-cta p { color: #94a3b8; }
[data-theme="dark"] .app-section-label { background: rgba(124,58,237,.2); }

[data-theme="dark"] .popup-card { background: #1e293b; }
[data-theme="dark"] .popup-title { color: #f1f5f9; }
[data-theme="dark"] .popup-sub { color: #94a3b8; }
[data-theme="dark"] .popup-close { background: #263244; color: #94a3b8; }
[data-theme="dark"] .popup-close:hover { background: #334155; }
[data-theme="dark"] .popup-logo-name { color: #f1f5f9; }
[data-theme="dark"] .popup-no-more { color: #475569; }
[data-theme="dark"] .popup-cta-store { background: #f1f5f9; color: #0f172a; }

[data-theme="dark"] .empty-state { color: #475569; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .home-layout { grid-template-columns: 1fr 260px; gap: 28px; }
  .main-nav a { font-size: .82rem; padding: 6px 8px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .home-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .hero h1 { font-size: 1.6rem; }
  .hero { padding: 40px 0 32px; margin-bottom: 32px; }
  .related-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-row { grid-template-columns: 1fr; }
  .article-title { font-size: 1.5rem; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { display: none; }
  .cat-hero { padding: 32px 0 24px; }
  .main-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 12px;
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  [data-theme="dark"] .main-nav { background: #111827; border-bottom-color: #1e293b; }
  .main-nav.open { display: flex; }
  .nav-toggle { display: flex; }
  .site-header { position: relative; }
  .share-btn span, .share-fb span, .share-x span, .share-li span, .share-wa span { display: none; }
  .share-btn { padding: 8px 10px; }
  .lexique-layout { grid-template-columns: 1fr; }
  .lexique-alpha { flex-direction: row; flex-wrap: wrap; position: static; }
  .topics-cloud { max-height: 200px; }
  .features-grid { grid-template-columns: 1fr; }
  .ios-gallery { grid-template-columns: repeat(2, 1fr); }
  .app-hero-title { font-size: 1.8rem; }
  .promo-bar-link { display: none; }
  .popup-card { padding: 28px 20px 24px; }
  .popup-title { font-size: 1.2rem; }
  .header-actions { margin-left: auto; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { gap: 2px; }
  .post-card-body { padding: 16px; }
  .page-article { padding: 28px 0; }
  .article-cover { aspect-ratio: 16/9; }
  .ios-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
  html { font-size: max(var(--font-size-base, 18px), 16px); }
  .container { padding: 0 16px; }
  .hero { padding: 28px 0 24px; margin-bottom: 24px; }
  .hero h1 { font-size: 1.4rem; }
  .hero p { font-size: 1rem; }
  .hero-badge { font-size: .7rem; }
  .home-layout { gap: 0; }
  .posts-feed { gap: 20px; }
  .post-card-img { aspect-ratio: 16/8; }
  .post-title { font-size: 1.05rem; }
  .article-title { font-size: 1.3rem; }
  .article-meta { flex-wrap: wrap; gap: 8px; font-size: .78rem; }
  .article-lead { font-size: 1rem; }
  .prose h2 { font-size: 1.2rem; }
  .prose h3 { font-size: 1rem; }
  .share-bar { gap: 4px; padding: 10px 12px; }
  .related-grid { grid-template-columns: 1fr; }
  .related-card { padding: 12px; }
  .app-hero-title { font-size: 1.5rem; }
  .app-hero-sub { font-size: .95rem; }
  .app-hero-ctas { flex-direction: column; }
  .app-cta-primary, .app-cta-secondary { width: 100%; justify-content: center; }
  .ios-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ios-frame img { border-radius: 14px; border-width: 4px; }
  .app-final-cta { padding: 36px 16px; }
  .app-final-cta h2 { font-size: 1.3rem; }
  .features-grid { gap: 12px; }
  .feature-card { padding: 18px; }
  .pagination { gap: 4px; }
  .btn-page { min-width: 32px; height: 32px; font-size: .8rem; }
  .promo-bar-text { font-size: .78rem; }
  .promo-bar-cta { font-size: .72rem; padding: 3px 10px; }
  .popup-card { padding: 24px 16px 20px; }
  .section-title { font-size: 1.4rem; }
  .header-inner { gap: 12px; }
}