/* ── Barre de filtrage sticky (page /projet/) ─────────────────────────────── */

#ag-sticky-filters {
	position: fixed;
	left: 0;
	right: 0;
	/* Marges internes = alignement sur la colonne de contenu du thème
	   (même formule que les flèches de la bannière et le breadcrumb). */
	--ag-sf-pad-left: max( var( --wp--style--root--padding-left, 16px ), calc( ( 100% - var( --wp--style--global--content-size, 1200px ) ) / 2 ) );
	--ag-sf-pad-right: max( var( --wp--style--root--padding-right, 16px ), calc( ( 100% - var( --wp--style--global--content-size, 1200px ) ) / 2 ) );
	/* top est injecté dynamiquement par JS */
	z-index: 998;
	opacity: 0;
	transition: top 0.4s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
	            opacity 0.25s ease;
	pointer-events: none;
}

#ag-sticky-filters.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* ── Barre principale ─────────────────────────────────────────────────────── */

.ag-sf__bar {
	background: #1a476b;
	display: flex;
	align-items: center;
	padding: 0 var( --ag-sf-pad-right ) 0 var( --ag-sf-pad-left );
	height: 72px;
}

.ag-sf__tabs {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
}

/* Libellé de l'état courant : mobile uniquement (cf. @media en fin de fichier). */
.ag-sf__current {
	display: none;
}

.ag-sf__sep {
	font-family: var( --wp--preset--font-family--capitana, 'capitana', sans-serif );
	font-weight: 900;
	font-size: clamp( 1.5rem, 3vw, 3rem );
	color: rgba( 255, 255, 255, 0.2 );
	line-height: 1;
	user-select: none;
}

/* Texte en stroke (outline) — opacité réduite quand inactif */
.ag-sf__tab {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var( --wp--preset--font-family--capitana, 'capitana', sans-serif );
	font-weight: 900;
	font-size: clamp( 1.5rem, 3vw, 3rem );
	line-height: 1;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba( 255, 255, 255, 0.3 );
	transition: -webkit-text-stroke-color 0.25s;
}

/* Aucun onglet actif → tout à pleine visibilité */
#ag-sticky-filters:not( .has-active-tab ) .ag-sf__tab,
.ag-sf__tab.is-active {
	-webkit-text-stroke-color: rgba( 255, 255, 255, 0.92 );
}

/* ── Bouton flèche orange ─────────────────────────────────────────────────── */

.ag-sf__toggle {
	width: 44px;
	height: 44px;
	border: 1.5px solid #e06b1a;
	background: none;
	color: #e06b1a;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
}

.ag-sf__toggle:hover {
	background: rgba( 224, 107, 26, 0.12 );
}

.ag-sf__arrow {
	display: block;
	transition: transform 0.35s ease;
}

#ag-sticky-filters.is-open .ag-sf__arrow {
	transform: rotate( 180deg );
}

/* ── Panel secteurs ───────────────────────────────────────────────────────── */

.ag-sf__panel {
	background: #dce1e9;
	padding: 1.25rem var( --ag-sf-pad-right ) 1.25rem var( --ag-sf-pad-left );
}

