/* =============================================
   ccl-avocat.fr — CSS Complet v2
   Style : Cabinet d'avocat moderne — Ardoise/Cuivre
   Fichier externe chargé par ccl-core.php
   NE PAS mettre de CSS inline dans le PHP
   ============================================= */

/* === 1. IMPORT FONTS === */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* === 2. VARIABLES GLOBALES === */
:root {
  --color-primary:        #1E293B;
  --color-primary-dark:   #0F172A;
  --color-primary-mid:    #334155;
  --color-primary-light:  #E2E8F0;
  --color-accent:         #B87333;
  --color-accent-dark:    #96592A;
  --color-accent-light:   #FDF2E6;
  --color-bg:             #FFFFFF;
  --color-bg-section:     #F8FAFC;
  --color-bg-card:        #FFFFFF;
  --color-bg-dark:        #1E293B;
  --color-border:         #CBD5E1;
  --color-border-light:   #E2E8F0;
  --color-text:           #334155;
  --color-text-dark:      #1E293B;
  --color-text-muted:     #64748B;
  --color-text-light:     #94A3B8;
  --color-success:        #166534;
  --color-warning:        #B87333;
  --color-danger:         #991B1B;
  --color-info:           #1E40AF;
  --font-headings:        'DM Serif Display', Georgia, serif;
  --font-body:            'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono:            'JetBrains Mono', monospace;
  --radius:               4px;
  --radius-lg:            4px;
  --shadow:               0 1px 3px rgba(30,41,59,0.08);
  --shadow-md:            0 2px 8px rgba(30,41,59,0.12);
  --transition:           0.2s ease;
}

/* === 3. BASE === */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body) !important;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* === 4. TYPOGRAPHIE === */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: var(--font-headings) !important;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-dark);
}

h1, .entry-title { font-size: 2rem; }
h2 { font-size: 1.55rem; color: var(--color-primary); margin-top: 2.5rem; border-bottom: 1px solid var(--color-border-light); padding-bottom: 0.5rem; }
h3 { font-size: 1.25rem; color: var(--color-text-dark); margin-top: 2rem; }
h4 { font-size: 1.05rem; }

.entry-content p {
  line-height: 1.85;
  margin-bottom: 1.25rem;
  color: var(--color-text);
}

a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-accent-dark); }

.entry-content a { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }
.entry-content a:hover { color: var(--color-accent-dark); text-decoration-color: var(--color-accent-dark); }

strong, b { font-weight: 700; color: var(--color-text-dark); }

/* === 5. HEADER === */
.site-header,
.main-navigation,
#masthead {
  background: var(--color-bg-dark) !important;
  box-shadow: none;
  border-bottom: none;
}

/* Trait cuivre sous le header */
.site-header::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-accent);
}

/* Header slim + layout flex */
.inside-header {
  padding: 0.5rem 1.5rem !important;
  max-width: 1200px;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
}

/* Logo a gauche */
.site-logo {
  flex-shrink: 0;
}
.site-logo img {
  max-height: 38px !important;
  width: auto !important;
}

/* Nav float-right: GP met la nav dans le header */
.site-header .main-navigation {
  margin-left: auto !important;
  float: none !important;
}
.inside-navigation {
  padding: 0 !important;
}

/* Cacher le titre texte et description (logo SVG seul) */
.main-title, .site-description { display: none !important; }
.site-branding { display: none !important; }

/* Logo SVG */
.custom-logo-link { display: flex; align-items: center; }
.custom-logo-link img, .custom-logo {
  max-height: 40px !important;
  width: auto !important;
}



