/* =========================================================================
   GAMIDA : Mega menu
   Reproduit le panneau type "GAMIDA" : carte promo + cartes catégories.
   L'ouverture desktop réutilise la classe .on posée au survol par le thème.
   ========================================================================= */

:root {
	--bt-mega-navy:   #1b2367;   /* titres */
	--bt-mega-text:   #5a6178;   /* texte courant */
	--bt-mega-muted:  #8a90a6;   /* sous-titres */
	--bt-mega-border: #eceef5;
	--bt-mega-radius: 18px;
	--bt-mega-shadow: 0 24px 60px -20px rgba(20, 28, 80, .28);
	--bt-mega-maxw:   1360px;
}

/* ----- Panneau (caché par défaut) -------------------------------------
   `position: fixed` se résout par rapport à .mainHeader (qui possède un
   `transform`, devenant donc le bloc conteneur des éléments fixed/absolute).
   .mainHeader fait 100% de large → top:100% place le panneau juste sous le
   header, et left:50% le centre sur toute la largeur de la page.
   Aucune dépendance à la position de .menuPort, aucun JS de positionnement. */
.bt-mega-panel {
	position: fixed;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	width: var(--bt-mega-maxw);
	max-width: calc(100vw - 48px);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
	text-align: left;
}

/* Pont invisible : évite que le survol "lâche" entre la barre de menu et le
   panneau (sinon mouseleave fermerait le panneau avant qu'on l'atteigne). */
.bt-mega-panel::before {
	content: "";
	position: absolute;
	top: -16px;
	left: 0;
	right: 0;
	height: 18px;
}

/* Ouverture : .on est ajouté par le JS du thème (survol) + .bt-mega-open par notre JS (clic/tactile) */
.menuPort li.btMegaItem.on > .bt-mega-panel,
.menuPort li.btMegaItem.bt-mega-open > .bt-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Le thème préfixe tout "ul ul" d'un <div class="subToggler"> ; on le neutralise
   à l'intérieur du panneau (nos listes de cartes ne sont pas des sous-menus). */
.bt-mega-panel .subToggler { display: none !important; }

/* ----- Neutralisation des styles de menu du thème parent ----------------
   Le panneau vit dans un <li> du menu : le parent y applique ses styles de
   liens (uppercase, padding, display block, couleur). On les annule ici,
   avec !important car les sélecteurs du parent sont très spécifiques. */
.bt-mega-panel {
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
}
.bt-mega-panel a {
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
}
.bt-mega-panel .bt-mega-card-title a,
.bt-mega-panel .bt-mega-card-item a {
	display: inline !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	line-height: inherit !important;
}

.bt-mega-inner {
	background: #fff;
	border-radius: var(--bt-mega-radius);
	box-shadow: var(--bt-mega-shadow);
	border: 1px solid var(--bt-mega-border);
	padding: 28px 32px 32px;
}

/* ----- En-tête (Titre + sous-titre + filet) --------------------------- */
.bt-mega-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.bt-mega-head-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--bt-mega-navy);
	line-height: 1.1;
}
.bt-mega-head-sub {
	font-size: 15px;
	color: var(--bt-mega-muted);
	font-weight: 400;
}
.bt-mega-head-rule {
	flex: 1 1 auto;
	height: 1px;
	background: var(--bt-mega-border);
	margin-left: 4px;
}

/* ----- Grille générale ------------------------------------------------- */
.bt-mega-grid {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px;
	align-items: stretch;
}
.bt-mega-grid--nofeatured {
	grid-template-columns: 1fr;
}
.bt-mega-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	/* Les cartes gardent leur hauteur naturelle (cf. maquette : cartes
	   courtes et longues côte à côte), au lieu de s'étirer par rangée. */
	align-items: start;
}
/* Sans carte promo, les cartes occupent toute la largeur du panneau : deux
   colonnes y laisseraient de grands vides. On passe à trois. */
.bt-mega-grid--nofeatured .bt-mega-cards {
	grid-template-columns: repeat(3, 1fr);
}

/* ----- Carte promo (gauche) ------------------------------------------- */
.bt-mega-featured {
	--mega-accent: #7b5cff;
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 26px 24px;
	color: #fff;
	display: flex;
	flex-direction: column;
	/* La carte est étirée sur toute la hauteur de la grille : son contenu se
	   centre verticalement plutôt que de coller en haut, bouton rejeté en bas. */
	justify-content: center;
	background: var(--mega-accent);
	background-image: linear-gradient(155deg, var(--mega-accent) 0%, color-mix(in srgb, var(--mega-accent) 62%, #2b1370) 100%);
}
/* halo décoratif en haut à droite */
.bt-mega-featured::after {
	content: "";
	position: absolute;
	top: -60px;
	right: -50px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	pointer-events: none;
}
.bt-mega-featured > * { position: relative; z-index: 1; }

.bt-mega-featured-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: 30px;
	margin-bottom: 22px;
}
.bt-mega-featured-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .16);
	margin-bottom: 22px;
}
.bt-mega-featured-icon img { width: 26px; height: 26px; object-fit: contain; }

