/* VERSION 2026-08-27-F  ·  rayons Cinéma + Jeux vidéo + Société */
/* =============================================================
   Blocs intercalés dans le fil de la page d'accueil.

   Toutes les classes sont préfixées `ba-` : vérifié, aucune n'existe
   dans style.css, donc AUCUNE autre page n'est touchée.
   Seule exception volontaire : `.voir-tout`, réutilisé tel quel
   (style.css:5183) pour rester cohérent avec le bloc Guide d'achat.

   Échelle d'espacement, tenue partout :
     --ba-sp-block : 34px  au-dessus ET en dessous d'un bloc
     --ba-sp-tight : 12px  dans les listes serrées
   ⚠️ Marges symétriques obligatoires : avec un espace d'un seul côté,
   l'article qui suit un bloc vient se coller.
   ============================================================= */

/* Jetons portes par la RACINE, pas par .ba-sec.
   Erreur precedente : declares sur .ba-sec et .ba-hot uniquement, ils
   n_existaient pas sur .ba-une — le filet bleu de la une tombait donc
   sur une variable indefinie et devenait TRANSPARENT. */
:root {
	--ba-sp-block: 34px;
	--ba-sp-tight: 12px;
	--ba-line: #32373d;
	--ba-line-2: #292d33;
	--ba-ink: #ececec;
	--ba-ink-3: #7b828a;
	--ba-blue: #3cb4fb;
	--ba-blue-link: #15a2f6;
}

.ba-sec { margin: var(--ba-sp-block) 0; }

/* ---------- En-tête de bloc ---------- */
.ba-sec-head {
	display: flex;
	align-items: center;
	gap: var(--ba-sp-tight);
	margin: 0 0 16px;
}
.ba-sec-rule { width: 34px; height: 4px; background: var(--ba-blue); flex: none; }
.ba-sec-name {
	font-size: 20px; font-weight: 900; margin: 0;
	text-transform: uppercase; letter-spacing: -0.005em; color: var(--ba-ink);
}
.ba-sec-head .voir-tout { margin-left: auto; flex: none; white-space: nowrap; }
/* Le <a> n a plus de href (voir ba_home_voir_tout) : le curseur main ne
   vient donc plus tout seul. */
.ba-sec-head .voir-tout { cursor: pointer; }

/* Teintes de filet, seul endroit où la couleur varie : les étiquettes de
   catégorie restent dans le bleu de marque comme partout ailleurs. */