.site-title a,
.site-title a:hover {
  color: #FFFFFF !important;
  font-family: var(--font-headings) !important;
  font-weight: 400;
  font-size: 1.35rem;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Navigation */
.main-navigation a,
.nav-primary a {
  color: rgba(255,255,255,0.88) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  transition: color var(--transition);
  padding: 0.5rem 0.9rem !important;
  text-decoration: none;
  position: relative;
}

.main-navigation a:hover,
.nav-primary a:hover,
.main-navigation .current-menu-item > a {
  color: var(--color-accent) !important;
}

/* Liens nav avec underline anime */
.main-navigation a::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after {
  transform: scaleX(1);
}

/* === 6. BREADCRUMB === */
.rank-math-breadcrumb,
.breadcrumbs {
  background: var(--color-bg-section);
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.rank-math-breadcrumb a { color: var(--color-accent); text-decoration: none; }
.rank-math-breadcrumb a:hover { text-decoration: underline; }

/* === 7. LAYOUT PLEINE LARGEUR (sans sidebar) === */
#secondary, .widget-area { display: none !important; }
.site-content { display: block !important; }
.content-area, #primary {
  width: 100% !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
  float: none !important;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 2rem 2.25rem !important;
}
body:not(.page) .site-content .content-area {
  width: 100% !important;
}

.entry-content { max-width: 100%; }

/* === 8. CARTES ARTICLES (archives, grilles) === */
.entry-summary,
article.post,
.post-summary {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  transition: border-color var(--transition), transform 0.2s ease, box-shadow 0.2s ease;
}

article.post:hover,
.entry-summary:hover {
  border-color: var(--color-accent);
}

.entry-title a { color: var(--color-text-dark) !important; text-decoration: none; }
.entry-title a:hover { color: var(--color-accent) !important; }

/* Meta dates */
.entry-meta,
.posted-on,
.post-date {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* === 9. SHORTCODES PERSONNALISES === */

/* [ccl_encart] */
.ccl-encart {
  background: var(--color-bg-section);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.ccl-encart-title {
  font-family: var(--font-body) !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 0.6rem;
}

.ccl-encart p { margin: 0; color: var(--color-text); }

/* [ccl_alerte] */
.ccl-alerte {
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.ccl-alerte-title {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  margin: 0 0 0.5rem;
}

.ccl-alerte p { margin: 0; color: var(--color-text); font-size: 0.95rem; }

/* [ccl_chiffre] */
.ccl-chiffre-block {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0;
}

.ccl-chiffre {
  flex: 1 1 140px;
  background: var(--color-bg-dark);
  border-radius: 8px;
  padding: 1.25rem;
  text-align: center;
  min-width: 130px;
}

.ccl-chiffre-valeur {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-accent);
  display: block;
}

.ccl-chiffre-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  display: block;
  margin-top: 0.3rem;
}

/* Texte generique dans blocs chiffres */
.ccl-chiffre,
.ccl-chiffre *,
.ccl-chiffre p,
.ccl-chiffre span:not(.ccl-chiffre-valeur):not(.ccl-chiffre-label) {
  color: rgba(255,255,255,0.75) !important;
}
.ccl-chiffre-valeur { color: var(--color-accent) !important; }

/* Tables dans articles - thead */
.ccl-table th,
.ccl-table thead th,
table thead th {
  color: #FFFFFF !important;
}

/* FORCE WHITE TEXT dans tous les blocs a fond sombre */
[style*="background:#1E293B"] *,
[style*="background: #1E293B"] *,
[style*="background:#0F172A"] *,
[style*="background:#334155"] * {
  color: #FFFFFF !important;
}
[style*="background:#1E293B"] span[style*="color:rgba(255"],
[style*="background:#1E293B"] p[style*="color:rgba(255"],
[style*="background:#1E293B"] span[style*="color:#B87333"],
[style*="background:#334155"] span[style*="color:rgba(255"],
[style*="background:#B87333"] span[style*="color:rgba(255"] {
  color: inherit !important;
}

/* [ccl_faq] */
.ccl-faq { margin: 2rem 0; }

.ccl-faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.ccl-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: var(--color-bg-card);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-dark);
  list-style: none;
  transition: background var(--transition);
}

.ccl-faq-item summary:hover { background: var(--color-bg-section); }
.ccl-faq-item summary::-webkit-details-marker { display: none; }

.ccl-faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--color-accent);
  font-weight: 400;
  flex-shrink: 0;
  margin-left: 1rem;
}

.ccl-faq-item[open] summary::after { content: '\2212'; }
.ccl-faq-item[open] summary { background: var(--color-bg-section); }