/* Optional image shown right above the title. Full card width, bounded height
   so the title, description and button stay visible without making the panel
   any taller. */
.bt-mega-featured-media {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 18px;
	line-height: 0;
}
.bt-mega-featured-media img {
	display: block;
	width: 100%;
	max-height: 170px;
	object-fit: cover;
}

.bt-mega-featured-title {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 800;
	color: #fff;
	margin: 0 0 12px;
}
.bt-mega-featured-text {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
	margin: 0 0 22px;
}
.bt-mega-featured-btn {
	/* `margin-top: auto` rejetait le bouton en bas de la carte étirée, loin de
	   son texte : il suit désormais le bloc de contenu centré. */
	margin-top: 0;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fff !important;
	border-radius: 12px;
	padding: 16px 18px !important;
	text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bt-mega-featured-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4);
}
.bt-mega-featured-btn-label {
	font-size: 16px !important;
	font-weight: 700;
	color: var(--bt-mega-navy) !important;
	white-space: nowrap;
}
.bt-mega-featured-btn-badge {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--mega-accent) 75%, #000);
	background: color-mix(in srgb, var(--mega-accent) 16%, #fff);
	padding: 5px 10px;
	border-radius: 7px;
}

/* ----- Cartes catégories ---------------------------------------------- */
.bt-mega-card {
	--card-accent: #2f6df6;
	border: 1px solid var(--bt-mega-border);
	border-radius: 16px;
	padding: 22px 24px;
	background: #fff;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.bt-mega-card:hover {
	border-color: color-mix(in srgb, var(--card-accent) 35%, var(--bt-mega-border));
	box-shadow: 0 12px 28px -18px rgba(20, 28, 80, .35);
}
.bt-mega-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
/* Carte sans liste de liens : le titre est tout le contenu. On retire la
   gouttière qui le laissait collé en haut, et on le centre verticalement,
   y compris si la carte est étirée par une voisine plus haute. */
.bt-mega-card--nolinks {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bt-mega-card--nolinks .bt-mega-card-head { margin-bottom: 0; }
.bt-mega-card-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--card-accent);
}
.bt-mega-card-icon img { width: 22px; height: 22px; object-fit: contain; }
.bt-mega-card-title {
	font-size: 16.5px;
	font-weight: 800;
	color: var(--bt-mega-navy);
	margin: 0;
	line-height: 1.25;
}
.bt-mega-card-title a {
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
}
.bt-mega-card-title a:hover { color: var(--card-accent) !important; }
/* Bloc texte de l'en-tête : titre + description facultative empilés à droite
   de l'icône (min-width:0 pour autoriser le retour à la ligne). */
.bt-mega-card-heading { min-width: 0; }
/* !important comme pour les liens : le thème parent applique ses propres styles
   (couleur, taille, casse, voire masquage) aux éléments situés dans un <li> de
   menu, et ses sélecteurs sont plus spécifiques que les nôtres. */
.bt-mega-panel .bt-mega-card-desc {
	display: block !important;
	visibility: visible !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--bt-mega-text) !important;
}

.bt-mega-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bt-mega-card-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	line-height: 1.4;
}
/* puce colorée : --card-dot (champ « Couleur des puces »), repli sur la couleur de l'icône */
.bt-mega-card-item::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--card-dot, var(--card-accent));
}
.bt-mega-card-item a,
.bt-mega-card-item > span {
	color: var(--bt-mega-text) !important;
	font-size: 14.5px !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	transition: color .15s ease;
}
.bt-mega-card-item a:hover { color: var(--card-accent) !important; }

/* badge de lien : --card-badge-* (champ « Couleur des badges »), repli sur le vert */
.bt-mega-tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--card-badge-ink, #2e9e5b);
	background: var(--card-badge-bg, #e7f6ec);
	padding: 3px 8px;
	border-radius: 6px;
}