.ba-t-jv   .ba-sec-rule { background: #a98bf0; }
.ba-t-cine .ba-sec-rule { background: #f0a35c; }
.ba-t-deal .ba-sec-rule { background: #63d29b; }
.ba-t-soc  .ba-sec-rule { background: #e2708f; }

/* ---------- Vignettes ---------- */
.ba-ph { position: relative; display: block; overflow: hidden; border-radius: 3px; background: #1b1e22; }
.ba-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .15s ease; }
.ba-ph--vide { display: block; width: 100%; aspect-ratio: 3 / 2; background: #1a3a50; }
/* Article sans miniature : ba_home_vignette() renvoie desormais une chaine
   vide (le span imbrique doublait .ba-ph), la teinte vient d'ici. */
.ba-ph:empty { background: #1a3a50; }
a:hover .ba-ph img { opacity: .7; }

/* ---------- Rail horizontal ---------- */
/* min-width:0 est INDISPENSABLE : un enfant de grille vaut min-width:auto,
   et sans ça le rail élargit la colonne au lieu de défiler — la sidebar
   est éjectée et il reste un grand vide à droite. */
.ba-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 218px;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 14px;
	scroll-snap-type: x proximity;
	min-width: 0;
	max-width: 100%;
}
.ba-r-card { scroll-snap-align: start; display: block; text-decoration: none; }
.ba-r-card .ba-ph { aspect-ratio: 3 / 2; }
.ba-r-t {
	display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3;
	margin: 9px 0 0; color: var(--ba-ink); transition: color .15s ease;
}
.ba-r-m { display: block; font-size: 11px; color: var(--ba-ink-3); margin: 5px 0 0; }
.ba-r-card:hover .ba-r-t { color: var(--ba-blue-link); }

/* ---------- Rayon : vedette + trois brèves ---------- */
.ba-ray { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; }

/* La colonne des brèves est souvent plus haute que l'image : la grille
   étire alors la vedette, et un titre en absolu se calerait sur le bas du
   BLOC et non de l'image. L'image remplit donc toute la hauteur reçue, le
   ::before ne fixant que la hauteur MINIMALE (16/9). */
.ba-lead { position: relative; display: block; text-decoration: none; }
.ba-lead::before { content: ""; display: block; padding-top: 56.25%; }
.ba-lead .ba-ph { position: absolute; inset: 0; }
.ba-lead-over {
	position: absolute; inset: auto 0 0 0; z-index: 2; padding: 15px 16px;
	background: linear-gradient(transparent, rgba(6, 8, 10, .95) 62%);
}
.ba-chip {
	display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .09em;
	text-transform: uppercase; color: #0d1114; background: var(--ba-blue);
	padding: 3px 8px; margin-bottom: 8px;
}
.ba-lead-t {
	display: block; font-size: 19px; font-weight: 900; color: #fff;
	line-height: 1.18; letter-spacing: -0.018em;
}

.ba-brefs { display: grid; grid-template-rows: repeat(3, 1fr); }
.ba-bref {
	display: flex; gap: var(--ba-sp-tight); align-items: center;
	padding: var(--ba-sp-tight) 0; border-bottom: 1px solid var(--ba-line-2);
	text-decoration: none;
}
.ba-bref:first-child { padding-top: 0; }
.ba-bref:last-child { padding-bottom: 0; border-bottom: 0; }
.ba-bref-th { width: 92px; flex: none; }
.ba-bref-th .ba-ph { aspect-ratio: 4 / 3; }
.ba-bref-t {
	display: block; font-size: 15.5px; font-weight: 700; line-height: 1.3;
	margin: 0 0 6px; color: var(--ba-ink); transition: color .15s ease;
}
.ba-bref-m { display: block; font-size: 11px; color: var(--ba-ink-3); }
.ba-bref:hover .ba-bref-t { color: var(--ba-blue-link); }

/* ---------- Bandeau « En ce moment » ---------- */
.ba-hot {
	margin: var(--ba-sp-block) 0;
	padding: 22px 0 24px;
	border-top: 1px solid var(--ba-line);
	border-bottom: 1px solid var(--ba-line);
}
.ba-hot-row { display: flex; flex-wrap: wrap; gap: 9px; }
.ba-hot-row a {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12.5px; font-weight: 700; color: #aeb4bb;
	border: 1px solid var(--ba-line); border-radius: 999px;
	padding: 7px 13px; background: #1b1e22; text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}
.ba-hot-row a:hover { color: var(--ba-blue-link); border-color: var(--ba-blue-link); }
.ba-hot-row b { font-size: 11px; font-weight: 600; color: var(--ba-blue); }

/* =============================================================
   COLONNE DE DROITE COLLANTE — scopée à l'accueil
   ⚠️ `.page-container .sidebar` sert AUSSI aux archives et aux articles.
   Sans `body.home`, la règle déborderait sur tout le site.
   Le dernier bloc seul est collant : rendre toute la colonne collante ne
   marche que si elle est plus courte que l'écran, sinon son bas reste
   hors champ. Et la colonne doit s'étirer, faute de quoi un élément
   collant en dernier enfant a une distance de parcours NULLE.
   ============================================================= */
body.home .page-container .sidebar { align-self: stretch; }
body.home .page-container .sidebar > *:last-child { position: sticky; top: 14px; }

/* =============================================================
   TABLETTE ET MOBILE
   ============================================================= */

/* =============================================================
   « À NE PAS MANQUER » — une vedette + trois secondaires
   ============================================================= */
.ba-une { margin: var(--ba-sp-block, 34px) 0; }
.ba-une-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

/* Meme precaution que pour la vedette d'un rayon : si la colonne de droite
   est plus haute, la grille etire le bloc et un titre en absolu decroche
   de l'image. L'image remplit la hauteur recue, le ::before ne fixe que
   la hauteur MINIMALE. */
.ba-une-hero { position: relative; display: block; text-decoration: none; }
.ba-une-hero::before { content: ""; display: block; padding-top: 56.25%; }
.ba-une-hero .ba-ph { position: absolute; inset: 0; }
.ba-une-over {
	position: absolute; inset: auto 0 0 0; z-index: 2; padding: 20px 20px 18px;
	background: linear-gradient(transparent, rgba(6, 8, 10, .95) 60%);
}
.ba-une-t {
	display: block; font-size: 25px; font-weight: 900; color: #fff;
	line-height: 1.14; letter-spacing: -0.022em;
}

/* Trois rangees EGALES : en simple empilement elles laissaient un vide
   sous la troisieme, la vedette 16/9 etant bien plus haute. */
.ba-une-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
/* Titre ALIGNE EN HAUT sur la vignette. En centrage vertical, un titre
   court flottait au milieu de sa rangee et laissait un vide au-dessus,
   desalignant tout par rapport a l_image.  */
.ba-une-s { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.ba-une-s .ba-ph { width: 118px; flex: none; aspect-ratio: 4 / 3; }
.ba-une-s-txt { display: block; }
.ba-une-s-txt .ba-chip { margin-bottom: 6px; }
.ba-une-s-t {
	display: block; /* span : sans ca la pastille reste sur la meme ligne */
	font-size: 15px; font-weight: 900; line-height: 1.26; color: #ececec;
	letter-spacing: -0.008em; transition: color .15s ease;
}
.ba-une-s:hover .ba-une-s-t, .ba-une-hero:hover .ba-une-t { color: #15a2f6; }

/* =============================================================
   LE FIL — balisage a nous (template-parts/home-item.php)
   Aucune surcharge du theme : ces classes n'existent nulle part ailleurs,
   donc aucun conflit possible et aucune autre page touchee.
   ============================================================= */
.ba-item {
	display: grid;
	/* Valeurs relevees sur la prod a 1440px : vignette 200px, titre 24px/30.
	   Mon 185/21 faisait plus petit que l existant, ce qui se voyait. */
	grid-template-columns: 200px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
}
.ba-item + .ba-item { margin-top: 30px; }
.ba-item-thumb { grid-column: 1; grid-row: 1; display: block; }
.ba-item-thumb .ba-ph { display: block; aspect-ratio: 5 / 4; border-radius: 3px; overflow: hidden; background: #1b1e22; }
.ba-item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity .15s ease; }
.ba-item-thumb:hover img { opacity: .7; }

.ba-item-txt { grid-column: 2; grid-row: 1; }
.ba-item-t {
	font-size: 23px; font-weight: 900; line-height: 1.25;
	letter-spacing: -0.014em;
	/* 10px AU-DESSUS du titre et 10 en dessous : releves sur la prod.
	   C est de la que vient l aeration, pas des ecarts entre articles
	   qui sont identiques (30px de part et d autre). */
	margin: 10px 0 10px;
}
.ba-item-t a { color: #ececec; text-decoration: none; transition: color .15s ease; }
.ba-item-t a:hover { color: #15a2f6; }
.ba-item-x {
	font-size: 14px; line-height: 1.4; color: #aeb4bb; margin: 0 0 10px;
}
.ba-item-m { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin: 0; }
/* Ces titres sont des h3 depuis le 27/08 : sections en h2, articles en h3.
   Sans cette remise a zero ils heriteraient des marges du navigateur. */
.ba-une-t, .ba-une-s-t, .ba-lead-t, .ba-bref-t, .ba-r-t { margin: 0; }

/* Pastille = un HUB, donc un lien. Le theme fait pareil ailleurs. */
.ba-cat {
	display: inline-block; background: #3cb4fb; color: #0d1114;
	padding: 3px 7px; font-size: 10px; font-weight: 900;
	letter-spacing: .08em; text-transform: uppercase;
	text-decoration: none; border-radius: 2px; transition: background .15s ease;
}
a.ba-cat:hover, a.ba-cat:focus-visible { background: #fff; }
.ba-when { font-size: 11.5px; color: #98a1a9; } /* 4,54:1 -> 6,0:1 */

/* =============================================================
   NEUTRALISATION D'UNE REGLE DU THEME
   style.css:2510 pose `.home-highlights::before { padding-top: 35% }`,
   un pseudo-element vide de ~378px qui reservait la place de l'ancien
   carrousel. Notre bloc garde la classe `home-highlights` (du code JS
   peut la viser), on annule donc seulement ce pseudo-element.
   ============================================================= */
.ba-une::before { content: none !important; padding-top: 0 !important; display: none !important; }

/* =============================================================
   BOUTON « VOIR TOUT » dans les en-tetes de bloc
   `.voir-tout` du theme (style.css:5183) fait 18px : correct pour le
   gros titre « Guide d'achat » d'origine, trop lourd a cote de nos
   titres de bloc en 20px. On ne redefinit QUE la taille, pour garder
   le fond, la couleur et l'arrondi du theme — donc la coherence.
   ============================================================= */
.ba-sec-head .voir-tout { font-size: 15px; padding: 7px 13px; line-height: 1.2; }

/* =============================================================
   TITRE « Dernières actualités »
   Le theme met `.title-xl` en bleu (il sert aussi aux pages auteur et
   categorie). On lui donne donc notre propre classe plutot que de
   surcharger la sienne : meme traitement que les autres titres de bloc.
   ============================================================= */
.ba-list-title {
	font-size: 23px;
	font-weight: 900;
	letter-spacing: -0.015em;
	color: var(--ba-ink);
	margin: 0 0 20px;
}

/* =============================================================
   MOBILE — passe complete du 27/08/2026
   Constat sur iPhone 13/14 (contenu ~410px) : titres du fil a 15,5px,
   secondaires a 13px, rails a 13px. Illisible. Les sites d'actu FR
   tournent autour de 17-18px sur mobile. On remonte toute l'echelle.
   ============================================================= */

/* =============================================================
   MOBILE — respiration. Passe du 27/08/2026 (2e).
   Constat sur iPhone 14 Pro Max : le texte touchait le bord.
   `.horizontal-wrapper` du theme n'a que 10px de marge laterale ; sur
   mobile le standard tourne autour de 16px. On ne touche PAS au wrapper
   (partage avec les autres pages) : on decale nos propres blocs.
   ============================================================= */


/* =============================================================
   MOBILE — valeurs REPRISES DE LA MAQUETTE VALIDEE, sans écart.

   Historique de mon erreur : sur « les titres sont petits » j'ai tout
   agrandi (17px, 20px, 15px…). Résultat : les titres passaient sur une
   ligne de plus et la page paraissait tassée. La maquette que
   l'utilisateur trouve jolie utilise des valeurs PLUS PETITES et plus
   d'air. On revient donc exactement dessus.
   Une SEULE media query mobile (767px), tailles et marges ensemble :
   aucune passe ne peut en contredire une autre. La tranche tablette
   est traitee separement plus bas, sur une plage disjointe.
   ============================================================= */
@media (max-width: 519px) {
	/* --------------------------------------------------------------
	   POURQUOI DES clamp() ET PAS DES PIXELS FIXES
	   La maquette validee a ete dessinee sur un ecran de 375px. En
	   pixels fixes, le meme dessin sur un iPhone Pro Max (430px)
	   laisse 15% de largeur en plus : tout parait plus petit et plus
	   tasse, alors que les valeurs sont pourtant identiques.
	   Chaque clamp() suit donc la largeur de l'ecran :
	     clamp( valeur a 360px , valeur/375*100vw , valeur a 519px )
	   Le rapport « largeur de colonne / taille de police » reste ainsi
	   constant a 14,7 de 360 a 519px — c'est lui qui donne son rythme
	   a la page. Ce ne sont pas de nouvelles valeurs inventees : c'est
	   la maquette mise a l'echelle.
	   Plancher a 360px et non a 320 : en dessous, le texte secondaire
	   descendrait sous 11px.
	   -------------------------------------------------------------- */
	:root {
		--ba-sp-block: clamp(25px, 6.933vw, 36px);
		--ba-sp-tight: clamp(11.5px, 3.2vw, 16.6px);
		/* Le theme ne donne que 10px de marge laterale sous 767px. On
		   complete jusqu'a 3.733vw au total : 14px a 375px (la
		   maquette), 16px a 430px, 19,4px a 519px. Elle grandit avec le reste. */
		--ba-pad: clamp(3.4px, calc(3.733vw - 10px), 9.4px);
	}

	.ba-une, .ba-sec, .ba-hot, .ba-list-title, .ba-item {
		padding-left: var(--ba-pad); padding-right: var(--ba-pad);
	}
	/* Seule exception : le rail defile, ses cartes doivent filer
	   jusqu'au bord. Le debord compense exactement le padding. */
	.ba-sec .ba-rail { margin-right: calc(-1 * var(--ba-pad)); padding-right: var(--ba-pad); }

	/* La une */
	.ba-une-grid { grid-template-columns: 1fr; gap: clamp(13.4px, 3.733vw, 19.4px); }
	.ba-une-t { font-size: clamp(17.3px, 4.8vw, 24.9px); }
	.ba-une-over { padding: clamp(13.4px, 3.733vw, 19.4px) clamp(13.4px, 3.733vw, 19.4px) clamp(11.5px, 3.2vw, 16.6px); }
	.ba-une-side { grid-template-rows: none; gap: clamp(11.5px, 3.2vw, 16.6px); }
	.ba-une-s { gap: clamp(11.5px, 3.2vw, 16.6px); }
	.ba-une-s .ba-ph { width: clamp(92.2px, 25.6vw, 132.9px); }
	.ba-une-s-t { font-size: clamp(13px, 3.6vw, 18.7px); }

	/* Le fil */
	.ba-list-title {
		font-size: clamp(17.3px, 4.8vw, 24.9px);
		margin-bottom: clamp(15.4px, 4.267vw, 22.1px);
	}
	.ba-item {
		grid-template-columns: clamp(103.7px, 28.8vw, 149.4px) minmax(0, 1fr);
		column-gap: clamp(10.6px, 2.933vw, 15.2px);
	}
	.ba-item + .ba-item { margin-top: clamp(21.1px, 5.867vw, 30.4px); }
	.ba-item-t { font-size: clamp(14.9px, 4.133vw, 21.4px); line-height: 1.26; margin-bottom: 6px; }
	.ba-item-x { display: none; }

	/* Titres de bloc */
	.ba-sec-name { font-size: clamp(15.8px, 4.4vw, 22.8px); }
	.ba-sec-rule { width: 26px; height: 3px; }
	.ba-sec-head a.voir-tout {
		display: inline-block; width: auto; margin-left: auto;
		font-size: clamp(12px, 3.333vw, 17.3px); padding: 6px 11px;
		border-radius: 4px; white-space: nowrap;
	}

	/* Rayons et rails */
	.ba-ray { grid-template-columns: 1fr; gap: clamp(13.4px, 3.733vw, 19.4px); }
	.ba-lead-t { font-size: clamp(15.4px, 4.267vw, 22.1px); }
	.ba-brefs { grid-template-rows: none; }
	.ba-bref-th { width: clamp(71px, 19.733vw, 102.4px); }
	.ba-bref-t { font-size: clamp(13px, 3.6vw, 18.7px); }
	.ba-rail {
		grid-auto-columns: clamp(151.7px, 42.133vw, 218.7px);
		gap: clamp(10.6px, 2.933vw, 15.2px);
	}
	.ba-r-t { font-size: clamp(12.5px, 3.467vw, 18px); }
	.ba-hot-row a { font-size: clamp(11px, 3.067vw, 15.9px); padding: 6px 11px; }

	/* Colonne de droite : plus de collant sur petit ecran. */
	body.home .page-container .sidebar > *:last-child { position: static; }
}

/* =============================================================
   GRAND TELEPHONE, TABLETTE — 520 a 1099px
   Mesure faite dans le navigateur : le theme n'affiche ses deux
   colonnes qu'a partir d'environ 1100px. En dessous il empile la
   colonne de droite SOUS le contenu, si bien que la colonne
   principale ne fait pas 715px comme au bureau mais jusqu'a 1011px.
   Consequence : les lignes du fil montaient a 90 caracteres.

   Ici ce sont les regles BUREAU qui s'appliquent — le gabarit est
   concu pour une colonne de ~715px, donc adapte — et on borne
   simplement la largeur de lecture a 760px.

   La borne haute est volontairement large (1099px) : au-dela de la
   bascule du theme la colonne fait 715px, donc la borne de 760px
   ne s'applique plus d'elle-meme. Elle ne peut rien casser.
   ============================================================= */
@media (min-width: 520px) and (max-width: 1099px) {
	body.home .page-container .main-content,
	body.home .ba-une { max-width: 760px; }

	/* Le gabarit bureau (vignette 200, titre 24) etoufferait la colonne
	   des 520px : il ne resterait que 260px de texte. Valeurs
	   intermediaires sur cette seule tranche. */
	.ba-item { grid-template-columns: 160px minmax(0, 1fr); column-gap: 16px; }
	.ba-item-t { font-size: 20px; }

	/* Sous 768px le theme ne donne que 10px de marge laterale, contre
	   20px au-dessus : on complete pour ne pas avoir de rupture. */
	.ba-une, .ba-sec, .ba-hot, .ba-list-title, .ba-item {
		padding-left: var(--ba-pad-t, 0); padding-right: var(--ba-pad-t, 0);
	}

	/* --------------------------------------------------------------
	   LA UNE : disposition propre a cette tranche.
	   En 1.5fr/1fr, la colonne de droite ne fait ici que ~290px, donc
	   ~160px de texte : les titres passaient a 4 ou 5 lignes et la
	   colonne devenait plus haute que la vedette. La grille etirait
	   alors la vedette, qui tombait a un rapport de 1,06 — presque
	   carree — au lieu de 16/9 (mesure a 768 et 900px).
	   On passe donc la vedette en pleine largeur et les trois
	   secondaires en une rangee de trois cartes sous elle. C'est le
	   seul endroit ou j'ajoute une disposition absente de la maquette,
	   qui ne prevoyait que « telephone » et « bureau ».
	   -------------------------------------------------------------- */
	.ba-une-grid { grid-template-columns: 1fr; gap: 16px; }
	.ba-une-side { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 16px; }
	.ba-une-s { display: block; }
	.ba-une-s .ba-ph { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 9px; }
	.ba-une-s-t { font-size: 15px; }

	/* La colonne de droite est empilee SOUS le contenu sur toute cette
	   tranche : un dernier bloc collant n'y a aucun sens. */
	body.home .page-container .sidebar > *:last-child { position: static; }
}

/* Le complement de marge ne vaut que sous 768px : au-dessus le theme
   donne deja ses 20px. Plage disjointe, aucune regle en double. */
@media (min-width: 520px) and (max-width: 767px) {
	:root { --ba-pad-t: 10px; }

	/* Le theme transforme « voir tout » en gros bouton pleine largeur
	   sous 576px (style.css, @media max-width:576px). Ma requete mobile
	   le neutralisait ; en s'arretant desormais a 519px, elle laissait
	   la regle du theme reprendre la main de 520 a 576px, ou le bouton
	   faisait 480px de large et poussait la page a 725px de largeur
	   (debord mesure de 205px). On le reneutralise ici. */
	.ba-sec-head a.voir-tout {
		display: inline-block; width: auto; margin-left: auto;
		padding: 6px 11px; border-radius: 4px; white-space: nowrap;
		text-align: center;
	}
}

/* =============================================================
   CIBLES TACTILES
   Mesure a 390px : 26 elements cliquables sur 55 faisaient moins
   de 24px de haut, dont toutes les pastilles de hub (20px). Elles
   sont devenues le chemin principal vers les hubs sur telephone,
   donc elles doivent se viser au doigt.
   « pointer: coarse » ne vise que les ecrans tactiles : la souris
   garde la pastille compacte du dessin d'origine.
   ============================================================= */
@media (pointer: coarse) {
	.ba-cat {
		display: inline-flex; align-items: center;
		min-height: 24px; padding: 4px 9px;
	}
	.ba-hot-row a { min-height: 28px; display: inline-flex; align-items: center; }
}