/* =========================
   BLOG (listing)
   ========================= */
   main.blog-page {
    padding-top: 0;
    background: var(--secondary-color, #ffffff);
  }
  
  .blog-hero .section-title { margin-bottom: .25rem; }
  .blog-hero .section-subtitle { color: var(--dark-gray, #666); }
  
  .blog-controls {
    display:flex; align-items:center; justify-content: flex-start;
    gap: 1rem; margin: 20px 0 10px; flex-wrap: wrap;
  }
  /* BLOG SEARCH — cohérent (loupe à gauche, clear à droite) */
.blog-search { position:relative; flex:1 1 600px; }

.blog-search input{
  width:100%;
  padding:.9rem 2.6rem .9rem 2.4rem; /* 2.4rem à gauche pour la loupe */
  border:1px solid var(--medium-gray, #e6e6e9);
  border-radius: var(--radius-md, 12px);
  background:#fff;
  outline:none;
}

.blog-search i{
  position:absolute;
  left:.9rem;                 /* ⬅️ passe de right à left */
  top:50%; transform:translateY(-50%);
  pointer-events:none; opacity:.7; z-index:1;
  width:18px; height:18px;
}

.blog-search .clear-btn{
  position:absolute;
  right:.9rem;                /* croix à droite */
  top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer; color:#666; opacity:.9;
}

.blog-search input:focus{ border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.08); }
.blog-search input:placeholder-shown ~ .clear-btn{ opacity:0; pointer-events:none; }

.blog-search { position: relative; } /* déjà présent, on garde */
.blog-search .lucide {                /* <- cible le SVG inséré par Lucide */
  position: absolute;
  left: .9rem;                       /* loupe à gauche */
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}

/* Assure l'espace à gauche pour l’icône */
.blog-search input {
  padding-left: 2.4rem;              /* cohérent avec l'icône à gauche */
}


@media (max-width: 768px){
  .blog-controls{ gap:.75rem; }
  .blog-search{ flex:1 1 100%; }
}

/* icône lucide */
.blog-search i svg{ width:18px; height:18px; opacity:.7; }

  
  .blog-grid {
    display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg, 24px); margin-top: var(--spacing-lg, 24px);
  }
  
  .blog-card {
    background: var(--secondary-color, #fff);
    border:1px solid var(--medium-gray, #ececf0);
    border-radius: var(--radius-lg, 16px);
    overflow:hidden; box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.04));
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display:flex; flex-direction:column;
  }
  .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md, 0 10px 24px rgba(0,0,0,.08));
    border-color: var(--primary-color, #111);
  }
  
  .blog-thumb { position:relative; aspect-ratio: 16/10; background: var(--light-gray, #f4f4f6); overflow:hidden; }
  .blog-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .9s ease; }
  .blog-card:hover .blog-thumb img { transform: scale(1.04); }
  
  .blog-badge{
  position:absolute; right:12px; top:12px;
  background: linear-gradient(135deg, #F9A312, #F895AC);
  color:#fff; padding:.35rem .6rem; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
  
  .blog-content { padding: 16px 18px 18px; display:flex; flex-direction:column; gap:.4rem; }
  .blog-title {
    font-family: var(--font-heading, "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial);
    font-size: 1.15rem; font-weight: 800; letter-spacing:-.3px;
    color: var(--primary-color, #111); line-height:1.25;
  }
  .blog-meta { display:flex; align-items:center; gap:.6rem; color: var(--dark-gray, #666); font-size:.85rem; }
  .blog-excerpt { color: var(--dark-gray, #666); font-size:.95rem; line-height:1.5; margin-top:.2rem; }
  
  .blog-footer { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-top:.8rem; }
  .read-link { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:700; font-size:.9rem; color:#F9A312; }
  .read-link i { transition: transform .2s ease; }
  .read-link:hover i { transform: translateX(4px); }
  
  .actions { text-align:center; margin: 26px 0 60px; }
  
  .empty { text-align:center; color: var(--dark-gray, #666); padding: 40px 0; }
  .empty i { font-size: 38px; opacity:.25; display:block; margin-bottom: 8px; }

/* Prevent underline inside cards */
.blog-card a{ text-decoration:none !important; color: inherit; }
.blog-card a:hover, .blog-card a:focus{ text-decoration:none; }

/* Meta chips */
.blog-meta{ display:flex; align-items:center; gap:.6rem; color: var(--dark-gray, #666); font-size:.85rem; }
.meta-chip{ display:inline-flex; align-items:center; gap:6px; padding:.22rem .5rem; border-radius:999px; font-weight:600; font-size:.78rem; line-height:1; }
.date-chip{ background:#f1f3f5; color:#555; border:1px solid #e6e8eb; }
.meta-chip i{ width:16px; height:16px; }

@media (max-width: 640px){ main.blog-page{ padding-top: 0; } }



/* Hotfix: reduce gap below header, inner search icon adjusted (2025-08-18) */

/* Section Derniers articles (home) */
.latest-posts { padding: 80px 0; background: var(--secondary-color); }
.latest-posts .blog-grid { margin-top: var(--spacing-xl); }