/* =========================================================================
   Header sticky : panneau plafonné et défilant.
   Hors sticky, .mainHeader est en `position: absolute` en haut du document :
   le panneau défile avec la page, un panneau trop haut reste atteignable.
   En sticky, le thème passe .mainHeader en `position: fixed; top: 0`
   (cliniq/style.css) : le panneau est alors ancré au viewport et tout ce qui
   dépasse le bas de l'écran devient inaccessible. On le borne donc à la
   hauteur restante.

   Le `100%` se résout sur la hauteur du bloc conteneur, c'est-à-dire du
   header lui-même : c'est exactement la hauteur à déduire, sans avoir à la
   coder en dur ni à la mesurer en JS. Elle suit le header rétréci du sticky.
   ========================================================================= */
.btStickyHeaderActive.btMenuHorizontal .bt-mega-panel,
.btStickyHeaderActive.btMenuFullScreenCenter .bt-mega-panel {
	max-height: calc(100vh - 100% - 28px);
	flex-direction: column;
}
/* Flex uniquement à l'ouverture : l'inner devient alors un enfant qui peut
   rétrécir et défiler seul, ce qui garde l'ombre et les coins arrondis hors
   de la zone de défilement. Poser `display: flex` sur le panneau fermé
   écraserait le `display: none` qui le masque en menu replié. */
.btStickyHeaderActive.btMenuHorizontal .menuPort li.btMegaItem.on > .bt-mega-panel,
.btStickyHeaderActive.btMenuHorizontal .menuPort li.btMegaItem.bt-mega-open > .bt-mega-panel,
.btStickyHeaderActive.btMenuFullScreenCenter .menuPort li.btMegaItem.on > .bt-mega-panel,
.btStickyHeaderActive.btMenuFullScreenCenter .menuPort li.btMegaItem.bt-mega-open > .bt-mega-panel {
	display: flex;
}
.btStickyHeaderActive.btMenuHorizontal .bt-mega-panel > .bt-mega-inner,
.btStickyHeaderActive.btMenuFullScreenCenter .bt-mega-panel > .bt-mega-inner {
	min-height: 0;   /* sans quoi un enfant flex refuse de passer sous sa taille de contenu */
	overflow-y: auto;
	overscroll-behavior: contain;   /* le scroll ne se propage pas à la page */
}
/* La barre d'administration décale le header sticky de 32px (46px en dessous
   de 782px de large), cf. cliniq/style.css. */
.admin-bar.btStickyHeaderActive.btMenuHorizontal .bt-mega-panel,
.admin-bar.btStickyHeaderActive.btMenuFullScreenCenter .bt-mega-panel {
	max-height: calc(100vh - 100% - 60px);
}
@media screen and (max-width: 782px) {
	.admin-bar.btStickyHeaderActive.btMenuHorizontal .bt-mega-panel,
	.admin-bar.btStickyHeaderActive.btMenuFullScreenCenter .bt-mega-panel {
		max-height: calc(100vh - 100% - 74px);
	}
}

/* ----- Bouton de repli des cartes --------------------------------------
   Rendu par le PHP dans chaque en-tête de carte, mais utile uniquement en
   mode compact (tiroir du burger) : masqué partout ailleurs. */
.bt-mega-card-toggle { display: none; }
.bt-mega-card-toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Passage en flux : menu replié (burger) ou menu vertical du thème.
   Le thème bascule en `body.btMenuVertical` sous 1200px
   (window.responsiveResolution, cf. framework/js/header.misc.js) : le
   breakpoint CSS suit la même valeur pour éviter la zone morte 1024-1200px
   où le panneau restait en `position: fixed`.
   ========================================================================= */
@media (max-width: 1199px) {
	/* Menu replié : le panneau passe en flux normal, empilé sous l'item.
	   En flux, visibility/opacity ne suffisent plus (l'élément caché garderait
	   sa hauteur) : on bascule sur display none/block. */
	.bt-mega-panel {
		position: static;
		transform: none;
		width: 100%;
		max-width: 100%;
		display: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: none;
	}
	/* Surcharge la règle d'ouverture globale (qui réapplique translateX(-50%)). */
	.menuPort li.btMegaItem.on > .bt-mega-panel,
	.menuPort li.btMegaItem.bt-mega-open > .bt-mega-panel {
		display: block;
		transform: none;
	}
	.bt-mega-panel::before { display: none; }
	.bt-mega-inner {
		box-shadow: none;
		border: none;
		border-radius: 0;
		padding: 8px 0 16px;
	}
	.bt-mega-head-rule { display: none; }
	.bt-mega-grid { grid-template-columns: 1fr; }
	/* `.bt-mega-grid--nofeatured .bt-mega-cards` (trois colonnes) est plus
	   spécifique : on le reprend ici, sinon il l'emporterait sur le mobile. */
	.bt-mega-cards,
	.bt-mega-grid--nofeatured .bt-mega-cards { grid-template-columns: 1fr; }
}