.ccl-faq-content {
  padding: 1rem 1.25rem;
  background: var(--color-bg);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-light);
}

/* [ccl_summary] */
.ccl-summary {
  background: var(--color-bg-dark);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.ccl-summary-title {
  font-family: var(--font-body) !important;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin: 0 0 0.75rem;
}

.ccl-summary,
.ccl-summary *,
.ccl-summary p,
.ccl-summary li,
.ccl-summary ul,
.ccl-summary span,
.ccl-summary div,
.ccl-summary strong,
.ccl-summary b,
.ccl-summary a {
  color: rgba(255,255,255,0.9) !important;
}
.ccl-summary-title { color: var(--color-accent) !important; }

.ccl-summary ul {
  margin: 0;
  padding-left: 1.25rem;
}

.ccl-summary li {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

/* [ccl_table] */
.ccl-table-wrap { overflow-x: auto; margin: 2rem 0; }

.ccl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  overflow: hidden;
}

.ccl-table th {
  background: var(--color-bg-dark);
  color: var(--color-accent);
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-body);
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent);
}

.ccl-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  background: var(--color-bg-card);
}

.ccl-table tr:nth-child(even) td { background: var(--color-bg-section); }
.ccl-table tr:hover td { background: var(--color-primary-light); }

/* [ccl_toc] */
.ccl-toc {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0 2rem;
}

.ccl-toc-title {
  font-family: var(--font-body) !important;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  margin: 0 0 0.75rem;
}

.ccl-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  counter-reset: toc;
}

.ccl-toc li { margin-bottom: 0.4rem; font-size: 0.9rem; }
.ccl-toc a { color: var(--color-primary); font-weight: 500; text-decoration: none; }
.ccl-toc a:hover { color: var(--color-accent); text-decoration: underline; }

/* === 10. SIMULATEURS === */
.simulateur-block {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 2rem;
  margin: 2.5rem 0;
}

.simulateur-title {
  font-family: var(--font-headings) !important;
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0 0 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
}

.simulateur-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.simulateur-input,
.simulateur-select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition);
  box-sizing: border-box;
  margin-bottom: 1rem;
}

.simulateur-input:focus,
.simulateur-select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: #FFFFFF;
}

.simulateur-btn {
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
  letter-spacing: 0.02em;
}

.simulateur-btn:hover {
  background: var(--color-primary-dark);
}

.simulateur-result {
  margin-top: 1.5rem;
  background: var(--color-bg-section);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
}

.simulateur-result-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 0.4rem;
}

.simulateur-result-value {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}

/* === 11. TABLE OF CONTENTS (plugin) === */
.toc,
#toc,
.ez-toc-container,
.table-of-contents {
  background: var(--color-bg-section);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0 2rem;
}

