/* Bloc cnd/pill-anchors — signature §8. Racine scopée .cnd.cnd-anchors (correctif post-QA) :
   barre collante au défilement, fond translucide + flou, défilement horizontal si débordement. */
.cnd.cnd-anchors {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	margin: 0 0 var(--s-5);
	/* Valeurs en dur → tokens (contre-QA v0.2.6, point 2) : --ground = #FAFAFA = rgb(250,250,250). */
	background: color-mix(in srgb, var(--ground) 95%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: none;
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* Barre d'admin (utilisateur connecté, contre-QA v0.3.4) : la barre collée passait dessous. Hauteur
   lue sur la variable du cœur WordPress (32 px, 46 px sous 782 px) ; sous 600 px la barre d'admin
   n'est plus fixe (elle défile avec la page) : retour à 0. */
body.admin-bar .cnd.cnd-anchors {
	top: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar .cnd.cnd-anchors {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}
@media screen and (max-width: 600px) {
	body.admin-bar .cnd.cnd-anchors {
		top: 0;
	}
}
.cnd.cnd-anchors .cnd-anchor-pill {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.2;
	color: var(--brand-strong);
	/* Contre-QA : --brand-tint-2 était quasi invisible sur fond blanc (ex. #F9E9A8 en Aéré).
	   Bordure extraite des exports HTML des maquettes → token --brand-border dédié (valeur
	   maquette confirmée #E6BE3A en Aéré, alias --brand pour Éducation/Sport/Dog Wash). */
	border: 1px solid var(--brand-border);
	border-radius: var(--r-pill);
	padding: 7px 16px;
	text-decoration: none;
	background: var(--surface);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Contre-QA v0.3.2, point 2 : --brand (2,1-2,8:1 avec --brand-on) n'est excusé que pour les
   boutons (texte ≥14px/500, cf. commentaire .cnd-btn--primary) — ce texte de pilule fait 12px/500,
   hors exception. --brand-strong + blanc (--on-strong, pas --brand-on : en Aéré #353535 sur
   --brand-strong ne tient que 2,5:1) tient ≥4,5:1 dans tous les univers. */
.cnd.cnd-anchors .cnd-anchor-pill:hover,
.cnd.cnd-anchors .cnd-anchor-pill:focus,
.cnd.cnd-anchors .cnd-anchor-pill.is-active {
	background: var(--brand-strong);
	border-color: var(--brand-strong);
	color: var(--on-strong);
}

/* Débordement (v0.5.0) : avec justify-content:center, une barre plus large que l'écran rognait ses
   premières pilules, hors d'atteinte du défilement. Centrage par marges automatiques à la place :
   centré quand tout tient, défilable depuis la première pilule sinon. */
.cnd.cnd-anchors {
	justify-content: flex-start;
}
.cnd.cnd-anchors > :first-child { margin-left: auto; }
.cnd.cnd-anchors > :last-child { margin-right: auto; }
/* Pilule d'action (v0.5.0, « S'inscrire ») : c'est un bouton principal, il en suit donc la règle
   (décision Emmanuel, contre-QA v0.3.4) — 14 px minimum, graisse 500, fond --brand / texte
   --brand-on, survol --brand-hover, comme .cnd-btn--primary. */
.cnd.cnd-anchors .cnd-anchor-pill.cnd-anchor-pill--cta,
.cnd.cnd-anchors .cnd-anchor-pill.cnd-anchor-pill--cta:focus {
	background: var(--brand-btn);
	border-color: var(--brand-btn-border);
	color: var(--brand-on);
	font-size: var(--t-small);
	font-weight: 500;
}
.cnd.cnd-anchors .cnd-anchor-pill.cnd-anchor-pill--cta:hover {
	background: var(--brand-hover);
	border-color: var(--brand-btn-border);
	color: var(--brand-on);
}
/* Débordement (contre-QA v0.5.0) : pas d'ascenseur visible, défilement tactile / molette conservé ;
   un fondu sur le bord qui cache des pilules (classes posées par view.js selon la position). Le
   masque est un canal alpha (noir = visible), pas une couleur du design system. */
.cnd.cnd-anchors {
	scrollbar-width: none;
}
.cnd.cnd-anchors::-webkit-scrollbar {
	display: none;
}
.cnd.cnd-anchors.has-more-end {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - var(--s-7)), transparent);
}
.cnd.cnd-anchors.has-more-start {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--s-7));
	mask-image: linear-gradient(to right, transparent, #000 var(--s-7));
}
.cnd.cnd-anchors.has-more-start.has-more-end {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--s-7), #000 calc(100% - var(--s-7)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--s-7), #000 calc(100% - var(--s-7)), transparent);
}

/* Contre-recette du 06/11/2026 (v0.34.10), dans le gabarit maison seulement (barre enfant direct de
   .cnd-site-main) :
   1. bordure inférieure et fond sur toute la largeur de l'écran, pas seulement celle du conteneur : la barre
      déborde du conteneur de chaque côté, et ses pilules restent au même endroit grâce au padding. Le débord de
      la barre de défilement (100vw) est coupé par l'overflow-x: clip du body du gabarit ;
   2. en mobile, fond plein et aucun fondu : le masque des bords rendait transparents la barre et ses pilules,
      et le texte qui défilait dessous se voyait à travers. Le défilement horizontal des pilules reste.
   Bureau : position et apparence des pilules inchangées, seul le filet et le fond gagnent la largeur. */
.cnd-site-main > .cnd.cnd-anchors {
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--s-4), calc(50vw - 50% + var(--s-4)));
}
@media (max-width: 899px) {
	.cnd-site-main > .cnd.cnd-anchors {
		background: var(--ground);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.cnd-site-main > .cnd.cnd-anchors.has-more-start,
	.cnd-site-main > .cnd.cnd-anchors.has-more-end {
		-webkit-mask-image: none;
		mask-image: none;
	}
}