/* Menu vertical / replié (responsive) du thème : panneau en flux normal */
.btMenuVertical .bt-mega-panel,
.btShowMenu .menuPort.btResponsiveActive .bt-mega-panel,
.bt-mega-panel.bt-mega-inline {
	position: static;
	transform: none;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
	display: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}
.btMenuVertical .menuPort li.btMegaItem.on > .bt-mega-panel,
.btMenuVertical .menuPort li.btMegaItem.bt-mega-open > .bt-mega-panel,
.btShowMenu .menuPort.btResponsiveActive li.btMegaItem.on > .bt-mega-panel,
.btShowMenu .menuPort.btResponsiveActive li.btMegaItem.bt-mega-open > .bt-mega-panel {
	display: block;
	transform: none;
}
.btMenuVertical .menuPort li.btMegaItem,
.bt-mega-panel.bt-mega-inline { position: relative; }

.btMenuVertical .bt-mega-inner,
.bt-mega-panel.bt-mega-inline .bt-mega-inner {
	box-shadow: none;
	border: none;
	padding: 8px 0 16px;
}
.btMenuVertical .bt-mega-head-rule { display: none; }

/* =========================================================================
   Mode compact : le panneau tenu dans le tiroir du menu burger.
   La classe `.bt-mega-compact` est posée par assets/js/mega-menu.js dès que
   le menu du thème est replié (ou vertical). Les cartes y deviennent des
   sections repliables et la carte promo se réduit à une bannière-lien.
   Les règles de mise en flux ci-dessus servent de repli si le JS ne tourne
   pas : le panneau reste alors simplement empilé, tout déplié.
   ========================================================================= */
.bt-mega-panel.bt-mega-compact {
	/* Le tiroir est étroit : aucun mot ne doit pousser la largeur au-delà.
	   `break-word` et non `anywhere` : ce dernier autorise la coupure au milieu
	   d'un mot dès que la place manque (« Diagnosti / c oral »). */
	min-width: 0;
	overflow-wrap: break-word;
}

/* Surface propre au panneau. Le tiroir du thème est gris moyen, texte clair :
   sans fond, le navy des titres et les chevrons y passaient mal. On garde donc
   le blanc, mais traité en carte de menu déroulant (coins arrondis, retrait
   latéral, ombre discrète) et non en bloc à bords vifs plaqué sur le tiroir. */
.bt-mega-compact .bt-mega-inner {
	background: #fff;
	border: none;
	border-radius: 12px;
	padding: 6px 14px 10px;
	margin: 4px 10px 12px;
	box-shadow: 0 8px 20px -14px rgba(20, 28, 80, .5);
}

/* En-tête masqué : le libellé de l'item de menu (« PRODUITS ») est affiché
   juste au-dessus par le thème, le répéter dans le panneau fait doublon. */
.bt-mega-compact .bt-mega-head { display: none; }

/* ----- Carte promo : accent typographique, sans aplat ------------------
   Un bloc coloré, même pâle, surcharge un panneau par ailleurs très sobre.
   La promo devient donc une section comme les autres, séparée par le même
   filet ; seule la couleur du texte la distingue. */
