/*
 * AXEK Elements – Blog · Vedette & récents (par 6LEX – https://6lex.co)
 * Section terracotta : pilule + titre, carte vedette (blanche) + colonne récents.
 */
.axek-bf{ position:relative; overflow:hidden; background:var(--ax-terra); color:#fff; }
.axek-bf, .axek-bf * { box-sizing:border-box; }
.axek-bf--terra{ background:radial-gradient(130% 130% at 82% 0%, var(--ax-terra-halo), var(--ax-terra) 46%, var(--ax-terra-fond) 100%); }
.axek-bf--bleu{ background:radial-gradient(130% 130% at 82% 0%, var(--ax-nuit-halo), var(--ax-nuit) 44%, var(--ax-nuit-fond) 100%); }
.axek-bf-rings{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.axek-bf-rings circle{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:1; }
.axek-bf-head, .axek-bf-row{ position:relative; z-index:1; max-width:100%; margin-left:auto; margin-right:auto; }

.axek-bf-head{ text-align:center; }
.axek-bf-pill{ display:inline-block; font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0; text-transform:uppercase; padding:8px 18px 8px 18px; border-radius:100px; background:rgba(255,255,255,.15); color:#fff; }
.axek-bf-title.axek-bf-title{ margin:14px 0 0; font-weight:600; font-size: var(--ax-page); letter-spacing: -.03em; line-height: 1.06; color:#fff; }

.axek-bf-row{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; margin-top:52px; align-items:start; }

/* vedette (carte blanche) */
.axek-bf-feat{ display:block; background:#fff; border-radius:24px; overflow:hidden; text-decoration:none; transition:transform var(--axk-dur-mid) var(--axk-ease); }
.axek-bf-feat:hover{ transform:translateY(var(--axk-carte-lift)); }
.axek-bf-img{ width:100%; height:400px; overflow:hidden; }
.axek-bf-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.axek-bf-body{ padding:26px 30px 30px; }
.axek-bf-ftitle.axek-bf-ftitle{ margin:0; font-weight:600; font-size: var(--ax-section); line-height: 1.12; letter-spacing: -.025em; color:var(--ax-encre); }
.axek-bf-fexc{ margin:12px 0 0; font-size: var(--ax-second); line-height: 1.55; color:var(--ax-texte-doux); max-width:540px; font-weight: 500;}
.axek-bf-fmeta{ margin-top:18px; font-size: var(--ax-meta); font-weight:500; color:var(--ax-texte-doux); line-height: 1.45;}

/* date : surlignée uniquement sur la vedette si activé */
.axek-bf-date{ font-weight:600; }
.axek-bf--dhl .axek-bf-feat .axek-bf-date{ background:var(--ax-terra-voile); color:var(--ax-terra); padding:2px 8px; border-radius:5px; }
.axek-bf-sep{ opacity:.6; margin:0 2px; }

/* colonne récents */
.axek-bf-recent{ border-left:1px solid var(--ax-filet-sombre); padding-left:44px; }
.axek-bf-rtitle.axek-bf-rtitle{ margin:0 0 6px; font-weight:600; font-size: var(--ax-bloc); letter-spacing: -.02em; color:#fff; line-height: 1.2;}
.axek-bf-item{ display:block; padding:22px 18px; margin:0 -18px 14px; border-radius:14px; text-decoration:none; transition:background var(--axk-dur) var(--axk-ease), box-shadow var(--axk-dur-mid) var(--axk-ease); }
.axek-bf-imeta{ font-size: var(--ax-meta); font-weight:500; color:rgba(255,246,240,.72); margin-bottom:9px; line-height: 1.45;}
.axek-bf-ititle.axek-bf-ititle{ margin:0; font-weight: 500; font-size: var(--ax-chapo); line-height: 1.55; color:#fff; }  /* aligné aux cartes (voir plus / tous les articles) : 17px */
.axek-bf-iexc{ margin:8px 0 0; font-size: var(--ax-meta); line-height: 1.45; color:rgba(255,246,240,.78); }
/* Le texte prend la MÊME transition que le fond. Sans elle, une couleur de
   survol claire ferait basculer le texte d'un coup pendant que le fond met
   0,22 s à changer : illisible tout ce temps. */
.axek-bf-ititle, .axek-bf-iexc, .axek-bf-imeta{
	transition: color var(--axk-dur) var(--axk-ease);
}
@media (hover:hover){
	/* Assombrir plutôt qu'inverser : le texte reste blanc, rien ne clignote. */
	.axek-bf--hov .axek-bf-item:hover{ background:var(--axk-btn-terra-h); box-shadow:0 24px 50px -28px rgba(60,15,0,.5); }
}

@media (max-width:900px){
	.axek-bf-row{ grid-template-columns:1fr; gap:36px; }
	.axek-bf-recent{ border-left:0; padding-left:0; border-top:1px solid var(--ax-filet-sombre); padding-top:16px; }
	/* La marge négative déborde la carte de 18 px de chaque côté pour lui
	   donner de l'air au survol. En une seule colonne, elle mange la gouttière
	   de page ENTIÈRE : mesuré à 375 px, la carte s'arrêtait à 2 px du bord.
	   Ici, on la rentre. `margin-bottom` n'est pas touché — il appartient au
	   réglage « Espace entre les articles », qui écrit plus fort. */
	.axek-bf-item{ margin-left:0; margin-right:0; padding:18px 16px; }
}
@media (prefers-reduced-motion:reduce){ .axek-bf-feat, .axek-bf-item{ transition:none; } }

/* ---- Ligne de rubriques sous le grand titre ----
   Une SEULE ligne, comme demandé. Sur un écran trop étroit elle défile
   latéralement plutôt que de passer à la ligne ou de faire déborder la page
   (règle : aucun débordement horizontal). */
.axek-bf-topics{
	margin: 16px 0 0;
	display: flex; align-items: baseline;
	/* « safe » : quand la ligne déborde, on repasse au début — sinon la partie
	   gauche du contenu centré devient inatteignable au défilement. */
	justify-content: center; justify-content: safe center;
	flex-wrap: var(--bf-topics-wrap, nowrap);
	gap: 4px var(--bf-topics-gap, 9px);
	font-size: var(--ax-meta); line-height: 1.45; font-weight: 500;
	color: rgba(255,255,255,.72);
	/* Sur une ligne : si l'écran est trop étroit, la ligne DÉFILE au lieu de
	   faire déborder la page. En mode « plusieurs lignes », rien ne défile. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.axek-bf-topics::-webkit-scrollbar{ display: none; }
.axek-bf-topics > *{ flex: none; }
.axek-bf-topics i{ font-style: normal; color: rgba(255,255,255,.4); }
/* En mode plusieurs lignes, un séparateur en fin de ligne serait orphelin. */
.axek-bf-topics[data-wrap="yes"]{ overflow-x: visible; }