/* ====== Prixio minimal overrides ====== */

/* Tokens */
:root{
  --accent: #FF0086;          /* rose Prixio */
  --fg: #0F0F0F;
  --bg: #F9F9FB;
  --muted: #6B7280;
  --card: #FFFFFF;
  --radius: 12px;
}

/* Base */
html, body{
  background: var(--bg);
  color: var(--fg);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-family: "lato", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* Liens */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Layout container (liste & article) */
.container, .post-container, .site-heading .container{
  max-width: 1100px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Header Clean Blog → look Prixio minimal */
.navbar{ background: #fff; border-bottom: 1px solid #eee; }
.navbar .navbar-brand, .navbar .nav > li > a{ color: var(--fg) !important; }
.navbar .nav > li > a:hover{ color: var(--accent) !important; }
.site-heading{ padding: 48px 0 24px; }
.site-heading h1{ font-weight: 700; margin: 0; }
.site-heading .subheading{ color: var(--muted); }

/* Cards d’articles sur la page blog */
.post-preview{
  background: var(--card);
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 20px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.post-preview + .post-preview{ margin-top: 16px; }
.post-preview:hover{ transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.post-preview h2{ margin: 0 0 6px; font-size: 24px; }
.post-preview .post-subtitle{ color: var(--muted); margin: 0 0 8px; }
.post-preview .post-meta{ color: var(--muted); font-size: 14px; }

/* Page article */
.post-heading{ padding: 32px 0 8px; }
.post-heading h1{ font-size: 36px; font-weight: 700; }
.post-heading .meta{ color: var(--muted); }

.post-content img{ border-radius: 10px; }
.post-content blockquote{
  border-left: 3px solid var(--accent);
  padding-left: 12px; color: #374151; font-style: italic;
}

/* Boutons/pagination */
.btn-primary, .pager li > a, .pager li > span{
  background: var(--accent); border-color: var(--accent);
}
.btn-primary:hover, .pager li > a:hover{
  opacity: .9;
}

/* Footer */
footer{ border-top: 1px solid #eee; background: #fff; }

/* Responsive petits écrans */
@media (max-width: 640px){
  .post-preview h2{ font-size: 20px; }
  .post-heading h1{ font-size: 28px; }
}

/* --- ARTICLE PAGE STYLE --- */
body.article {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Roboto', sans-serif;
}

body.article .navbar {
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* Hero section */
.article-hero {
  padding: 72px 0 36px;
  text-align: center;
  background: var(--bg);
}
.article-hero h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 42px;
  margin: 0;
}
.article-hero .meta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 15px;
}

/* Content */
.post-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 80px;
  line-height: 1.7;
  font-size: 17px;
}

.post-content h2,
.post-content h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  margin-top: 40px;
}

.post-content p {
  margin-bottom: 20px;
}

.post-content img {
  max-width: 100%;
  border-radius: 10px;
  margin: 24px 0;
}

.post-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  color: #444;
  font-style: italic;
  margin: 24px 0;
}

/* Bottom navigation */
.pager {
  margin: 48px 0 0;
  text-align: center;
}
.pager li > a {
  background: var(--accent);
  color: #fff !important;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 640px){
  .article-hero h1{font-size:30px;}
  .post-content{padding:0 16px 64px;}
}