/* === 12. BADGES === */
.badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  border-radius: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-fiscal { background: var(--color-accent-light); color: var(--color-accent-dark); }
.badge-societes { background: var(--color-primary-light); color: var(--color-primary); }
.badge-creation { background: #ECFDF5; color: #065F46; }
.badge-contentieux { background: #FEF2F2; color: #991B1B; }
.badge-2026 { background: var(--color-bg-dark); color: var(--color-accent); }

.entry-tags a,
.post-tags a {
  display: inline-block;
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 0.2rem 0.65rem;
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  margin: 0.2rem;
  transition: background var(--transition);
}

.entry-tags a:hover {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* === 13. AUTHOR BOX === */
.ccl-bio {
  border-top: 1px solid var(--color-border);
  margin-top: 3rem;
  padding-top: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ccl-bio-avatar {
  width: 56px;
  height: 56px;
  background: var(--color-bg-dark);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-headings);
  font-size: 1.4rem;
}

.ccl-bio-name {
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
}

.ccl-bio-desc {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* === 14. MASQUER FOOTER GENERATEPRESS + FOOTER CUSTOM === */
.site-footer, .footer-bar, .site-info { display: none !important; }

.ccl-footer-custom {
  background: #0F172A;
  color: rgba(255,255,255,0.75);
  padding: 3.5rem 2rem 1.5rem;
  margin-top: 4rem;
}

.ccl-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

.ccl-footer-brand p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin: 1rem 0 0;
}

.ccl-footer-col h4 {
  font-family: var(--font-headings);
  font-size: 0.95rem;
  color: var(--color-accent);
  margin: 0 0 1rem;
  font-weight: 400;
}

.ccl-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ccl-footer-col ul li {
  margin-bottom: 0.5rem;
}

.ccl-footer-col ul li a {
  color: rgba(255,255,255,0.65);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s;
  border: none !important;
}

.ccl-footer-col ul li a:hover {
  color: #FFFFFF;
}

.ccl-footer-bottom {
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}

.ccl-footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

/* Footer responsive */
@media (max-width: 768px) {
  .ccl-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .ccl-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .ccl-footer-inner {
    grid-template-columns: 1fr;
  }
}

/* === 15. PAGINATION === */
.pagination .page-numbers {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.9rem;
  margin: 0.2rem;
  display: inline-block;
  transition: all var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

/* === 16. GRILLE ARTICLES HUBS === */
.ccl-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

.ccl-articles-grid .ccl-article-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ccl-articles-grid .ccl-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(30,41,59,0.12);
}

.ccl-articles-grid .ccl-article-card h3 {
  font-size: 0.95rem;
  color: var(--color-text-dark);
  margin: 0 0 0.4rem;
}

.ccl-articles-grid .ccl-article-card p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* === 17. ARCHIVE/CATEGORY GRILLE 2 COLONNES AVEC IMAGES === */

/* Container : grid 2 colonnes */
.blog #primary .inside-article,
.archive #primary .inside-article,
.category #primary .inside-article,
.blog .generate-columns-container,
.archive .generate-columns-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
}



.blog article.post:hover,
.archive article.post:hover,
.category article.post:hover {
  border-color: var(--color-accent) !important;
  box-shadow: 0 4px 12px rgba(30,41,59,0.08) !important;
}

/* Featured image dans la card */




/* Title dans la card */
article.post .entry-title {
  font-size: 1.05rem !important;
  margin: 0 0 0.3rem !important;
  line-height: 1.35 !important;
}

/* Excerpt crop 4 lignes */
article.post .entry-summary,
article.post .entry-summary p {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
}

/* Meta (date, categorie) compact */
article.post .entry-meta {
  font-size: 0.75rem !important;
  margin-top: 0.5rem !important;
}

/* Read more link */
article.post .read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent) !important;
}

/* === 18. IMAGES HOVER + FIGCAPTION === */
.entry-content figure img {
  transition: transform 0.3s ease;
  border-radius: var(--radius);
}
.entry-content figure:hover img {
  transform: scale(1.02);
}

.entry-content figcaption {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--color-accent);
}

/* === 19. RESPONSIVE === */
@media (max-width: 768px) {
  h1, .entry-title { font-size: 1.55rem; }
  h2 { font-size: 1.3rem; }

  .content-area, #primary {
    padding: 1.25rem !important;
    border: none;
  }

  .ccl-chiffre-block { flex-direction: column; }
  .ccl-chiffre { min-width: auto; }

  .simulateur-block { padding: 1.25rem; }

  .main-navigation {
    background: var(--color-primary-dark) !important;
  }

  .ccl-bio { flex-direction: column; }
  .ccl-articles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .blog #primary .inside-article,
  .archive #primary .inside-article,
  .category #primary .inside-article {
    grid-template-columns: 1fr !important;
  }
  .blog article.post,
  .archive article.post,
  .category article.post {
    grid-template-columns: 1fr !important;
  }
  article.post .post-image,
  article.post .entry-image-link {
    width: 100% !important;
    height: 160px !important;
  }
}

/* === 20. PRINT === */
@media print {
  .site-header, .site-footer, #secondary, .navigation, .ccl-footer-custom { display: none; }
  .content-area { box-shadow: none; border: none; padding: 0 !important; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}
/* ═══════════════════════════════════════════════════════════
   BLOG CARDS - NUCLEAR FIX
   Uses body.blog for max specificity, !important everywhere
   ═══════════════════════════════════════════════════════════ */

/* Grid on #main */
body.blog main#main,
body.archive main#main,
body.category main#main {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  padding: 0 !important;
}

