/* Styles globaux blog (blog-*) */
:root{
  --blog-red:#d9534f;
  --blog-red-dark:#c53030;
  --blog-blue:#4299e1;
  --blog-gold:#ecc94b;
  --blog-text:#2d3748;
  --blog-muted:#718096;
  --blog-bg:#f7f7f7;
  --blog-card-bg:#ffffff;
  --blog-border:#e2e8f0;
  --blog-radius:12px;
  --blog-shadow:0 4px 6px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
}

.blog-article-header{margin:10px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--blog-border)}
.blog-article-title{color:var(--blog-red);margin:0 0 8px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;font-size:30px}
@media(max-width:768px){.blog-article-title{font-size:24px}}
.blog-article-subtitle{color:var(--blog-text);opacity:.9;font-size:16px;margin:0}
/* Forcer la couleur rouge si le template cible .hero h1 */
.hero h1.blog-article-title{color:var(--blog-red)}

.blog-article-breadcrumb{font-size:14px;color:var(--blog-muted)}
.blog-article-breadcrumb a{color:var(--blog-muted);text-decoration:none}
.blog-article-breadcrumb a:hover{color:var(--blog-red);text-decoration:underline}

.blog-section{background:var(--blog-card-bg);border:1px solid var(--blog-border);border-radius:var(--blog-radius);box-shadow:var(--blog-shadow);padding:24px;margin:18px 0}
.blog-section-title{color:var(--blog-red);font-size:22px;font-weight:700;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--blog-border);position:relative;letter-spacing:-0.01em}
.blog-section-title::after{content:"";position:absolute;left:0;bottom:-1px;width:48px;height:3px;background:var(--blog-red);border-radius:3px}

#article-content table,.blog-section table,.blog-table{width:100%;border-collapse:separate;border-spacing:0;margin:18px 0;border:1px solid var(--blog-border);border-radius:8px;overflow:hidden;font-size:15px;background:#fff}
#article-content thead th,.blog-section thead th{background:var(--blog-red);color:#fff;text-transform:uppercase;font-size:13px;letter-spacing:.4px}
#article-content th,#article-content td,.blog-section th,.blog-section td{padding:12px 14px;border-bottom:1px solid var(--blog-border);text-align:left}
#article-content tr:nth-child(even),.blog-section tr:nth-child(even){background:#fafafa}