.bt-mega-compact .bt-mega-grid {
	gap: 0;
	grid-template-columns: 1fr;
}
.bt-mega-compact .bt-mega-featured {
	background: none;
	background-image: none;
	border: 0;
	border-bottom: 1px solid var(--bt-mega-border);
	border-radius: 0;
	padding: 12px 0 14px;
	color: var(--bt-mega-navy);
	text-align: left;
	align-items: flex-start;
	min-width: 0;
}
.bt-mega-compact .bt-mega-featured::after { display: none; }   /* halo décoratif */
.bt-mega-compact .bt-mega-featured-icon,
.bt-mega-compact .bt-mega-featured-media,
.bt-mega-compact .bt-mega-featured-text { display: none; }
/* Badge du haut : plus de pastille, juste une capitale colorée. */
.bt-mega-compact .bt-mega-featured-badge {
	align-self: flex-start;
	background: none;
	color: color-mix(in srgb, var(--mega-accent) 72%, #000);
	font-size: 10px;
	padding: 0;
	margin-bottom: 5px;
}
.bt-mega-compact .bt-mega-featured-title {
	color: color-mix(in srgb, var(--mega-accent) 78%, #000);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 7px;
}
/* Le bouton redevient une simple ligne de lien : ni pastille blanche, ni
   flèche, qui ferait passer le libellé et son badge à la ligne. */
.bt-mega-compact .bt-mega-featured-btn {
	background: none !important;
	padding: 0 !important;
	border-radius: 0;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 6px;
	box-shadow: none;
}
.bt-mega-compact .bt-mega-featured-btn:hover { transform: none; box-shadow: none; }
.bt-mega-compact .bt-mega-featured-btn-label {
	color: var(--bt-mega-text) !important;
	font-size: 13.5px !important;
	font-weight: 400;
	white-space: normal;   /* sinon un libellé long élargit tout le panneau */
}
.bt-mega-compact .bt-mega-featured-btn-badge {
	flex: 0 0 auto;
	font-size: 9.5px;
	padding: 2px 6px;
}

/* ----- Cartes catégories en sections repliables ------------------------ */
/* Une seule colonne, y compris sans carte promo (où le desktop en met trois)
   et quand le menu vertical du thème est actif à une largeur de bureau. */
.bt-mega-compact .bt-mega-cards {
	gap: 0;
	grid-template-columns: 1fr;
}
.bt-mega-compact .bt-mega-card {
	background: none;   /* le blanc vient de .bt-mega-inner */
	border: 0;
	border-top: 1px solid var(--bt-mega-border);
	border-radius: 0;
	padding: 0;
	min-width: 0;
}
.bt-mega-compact .bt-mega-card:first-child { border-top: 0; }
.bt-mega-compact .bt-mega-card:hover {
	border-top-color: var(--bt-mega-border);
	box-shadow: none;
}

/* Section header: title aligned left, like the links of the expanded list,
   chevron on the right. The 34px reserve on the right keeps the title from
   running under the collapse button. */
.bt-mega-compact .bt-mega-card-head {
	position: relative;
	justify-content: flex-start;
	gap: 11px;
	margin: 0;
	padding: 12px 34px 12px 0;
	min-height: 44px;
	text-align: left;
}
.bt-mega-compact .bt-mega-card-icon {
	width: 30px;
	height: 30px;
	border-radius: 9px;
}
.bt-mega-compact .bt-mega-card-icon img { width: 16px; height: 16px; }
.bt-mega-compact .bt-mega-card-title { font-size: 15px; }
/* Inside the drawer a card is reduced to its section title: description
   sentences weighed the list down without helping anyone find their way. They
   are hidden on link-less cards too. */
.bt-mega-compact .bt-mega-card-desc { display: none !important; }

.bt-mega-compact .bt-mega-card-toggle {
	display: block;
	position: absolute;
	top: 0;
	right: -6px;      /* déborde sur la marge : cible tactile pleine hauteur */
	bottom: 0;
	width: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.bt-mega-compact .bt-mega-card-toggle-chevron {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -6px 0 0 -4px;
	border-right: 2px solid rgba(27, 35, 103, .45);
	border-bottom: 2px solid rgba(27, 35, 103, .45);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.bt-mega-compact .bt-mega-card-toggle[aria-expanded="true"] .bt-mega-card-toggle-chevron {
	margin-top: -2px;
	transform: rotate(-135deg);
}
.bt-mega-compact .bt-mega-card-toggle:focus-visible {
	outline: 2px solid var(--card-accent);
	outline-offset: -4px;
	border-radius: 8px;
}

/* Liste repliée par défaut ; le JS bascule l'attribut hidden. */
.bt-mega-compact .bt-mega-card-list {
	padding: 0 0 10px 2px;
}
.bt-mega-compact .bt-mega-card-list[hidden] { display: none; }

/* Le flex desktop (puce + libellé côte à côte) ne tient pas dans le tiroir :
   un libellé long y passait à la ligne suivante en laissant la puce seule sur
   la sienne. On repasse en bloc, puce calée en absolu sur la première ligne,
   et le badge redevient inline à la suite du texte. */
.bt-mega-compact .bt-mega-card-item {
	display: block;
	position: relative;
	padding: 7px 0 7px 15px;
	min-width: 0;
}
.bt-mega-compact .bt-mega-card-item::before {
	position: absolute;
	top: 14px;   /* centre de la première ligne */
	left: 0;
	width: 5px;
	height: 5px;
}
.bt-mega-compact .bt-mega-card-item a,
.bt-mega-compact .bt-mega-card-item > span {
	font-size: 14px !important;
	line-height: 1.45 !important;
}
.bt-mega-compact .bt-mega-tag {
	margin-left: 6px;
	font-size: 9.5px;
	padding: 2px 6px;
	vertical-align: 1px;
}