/*
 * AXEK Elements – Blog · Grille + recherche (par 6LEX – https://6lex.co)
 * « Tous les articles » : barre latérale (recherche live + filtre + encadré)
 * + grille de cartes (image + bloc titre gris, date | catégorie).
 */
.axek-bg, .axek-bg * { box-sizing:border-box; }
.axek-bg-h.axek-bg-h{ margin:0 0 38px; font-weight:600; font-size: var(--ax-section); letter-spacing: -.025em; color:var(--ax-encre); line-height: 1.12;}

.axek-bg-row{ display:grid; grid-template-columns:var(--side-w,230px) 1fr; gap:56px; align-items:start; }
.axek-bg--right .axek-bg-row{ grid-template-columns:1fr var(--side-w,230px); }
.axek-bg--right .axek-bg-side{ order:2; }
.axek-bg--right .axek-bg-grid{ order:1; }

/* barre latérale */
.axek-bg-search{ display:flex; align-items:center; gap:10px; border:1px solid var(--ax-filet); border-radius:100px; padding:12px 14px; }
.axek-bg-search svg{ width:16px; height:16px; color:var(--ax-texte-tenu); flex:none; }
.axek-bg-search input{ border:0; outline:0; font-family:inherit; font-size: var(--ax-meta); width:100%; background:none; color:var(--ax-encre); line-height: 1.45;}
.axek-bg-clear.axek-bg-clear{ display:block; width:100%; text-align:center; margin-top:12px; background:var(--ax-terra); color:#fff; font-family:inherit; font-weight:600; font-size:var(--axk-btn-sm-fs); padding:var(--axk-btn-sm-pad); border-radius:var(--axk-btn-radius); border:0; cursor:pointer; transition:background var(--axk-btn-dur) var(--axk-ease), transform var(--axk-btn-dur) var(--axk-ease); }
.axek-bg-clear.axek-bg-clear:hover{ background:var(--axk-btn-terra-h); transform:translateY(var(--axk-btn-lift)); }
.axek-bg-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.axek-bg-chip.axek-bg-chip{ font-family:inherit; font-weight:500; font-size: var(--ax-meta); color:var(--ax-texte-doux); background:#fff; border:1px solid var(--ax-filet); padding:7px 14px; border-radius:100px; cursor:pointer; transition:var(--axk-dur-fast); }
.axek-bg-chip.axek-bg-chip:hover{ border-color:var(--ax-texte-tenu); }
.axek-bg-chip.on{ background:var(--ax-encre); color:#fff; border-color:var(--ax-encre); }
.axek-bg-comm{ margin-top:26px; background:var(--ax-terra-voile); border-radius:18px; padding:24px 22px; }
.axek-bg-comm.axek-bg-comm h4{ margin:0; font-weight:600; font-size: var(--ax-carte); line-height: 1.25; letter-spacing: -.015em; color:var(--ax-encre); }
.axek-bg-comm p{ margin:10px 0 0; font-size: var(--ax-meta); line-height: 1.45; color:var(--ax-encre); }
.axek-bg-comm a{ display:inline-block; margin-top:16px; color:var(--ax-terra); font-weight:600; font-size: var(--ax-meta); text-decoration:none; line-height: 1.45;}

/* grille — MÊME carte que « Voir plus d'histoires » (pastille · titre · date),
   seule différence voulue : le bloc titre reste GRIS (vs blanc). */
.axek-bg-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; align-content:start; }
.axek-bg-card{ display:block; border-radius:18px; overflow:hidden; text-decoration:none; color:inherit;
	box-shadow:0 1px 2px rgba(16,20,40,.04), 0 18px 40px -28px rgba(16,20,40,.18);
	transition:transform var(--axk-dur-mid) var(--axk-ease), box-shadow var(--axk-dur-mid) var(--axk-ease); }
.axek-bg-card:hover{ transform:translateY(var(--axk-carte-lift)); box-shadow:var(--axk-carte-lift-shadow); }
.axek-bg-card img{ width:100%; height:184px; object-fit:cover; display:block; transition:transform var(--axk-dur-slow) var(--axk-ease); }
.axek-bg-card:hover img{ transform:scale(1.04); }
.axek-bg-body{ background:var(--ax-surface); padding:20px 22px 22px; }
.axek-bg-cat{ display:inline-block; font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0; text-transform:uppercase; color:var(--ax-terra); margin-bottom:9px; line-height: 1.2;}
/* Classe doublée : le kit Elementor vise les balises de titre, une classe
   seule ne lui passerait pas devant. */
.axek-bg-title.axek-bg-title{ margin:0; font-size: var(--ax-chapo); font-weight: 500; line-height: 1.55; color:var(--ax-encre); }
.axek-bg-body .m{ margin-top:10px; font-size: var(--ax-meta); color:var(--ax-texte-tenu); line-height: 1.45;}
.axek-bg-nores{ grid-column:1 / -1; color:var(--ax-texte-doux); font-size: var(--ax-second); padding:18px 0; line-height: 1.55; font-weight: 500;}

@media (max-width:900px){
	.axek-bg-row, .axek-bg--right .axek-bg-row{ grid-template-columns:1fr; gap:34px; }
	.axek-bg--right .axek-bg-side{ order:0; }
}

/* ---------- ZONES DE TOUCHE ----------
   Au doigt, ce qui se touche doit faire au moins 40 px. Téléphone ET tablette :
   le pointeur grossier ("pointer: coarse") attrape aussi les hybrides tactiles,
   la largeur attrape les tablettes que le navigateur déclare fines. On agrandit
   la ZONE, jamais le dessin. Classe doublée sur la pastille : le thème se
   charge APRÈS le plugin, à égalité de poids il gagnerait. */
@media (max-width: 1024px), (pointer: coarse){
	.axek-bg-search input{ min-height: 40px; }
	.axek-bg-chip.axek-bg-chip{ padding-block: 10px; }
}