.blog-faq details{border:1px solid var(--blog-border);border-radius:10px;padding:10px 14px;margin:10px 0;background:#fff}
.blog-faq summary{cursor:pointer;font-weight:700;color:var(--blog-red);outline:none}

.blog-cta{background:linear-gradient(135deg,var(--blog-red),var(--blog-red-dark));color:#fff;border-radius:14px;padding:28px;text-align:center;box-shadow:0 10px 15px rgba(217,83,79,0.15);margin:24px 0}
.blog-cta h2{margin:0 0 10px;font-size:24px;font-weight:700}
.blog-cta p{margin:0 0 16px}
.blog-btn-primary{display:inline-block;background:#fff;color:var(--blog-red);font-weight:700;padding:10px 22px;border-radius:999px;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;box-shadow:0 4px 8px rgba(0,0,0,0.08)}
.blog-btn-primary:hover{background:#f7f7f7;transform:translateY(-2px);box-shadow:0 8px 14px rgba(0,0,0,0.1)}

@media(max-width:768px){.blog-section{padding:18px}.blog-cta{padding:22px}.blog-btn-primary{display:block;width:100%}}

/* Footer (pro) */
.site-footer{margin-top:28px;background:#0f172a;color:#e2e8f0}
.site-footer .inner{max-width:1500px;margin:0 auto;padding:22px 16px;display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:900px){.site-footer .inner{grid-template-columns:2fr 1fr 1fr}}
.site-footer a{color:#e2e8f0;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-grid{grid-template-columns:1fr}
@media(min-width:900px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.brand-line{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.site-footer .logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#e63946,#ff6b6b)}
.footer-desc{opacity:.9;font-size:14px;margin:0}
.footer-contact{list-style:none;padding:0;margin:10px 0 0}
.footer-contact li{margin:6px 0;font-size:14px}
.footer-title{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#cbd5e1}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin:6px 0}
.footer-list a{color:#e2e8f0;text-decoration:none}
.footer-list a:hover{color:#ffffff;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.15);margin-top:12px}
.footer-bottom .inner{padding-top:12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
@media(max-width:600px){.footer-bottom .inner{flex-direction:column;align-items:flex-start;gap:6px}}

/* ====== Ajout: structure & design des pages blog ====== */
*{box-sizing:border-box}
body.blog-page{margin:0;background:var(--blog-bg);color:var(--blog-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}
a{color:inherit}

/* Container générique */
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header du site */
.site-header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid var(--blog-border);z-index:20}
.site-header .inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:#111;text-decoration:none;font-weight:700}
.site-nav{display:flex;align-items:center;gap:12px}
.site-nav a{color:#111;text-decoration:none;padding:8px 10px;border-radius:10px}
.site-nav a:hover{background:#f1f5f9}
.site-nav .nav-cta{background:var(--blog-red);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700}
.site-nav .nav-cta:hover{filter:brightness(.95)}

/* Hero */
.blog-hero{padding:36px 0;background:linear-gradient(180deg,#fff,rgba(255,255,255,0.8) 60%, rgba(247,247,247,1))}
.blog-hero__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
@media(max-width:980px){.blog-hero__grid{grid-template-columns:1fr}}
.badge-pill{display:inline-block;background:#f1f5f9;color:#111;border:1px solid var(--blog-border);padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.06em;font-weight:700}
.blog-hero h1{margin:10px 0 6px;font-size:32px;line-height:1.2}
.blog-hero p{margin:0 0 14px;opacity:.9}
.blog-hero__stats{display:flex;gap:18px}
.blog-hero__stats span{display:block;font-weight:800;font-size:22px}
.blog-hero__stats small{display:block;opacity:.8}

/* Carte CTA droite */
.cta-card{background:#fff;border:1px solid var(--blog-border);border-radius:14px;box-shadow:var(--blog-shadow);padding:18px}
.cta-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.cta-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#fef2f2;color:var(--blog-red);font-size:18px}
.feature-list{margin:0 0 10px 18px}
.feature-list li{margin:6px 0}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Boutons */
.btn-primary{display:inline-block;background:var(--blog-red);color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:700}
.btn-primary:hover{filter:brightness(.95)}
.btn-phone,.btn-wa{display:inline-block;text-decoration:none;padding:10px 14px;border-radius:10px;border:1px solid var(--blog-border);background:#fff}
.btn-wa{border-color:#16a34a;color:#166534}

/* Zone contenu */
.blog-content{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:20px auto}
@media(max-width:1100px){.blog-content{grid-template-columns:1fr}}
.blog-main__head h2{margin:0 0 4px}

/* Liste cartes */
.blog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1100px){.blog-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.blog-cards{grid-template-columns:1fr}}
.blog-card{background:#fff;border:1px solid var(--blog-border);border-radius:14px;box-shadow:var(--blog-shadow);overflow:hidden;display:flex;flex-direction:column}
.blog-card img{width:100%;height:180px;object-fit:cover;display:block}
.blog-card__placeholder{height:180px;display:grid;place-items:center;background:#f1f5f9;color:#64748b;font-weight:800;letter-spacing:.2em}
.blog-card__body{padding:14px}
.blog-card h3{margin:0 0 6px;font-size:18px}
.blog-card h3 a{text-decoration:none}
.blog-card h3 a:hover{text-decoration:underline}
.blog-card p{margin:0 0 8px;opacity:.9}
.blog-card-tags{display:flex;gap:6px;margin-bottom:8px}
.blog-card-tag{display:inline-block;background:#f8fafc;border:1px solid var(--blog-border);padding:2px 8px;border-radius:999px;font-size:12px;color:#0f172a}
.blog-card-meta{display:flex;gap:10px;font-size:12px;color:#64748b}
.blog-card-link{display:inline-block;margin-top:6px;color:var(--blog-red);text-decoration:none;font-weight:700}
.blog-card-link:hover{text-decoration:underline}

/* Sidebar */
.blog-panel{background:#fff;border:1px solid var(--blog-border);border-radius:12px;box-shadow:var(--blog-shadow);padding:16px;margin-bottom:16px}
.blog-panel h3{margin:0 0 10px}
.blog-tags-list{display:flex;flex-wrap:wrap;gap:8px}
.blog-tag-link{display:inline-block;background:#f8fafc;border:1px solid var(--blog-border);padding:6px 10px;border-radius:999px;text-decoration:none;color:#0f172a;font-size:13px}
.blog-tag-link:hover{background:#eef2f7}
.blog-sidebar-cta ul{margin:8px 0 10px 18px}
.blog-sidebar-cta li{margin:6px 0}

/* Pagination */
.pagination{display:flex;align-items:center;gap:10px;margin:14px 0}
.pagination a{color:var(--blog-red);text-decoration:none;font-weight:700}
.pagination a:hover{text-decoration:underline}
.pagination__disabled{opacity:.5}

/* États */
.blog-empty{background:#fff;border:1px solid var(--blog-border);border-radius:12px;box-shadow:var(--blog-shadow);padding:20px;text-align:center}

/* === Overrides: burger menu + ratios === */
.menu-toggle{display:none;border:1px solid var(--blog-border);background:#fff;border-radius:10px;padding:8px 10px;font-weight:700}
.featured-article{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.featured-media{display:block;overflow:hidden;aspect-ratio:16/9}
.featured-media img{width:100%;height:100%;object-fit:cover}
.blog-card img{height:auto;aspect-ratio:16/9;object-fit:cover}

@media(max-width:980px){.featured-article{grid-template-columns:1fr}}
@media(max-width:820px){
  .site-header .inner{flex-wrap:wrap}
  .menu-toggle{display:inline-block}
  .site-nav{display:none;flex-direction:column;gap:10px;width:100%;align-items:flex-start}
  .site-header.is-open .site-nav{display:flex}
}
@media(max-width:560px){
  .site-nav .nav-cta,.site-nav .btn-outline,.site-nav .btn-success{width:100%;justify-content:center}
}