body.blog main#main > .paging-navigation,
body.archive main#main > .paging-navigation {
  grid-column: 1 / -1 !important;
}

/* RESET article.post completely */
body.blog article.post,
body.archive article.post {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  float: none !important;
  width: auto !important;
}

/* CARD = .inside-article */
body.blog article.post .inside-article,
body.archive article.post .inside-article {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(30,41,59,0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body.blog article.post .inside-article:hover,
body.archive article.post .inside-article:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(30,41,59,0.12) !important;
}

/* ALL children: reset their margins/paddings and set order */
body.blog .inside-article > *,
body.archive .inside-article > * {
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
}

/* IMAGE: order -10, full width top */
body.blog .inside-article > .post-image,
body.archive .inside-article > .post-image {
  order: -10 !important;
  height: 200px !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

body.blog .inside-article > .post-image a,
body.archive .inside-article > .post-image a {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

body.blog .inside-article > .post-image img,
body.archive .inside-article > .post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
  max-width: none !important;
}

body.blog .inside-article:hover > .post-image img,
body.archive .inside-article:hover > .post-image img {
  transform: scale(1.05) !important;
}

/* HEADER: order -5, under image */
body.blog .inside-article > header.entry-header,
body.archive .inside-article > header.entry-header {
  order: -5 !important;
  padding: 1rem 1.25rem 0.25rem !important;
}

body.blog .inside-article .entry-title,
body.archive .inside-article .entry-title {
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
  margin: 0 0 0.25rem !important;
}

body.blog .inside-article .entry-header .entry-meta,
body.archive .inside-article .entry-header .entry-meta {
  font-size: 0.72rem !important;
  color: #94A3B8 !important;
}

/* SUMMARY: order 0, under header */
body.blog .inside-article > .entry-summary,
body.archive .inside-article > .entry-summary {
  order: 0 !important;
  padding: 0.25rem 1.25rem 0.5rem !important;
  flex: 1 !important;
}

body.blog .inside-article .entry-summary p,
body.archive .inside-article .entry-summary p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
  color: #64748B !important;
  margin: 0 !important;
}

body.blog .inside-article .read-more,
body.archive .inside-article .read-more {
  display: none !important;
}

/* FOOTER META: order 10, bottom with category badge */
body.blog .inside-article > footer.entry-meta,
body.archive .inside-article > footer.entry-meta {
  order: 10 !important;
  padding: 0.6rem 1.25rem 0.9rem !important;
  border-top: 1px solid #F1F5F9 !important;
  font-size: 0.72rem !important;
}

body.blog footer.entry-meta .cat-links a,
body.archive footer.entry-meta .cat-links a {
  background: #F8FAFC !important;
  color: #64748B !important;
  padding: 0.15rem 0.55rem !important;
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border: none !important;
}

/* Mobile */
@media (max-width: 680px) {
  body.blog main#main,
  body.archive main#main {
    grid-template-columns: 1fr !important;
  }
}

/* Fix: lighten result card labels on dark backgrounds */
[style*="background:#1E293B"] span[style*="letter-spacing"],
[style*="background:#1E293B"] span[style*="uppercase"] {
  color: rgba(255,255,255,0.55) !important;
}

/* Also make sure the values stay bright white */
[style*="background:#1E293B"] span[style*="font-family:'JetBrains Mono'"],
[style*="background:#1E293B"] span[style*="JetBrains Mono"] {
  color: #FFFFFF !important;
}



/* ═══════════════════════════════════════════════════════════
   BLOG PAGE FIX - Match category page card structure
   Image top, title below, excerpt, date, category badge
   ═══════════════════════════════════════════════════════════ */

/* Override GP one-container padding for blog */
body.blog.one-container .inside-article,
body.archive.one-container .inside-article {
  padding: 0 !important;
}

/* Image height consistent */
body.blog .inside-article > .post-image,
body.archive .inside-article > .post-image {
  height: 180px !important;
}

