/* Sous-navigation des fiches formation (templates/single-formations.html)
   en responsive (classes/class-formation-subnav.php), sous 1200px : même
   palier que le burger du header et le CTA "Candidater" mobile
   (cta-candidater-mobile.css), absent de ces pages — les boutons de la
   sous-navigation en tiennent lieu.

   Avec assets/js/formation-subnav.js :
   - hero à la hauteur de son contenu (style.css, commun aux heros avec fil
     d'Ariane), sous-navigation pleine largeur juste dessous ;
   - boutons Brochure / Candidater fixés en bas d'écran, jusqu'en bas de
     page ;
   - ancres en slider (Swiper), collées en haut d'écran au scroll ;
   - sections du contenu en accordéon, ouvertes par les ancres. */

@media (width <= 1200px) {
	:root {
		--formation-subnav-button-height: 3.25rem;
		--formation-subnav-links-height: 3.5rem;
		--formation-subnav-buttons-bottom: 30px;
	}

	/* Ancres : arrêt sous la barre d'ancres collée en haut d'écran (desktop :
	   style.css) */
	html:has(> body.single-formations) {
		scroll-padding-top: calc(var(--formation-subnav-links-height) + var(--wp--preset--spacing--30));
	}

	/* Wrapper sticky : pleine largeur (annule le padding global de <main>),
	   sans le chevauchement desktop sur le hero (translateY du CSS
	   personnalisé du bloc). */
	.formation-subnav-wrapper.is-position-sticky {
		top: var(--wp-admin--admin-bar--position-offset, 0px);
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
		padding-right: 0;
		padding-left: 0;
		transform: none;
	}

	/* Padding et radius inline du bloc : seul le bas reste arrondi */
	.formation-subnav.formation-subnav {
		display: block;
		position: relative;
		max-width: none;
		padding: 0 !important;
		border-radius: 0 0 var(--wp--custom--radius--m) var(--wp--custom--radius--m) !important;
	}

	/* Boutons : sortis du flux, fixés en bas d'écran dès le chargement, à la
	   même distance du bas que le CTA "Candidater" mobile des autres pages
	   (cta-candidater-mobile.css). Avant le raccourcissement du hero (ticket
	   « Mobile / visuels haut de page »), ils étaient d'abord posés en haut
	   de la sous-navigation, en bas du premier écran, et ne se fixaient
	   qu'au scroll. */
	.formation-subnav .formation-subnav__buttons {
		position: fixed;
		right: 0;
		bottom: var(--formation-subnav-buttons-bottom);
		left: 0;
		z-index: 1;
		gap: var(--wp--preset--spacing--10);
		padding-right: var(--wp--custom--spacing--gutter);
		padding-left: var(--wp--custom--spacing--gutter);
	}

	/* Fond blanc sous le bouton à contour (Brochure, transparent par défaut) :
	   lisible une fois fixé au-dessus du contenu. Posé sur le conteneur pour
	   laisser le survol du lien recouvrir ce fond. */
	.formation-subnav__buttons .wp-block-button {
		flex: 1 1 0;
		min-width: 0;
		border-radius: var(--wp--custom--radius--m);
		background-color: var(--wp--preset--color--white);
		box-shadow: var(--wp--preset--shadow--soft);
	}

	.formation-subnav__buttons .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: var(--formation-subnav-button-height);
		padding-right: var(--wp--preset--spacing--10);
		padding-left: var(--wp--preset--spacing--10);
		white-space: nowrap;
	}

	/* Ancres : une seule ligne, padding horizontal par défaut à gauche, rien à
	   droite (le slider file jusqu'au bord de l'écran) */
	.formation-subnav .formation-subnav__links {
		flex-wrap: nowrap;
		height: var(--formation-subnav-links-height);
		padding-right: 0;
		padding-left: var(--wp--custom--spacing--gutter);
	}

	/* Slider (Swiper, cf. assets/js/formation-subnav.js) : le DOM est
	   restructuré en swiper-wrapper/swiper-slide uniquement ici, les slides
	   gardent leur taille naturelle (slidesPerView:"auto") */
	.formation-subnav .formation-subnav__links.swiper {
		display: block;
		margin: 0;
	}

	.formation-subnav__links .swiper-slide {
		width: auto;
	}

	/* Zone cliquable sur toute la hauteur de la barre */
	.formation-subnav__links p,
	.formation-subnav__links a {
		display: flex;
		align-items: center;
		height: 100%;
		margin: 0;
		white-space: nowrap;
	}

	/* Sections du contenu en accordéon (cf. initAccordions dans
	   assets/js/formation-subnav.js) : fermées, seul le titre (bouton) reste
	   affiché dans la carte. Couleur de la filière (--filiere-color, posée
	   par classes/class-filiere-color.php), à défaut celle du texte. */
	.formation-accordion:not(.is-open) .formation-accordion__panel {
		display: none !important;
	}

	/* Items accolés en un seul bloc (marge de la mise en page retirée),
	   séparés par une barre */
	.formation-accordion + .formation-accordion {
		margin-block-start: 0;
		border-top: 2px solid var(--filiere-color, currentColor);
	}

	.formation-accordion__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--10);
		width: 100%;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-transform: inherit;
		cursor: pointer;
	}

	.formation-accordion__toggle:not(:focus-visible) {
		outline: none;
	}

	/* Icône + (fermé) / − (ouvert), en masque pour prendre la couleur de la
	   filière (maquette Figma : icône 20px, trait 2px) */
	.formation-accordion__toggle::after {
		content: "";
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		background-color: var(--filiere-color, currentColor);
		-webkit-mask: url("../img/accordeon-plus.svg") no-repeat center / contain;
		mask: url("../img/accordeon-plus.svg") no-repeat center / contain;
	}

	.formation-accordion.is-open .formation-accordion__toggle::after {
		-webkit-mask-image: url("../img/accordeon-moins.svg");
		mask-image: url("../img/accordeon-moins.svg");
	}

	/* Fin de page : le footer se prolonge (même fond) sous les boutons fixés,
	   comme pour le CTA "Candidater" mobile */
	body.single-formations footer.wp-block-template-part {
		padding-bottom: calc(var(--formation-subnav-buttons-bottom) + var(--formation-subnav-button-height));
		background-color: var(--wp--custom--color--primary-hover);
	}

	/* Bouton "Retour en haut" remonté au-dessus des boutons fixés */
	body.single-formations .back-to-top {
		bottom: calc(var(--formation-subnav-buttons-bottom) + var(--formation-subnav-button-height) + 1rem);
	}
}

/* Mobile : hero resserré sous le titre (paddings inline du bloc cover et
   du titre) et titre agrandi — la taille fluide xl descend sous 30px ici */
@media (width <= 768px) {
	.formation-hero {
		padding-bottom: 50px !important;
	}

	.formation-hero .wp-block-post-title {
		padding-bottom: 0 !important;
		font-size: 30px !important;
	}
}