.ag-sf__sectors {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ag-sf__sector {
	border: 1px solid #1a476b;
	background: none;
	color: #1a476b;
	font-family: var( --wp--preset--font-family--capitana, 'capitana', sans-serif );
	font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.ag-sf__sector:hover,
.ag-sf__sector.is-active {
	background: #1a476b;
	color: #fff;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {
	/* Les 3 onglets ne peuvent PAS tenir sur une ligne : ~286px disponibles
	   (390 − 60 de padding racine − 44 du toggle) pour ~516px nécessaires. Il
	   faudrait descendre à ~11px de police sous un contour de 1,5px = glyphes
	   bouchés. On les replie donc dans un tiroir : la barre montre l'état
	   courant + la flèche ; le tiroir ouvre les onglets PUIS les secteurs.

	   Fait 100% en CSS : `flex-wrap` + `order` réorganisent la barre sans
	   déplacer un seul nœud en JS (pas de matchMedia listener -> rien à fuiter
	   à la ré-init AJAX). Les onglets restent DANS le bandeau navy .ag-sf__bar
	   -> le contour blanc (traitement signature) est conservé tel quel ; les
	   pastilles secteurs gardent leur fond clair, en dessous. */
	.ag-sf__bar {
		position: relative;   /* repere de la fleche en absolute, tiroir ouvert */
		flex-wrap: wrap;
		height: auto;
		min-height: 58px;
		align-items: center;
		/* Les lignes se posent en haut, sans redistribution : sinon, replie,
		   l'unique ligne est etiree a 58px (min-height) et centree, alors qu'ouverte
		   elle retombe a sa hauteur naturelle => tout remontait de 7px a l'ouverture. */
		align-content: flex-start;
	}

	/* Ligne 1, à gauche : le filtre actif, même traitement que les onglets. */
	.ag-sf__current {
		/* Porte la hauteur de la ligne 1 : 58px FIXES, replie comme ouvert, pour que
		   ni le libelle ni la fleche ne bougent d'un pixel a l'ouverture. flex pour
		   garder le texte centre verticalement dedans. */
		display: flex;
		align-items: center;
		height: 58px;
		order: 1;
		flex: 1 1 auto;
		min-width: 0;              /* sinon le libellé pousse le toggle hors écran */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: var( --wp--preset--font-family--capitana, 'capitana', sans-serif );
		font-weight: 900;
		font-size: clamp( 1.25rem, 5vw, 2rem );
		line-height: 1.25;         /* PAS 1 : overflow:hidden rognerait le « j » de « projets » */
		color: transparent;
		-webkit-text-stroke: 1.5px rgba( 255, 255, 255, 0.92 );
	}

	/* Ligne 1, à droite */
	.ag-sf__toggle {
		order: 2;
		margin-left: 12px;
		align-self: center;   /* centree dans les 58px de la ligne 1, quel que soit l'etat */
	}

	/* Ligne 2 : les onglets, révélés avec le tiroir. flex-basis 100% => saut de
	   ligne garanti quel que soit le libellé saisi par le client. */
	.ag-sf__tabs {
		order: 3;
		flex: 0 0 100%;
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 6px 0 18px;
	}

	#ag-sticky-filters.is-open .ag-sf__tabs {
		display: flex;
	}

	/* Tiroir ouvert : la liste porte DÉJÀ l'état (l'onglet actif est en contour
	   plein, les autres à 0.3). Garder le libellé au-dessus afficherait donc
	   « Tous les projets » DEUX FOIS de suite — lu comme un bug. On le masque en
	   `visibility` et non `display` : la boîte reste, donc la flèche ne saute pas
	   sous le pouce au moment même où l'on vient de la toucher. */
	/* Tiroir ouvert : le libelle sort du FLUX et la liste prend exactement sa
	   place. Le masquer en `visibility` ne suffisait pas : il gardait ses 58px,
	   donc « Tous les projets » (libelle, y=112) etait remplace par « Tous les
	   projets » (1er onglet, y=176) -> le MEME mot descendait de 64px sous l'oeil. */
	#ag-sticky-filters.is-open .ag-sf__current {
		display: none;
	}

	/* La fleche sort du flux pour rester au MEME pixel qu'en replie (7px = (58-44)/2)
	   au lieu de suivre la liste. Pas de recouvrement : elle est a x~316 et l'onglet
	   le plus large fait 158px. */
	#ag-sticky-filters.is-open .ag-sf__toggle {
		position: absolute;
		top: 7px;
		right: var( --ag-sf-pad-right );
		margin-left: 0;
	}

	/* Aligne le 1er onglet sur la position qu'occupait le texte du libelle. */
	#ag-sticky-filters.is-open .ag-sf__tabs {
		padding-top: 16px;
	}

	/* Les « | » séparaient une ligne horizontale : sans objet en colonne. */
	.ag-sf__sep {
		display: none;
	}

	.ag-sf__tab {
		font-size: clamp( 1.25rem, 5vw, 2rem );
		line-height: 1.25;         /* idem : descendantes non rognées */
		text-align: left;          /* <button> est centré par la feuille UA */
	}

	.ag-sf__panel {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	/* Le texte en CONTOUR est peu lisible a cette taille : l'element SELECTIONNE
	   passe en blanc PLEIN. C'est d'ailleurs le traitement du bloc .archi-rearchi
	   de la page (color:#fff + stroke transparent pour l'actif) -> on s'aligne
	   dessus au lieu d'inventer une variante. Les onglets NON selectionnes gardent
	   le contour attenue, ce qui rend la selection enfin lisible d'un coup d'oeil.
	   Specificite : la regle de base #ag-sticky-filters:not(.has-active-tab)
	   .ag-sf__tab pese (1,2,0) -> on repasse par l'ID pour la battre. */
	#ag-sticky-filters .ag-sf__tab.is-active,
	.ag-sf__current {
		color: #fff;
		-webkit-text-stroke-color: transparent;
	}

	/* Sans filtre actif, la regle de base allume TOUS les onglets a 0.92 : sur
	   mobile ca ferait 3 onglets « selectionnes » a cote d'un « Tous les projets »
	   plein. .tous porte deja .is-active dans cet etat -> on attenue les autres. */
	#ag-sticky-filters:not( .has-active-tab ) .ag-sf__tab:not( .is-active ) {
		-webkit-text-stroke-color: rgba( 255, 255, 255, 0.3 );
	}
}