/* Title - allow 2 lines, no clip */  
body.blog .inside-article .entry-title,
body.archive .inside-article .entry-title {
  font-size: 0.92rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.2rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Header area */
body.blog .inside-article > header.entry-header,
body.archive .inside-article > header.entry-header {
  padding: 0.8rem 1rem 0.2rem !important;
}

/* Meta inside header (date + author) */
body.blog .inside-article .entry-header .entry-meta,
body.archive .inside-article .entry-header .entry-meta {
  font-size: 0.7rem !important;
  margin-top: 0.15rem !important;
}

/* Excerpt area */
body.blog .inside-article > .entry-summary,
body.archive .inside-article > .entry-summary {
  padding: 0.3rem 1rem 0.5rem !important;
}

body.blog .inside-article .entry-summary p,
body.archive .inside-article .entry-summary p {
  -webkit-line-clamp: 3 !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

/* Footer with category badge */
body.blog .inside-article > footer.entry-meta,
body.archive .inside-article > footer.entry-meta {
  padding: 0.4rem 1rem 0.7rem !important;
}


/* === WIDER CONTAINER === */
body .grid-container,
body .site-content .content-area,
body #primary {
  max-width: 1140px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Homepage content needs full width too */
body.page #primary .inside-article {
  max-width: 100% !important;
  padding: 2rem !important;
}

/* Article pages: wider reading area */
body.single .entry-content {
  max-width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════
   DEFINITIVE BLOG GRID - ccl-blog-grid wrapper
   ═══════════════════════════════════════════════════════════ */

.ccl-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
}

.ccl-blog-grid > .paging-navigation {
  grid-column: 1 / -1 !important;
}

/* Each card */
.ccl-blog-card-post {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.ccl-blog-card-post > .inside-article {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(30,41,59,0.06) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.ccl-blog-card-post > .inside-article:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(30,41,59,0.12) !important;
}

/* Image on top */
.ccl-blog-card-post .inside-article > .post-image {
  order: -10 !important;
  width: 100% !important;
  height: 190px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.ccl-blog-card-post .post-image a {
  display: block !important;
  height: 100% !important;
}

.ccl-blog-card-post .post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.ccl-blog-card-post .inside-article:hover .post-image img {
  transform: scale(1.05) !important;
}

/* Header under image */
.ccl-blog-card-post .inside-article > header.entry-header {
  order: -5 !important;
  padding: 0.8rem 1.1rem 0.15rem !important;
  margin: 0 !important;
}

.ccl-blog-card-post .entry-title {
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  margin: 0 0 0.2rem !important;
}

.ccl-blog-card-post .entry-header .entry-meta {
  font-size: 0.7rem !important;
}

/* Excerpt */
.ccl-blog-card-post .inside-article > .entry-summary {
  order: 0 !important;
  padding: 0.3rem 1.1rem 0.5rem !important;
  margin: 0 !important;
  flex: 1 !important;
}

.ccl-blog-card-post .entry-summary p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: #64748B !important;
  margin: 0 !important;
}

.ccl-blog-card-post .read-more {
  display: none !important;
}

/* Footer category */
.ccl-blog-card-post .inside-article > footer.entry-meta {
  order: 10 !important;
  padding: 0.5rem 1.1rem 0.8rem !important;
  margin: 0 !important;
  border-top: 1px solid #F1F5F9 !important;
  font-size: 0.7rem !important;
}

.ccl-blog-card-post footer.entry-meta .cat-links a {
  background: #F8FAFC !important;
  color: #64748B !important;
  padding: 0.15rem 0.55rem !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border: none !important;
}

@media (max-width: 680px) {
  .ccl-blog-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ═══════ PAGE BACKGROUND DIFFERENTIATION ═══════ */
/* Body: soft warm grey background */
body {
  background-color: #F5F3F0 !important;
}

/* Main content area: white with subtle shadow */
.one-container .site-content,
.site-content .content-area,
#primary {
  background: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 8px rgba(30,41,59,0.06) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2rem !important;
}

/* Header and footer stay full width, no margin */
.site-header, .ccl-footer-custom {
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Breadcrumb bridges the gap */
.rank-math-breadcrumb, .breadcrumbs {
  background: #FFFFFF !important;
  border-radius: 0 !important;
  margin: 0 !important;
}