/* Styles du header (parts/header.html) associés aux animations de assets/js/header.js */

/* Libellé "Je suis" (paragraphe qui précède le menu) : toujours sur une
   ligne, c'est le menu qui rétrécit (slider en mobile) */
.header-je-suis-bar p:has(+ .menu-je-suis) {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Groupe "Je suis" masqué dans l'éditeur de site (fonction « Masquer » de
   WP : le groupe n'est pas rendu) : les liens secondaires, seuls dans la
   barre, restent calés à droite au lieu de passer à gauche. */
.header-je-suis-bar > .header-secondary-links:only-child {
	margin-left: auto;
}

/* Rectangle bleu qui suit l'item survolé du menu "Je suis" */
.menu-je-suis {
	position: relative;
}


.menu-je-suis__indicator {
	position: absolute;
	left: 0;
	bottom: -7px;
	height: 41px;
	width: 0;
	border-radius: 10px 10px 0 0;
	background-color: var(--wp--preset--color--primary);
	opacity: 0;
	pointer-events: none;
	transform: translateX(0);
	transition: transform 0.25s ease, width 0.25s ease, opacity 0.2s ease;
}

.menu-je-suis__indicator.is-visible {
	opacity: 1;
}

.je-suis-item {
	position: relative;
	z-index: 1;
	transition: color 0.25s ease;
}

.je-suis-item.is-current {
	color: var(--wp--preset--color--white);
}

/* Liens ajoutés dans les paragraphes de la barre "Je suis" : sans couleur de
   lien globale, le navigateur appliquerait son bleu/violet par défaut — ils
   héritent donc du <p> (noir au repos, blanc via .is-current au survol). */
.header-je-suis-bar a,
.tt-overlay-extra a {
	color: inherit;
}

/* Desktop : image de fond du bloc cover (à droite de la barre, derrière
   "Candidater") décalée de 2px vers la droite. translateX plutôt que
   object-position : l'image remplit déjà la largeur du cover, un
   pourcentage n'aurait aucun effet. Le débord est rogné par le cover. */
@media (width > 1200px) {
	.header-main-bar .wp-block-cover__image-background {
		transform: translateX(2px);
	}
}

/* Menu principal sur une ligne de 1201 à 1365px : avec les écarts réglés
   dans l'éditeur, "Entreprises" passait à la ligne (530px requis, 482px
   disponibles à 1201px). Les deux écarts deviennent fluides sur cette
   plage, inchangés au-delà de 1366px, avec de la marge pour la barre de
   défilement (Windows) :
   - entre les items (porté par le <nav>, hérité par sa liste) :
     spacing-50 (50px) → 20px à 1201px (30px de moins sur 165px) ;
   - entre le logo et le menu : spacing-60 (62px) → spacing-30 (30px)
     à 1201px (32px de moins sur 165px). */
@media (1200px < width < 1366px) {
	.header-main-bar .wp-block-navigation {
		gap: clamp(
			var(--wp--custom--spacing--20),
			calc(var(--wp--custom--spacing--20) + (100vw - 1201px) * 30 / 165),
			var(--wp--preset--spacing--50)
		);
	}

	.header-main-bar .header-logo-nav {
		gap: clamp(
			var(--wp--preset--spacing--30),
			calc(var(--wp--preset--spacing--30) + (100vw - 1201px) * 32 / 165),
			var(--wp--preset--spacing--60)
		);
	}
}

/* Responsive header : en dessous de 1200px, les 3 liens secondaires
   disparaissent (seul "Je suis" reste) et le menu principal passe en burger.
   Le breakpoint natif du bloc core/navigation est 600px et n'est pas
   configurable via ses attributs : on le force à 1200px ici. */
@media (width <= 1200px) {
	.has-gutter-left-on-mobile {
		padding-left: 1rem;
	}

	.header-secondary-links,
	.header-candidater-cta {
		display: none !important;
	}

	/* Sans groupe "Je suis" (masqué dans l'éditeur), la barre n'a plus rien
	   à afficher ici (liens secondaires repris dans le panneau du burger) :
	   elle disparaît, et la barre principale ne remonte plus sur elle
	   (margin-top négatif du CSS personnalisé du bloc). */
	.header-je-suis-bar:not(:has(.menu-je-suis)) {
		display: none;
	}

	.header-je-suis-bar:not(:has(.menu-je-suis)) + .header-main-bar {
		margin-top: 0;
	}

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	/* Le fond illustré disparaît : fond blanc uni, sans image. */
	.header-main-bar {
		background-image: none !important;
	}

	/* Le bloc logo + nav prend toute la largeur restante : logo à gauche,
	   burger (généré par le bloc core/navigation, flex-grow:1 hérité) à droite. */
	.header-logo-nav {
		width: 100%;
	}

	.header-logo-nav .wp-block-navigation {
		justify-content: flex-end;
	}

	/* .wp-container-5 : classe auto-générée par WP (has-global-padding) sur le
	   wrapper racine du header — instable si des blocs sont ajoutés/retirés
	   ailleurs sur la page, mais ciblée telle quelle à la demande.
	   .is-header-static : wrapper racine de parts/header-static.html (fiches
	   formation), dont la classe auto-générée diffère. */
	.wp-container-5,
	.is-header-static {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@media (width <= 640px) {
	.wp-block-site-logo img {
		max-width: 150px;
		height: auto;
	}

	/* padding-bottom : surcharge les 20px du CSS personnalisé du bloc */
	.header-je-suis-bar {
		font-size: 13px;
		padding-top: 0 !important;
		padding-bottom: 8px !important;
	}

	/* Menu "je suis" en slider (Swiper, cf. assets/js/header.js) : le DOM
	   est restructuré en swiper-wrapper/swiper-slide uniquement ici, les
	   slides gardent leur taille naturelle (slidesPerView:"auto"). */
	.menu-je-suis {
		min-width: 0;
	}

	/* Le groupe "Je suis" + menu doit pouvoir rétrécir à la largeur de la
	   barre : sinon il garde la largeur de son contenu, déborde (masqué par
	   la barre) et Swiper, voyant tout tenir, ne défile pas. */
	.header-je-suis-bar > .wp-block-group {
		min-width: 0;
	}

	/* 20px de part et d'autre (= INDICATOR_PADDING de header.js) dans la zone
	   visible du slider : le rectangle bleu n'est pas rogné sur le premier ou
	   le dernier item. Les marges négatives gardent les items à leur place. */
	.menu-je-suis.swiper {
		width: 100%;
		padding-inline: 20px;
		margin-inline: -20px;
	}

	.menu-je-suis .swiper-slide {
		width: auto;
	}

	/* Le slider masque ce qui dépasse : l'indicateur reste dans sa hauteur */
	.menu-je-suis__indicator {
		bottom: 0;
	}
}

.wp-block-navigation__responsive-container-open {
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border-radius: 9999px;
}

.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M3.25 13H22.75' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.25 6.5H22.75' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.25 19.5H22.75' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ─── Panneau menu mobile déployé (overlay du bloc core/navigation) ──────
   "Je suis" + liens secondaires : cf. initOverlayExtras() dans header.js —
   clonés depuis le DOM existant (aucune source de vérité dupliquée).

   IMPORTANT : .wp-block-navigation__responsive-container-content n'est PAS
   propre au panneau mobile — c'est le MÊME <ul> que WP affiche inline sur
   desktop (au-delà de 1200px, la règle core par défaut @media(min-width:600px)
   reprend la main puisque notre override <=1200px ne s'applique plus). Tout
   ce qui suit doit donc rester sous <=1200px, sans quoi ça restylise aussi
   la nav desktop. Le logo/je-suis/liens cloné restent display:none par
   défaut, réaffichés uniquement dans le media query. */
.tt-overlay-logo,
.tt-overlay-extra {
	display: none;
}

@media (width <= 1200px) {
	/* Logo du panneau et croix de fermeture alignés sur une même ligne : le
	   logo est calé en hauteur fixe, la croix (absolue, top:0 dans le dialog
	   côté core) est centrée verticalement dessus. Le padding-top core du
	   contenu (2rem + 24px, réservé à la croix) est retiré : le logo remonte
	   au niveau de la croix au lieu de passer en dessous.
	   L'espace au-dessus est porté par le parent du dialog (la croix est
	   positionnée dans le dialog : les deux descendent ensemble) et vaut la
	   gouttière latérale. Le padding-top core du conteneur ne marche pas ici :
	   --wp--style--root--padding-top vaut "0" sans unité, ce qui invalide son
	   clamp(1rem, 0, 20rem) → 0 (idem en bas, d'où le padding-bottom ici :
	   sans lui, le dernier lien du panneau touche le bas de l'écran). */
	.wp-block-navigation__responsive-container {
		--tt-overlay-top: var(--wp--style--root--padding-left, 1rem);
		--tt-overlay-logo-height: 50px;
		--tt-overlay-close-size: 40px;
		--tt-overlay-admin-bar: 0px;
	}

	/* Connecté : le core décale le dialog (logo + croix) de la hauteur de la
	   barre admin, mais pas les panneaux drill-down (enfants directs du
	   conteneur, inset:0) — décalage reporté sur eux via cette variable. */
	.admin-bar .wp-block-navigation__responsive-container {
		--tt-overlay-admin-bar: 46px;
	}

	@media (min-width: 782px) {
		.admin-bar .wp-block-navigation__responsive-container {
			--tt-overlay-admin-bar: 32px;
		}
	}

	.wp-block-navigation__responsive-close {
		padding-top: var(--tt-overlay-top);
		padding-bottom: 1.5rem;
	}

	/* L'écart entre items réglé dans l'éditeur pour la barre desktop (50px)
	   est hérité ici par le contenu du panneau et sa liste, empilés en
	   colonne : 50px entre chaque rubrique et autour du logo, le menu ne
	   tenait plus sur un écran de mobile. Les filets entre rubriques et les
	   marges ci-dessous suffisent. */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		gap: 0;
	}

	/* Panneaux drill-down (plugin teamtreize-hooks) : le logo reste affiché
	   par-dessus (z-index), leur contenu démarre donc sous le logo, à 2.5rem.
	   Remplace le couple padding 2rem du panneau + 80px du bouton retour. */
	.wp-block-navigation__responsive-container .tt-mobile-pane {
		padding-top: calc(var(--tt-overlay-admin-bar) + var(--tt-overlay-top) + var(--tt-overlay-logo-height) + 2.5rem);
	}

	.wp-block-navigation__responsive-container .tt-mobile-pane__back {
		padding-top: 0;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		padding-top: 0;
	}

	.wp-block-navigation__responsive-dialog .wp-block-navigation__responsive-container-close {
		top: calc((var(--tt-overlay-logo-height) - var(--tt-overlay-close-size)) / 2);
	}

	.wp-block-navigation__responsive-container-close {
		display: flex;
		width: var(--tt-overlay-close-size, 40px);
		height: var(--tt-overlay-close-size, 40px);
		align-items: center;
		justify-content: center;
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
		border-radius: 9999px;
	}

	.wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	.wp-block-navigation__responsive-container-close::before {
		content: "";
		display: block;
		width: 17px;
		height: 17px;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M1.5 1.50098L15.2886 15.2896' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.50049 15.2891L15.2891 1.50048' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	.tt-overlay-logo {
		display: block;
		align-self: flex-start;
		position: relative;
		z-index: 100001;
		margin-bottom: 1.5rem;
	}

	/* Calé en hauteur (et non en largeur) : la position de la croix en dépend.
	   50px de haut ≈ 150px de large pour ce logo (ratio 3:1). */
	.tt-overlay-logo img {
		display: block;
		width: auto;
		height: var(--tt-overlay-logo-height, 50px);
	}

	/* Items de premier niveau (Nos formations / L'École pratique / Carrière / Entreprises)
	   align-self:stretch : le bloc nav a justifyContent:"center" pour le desktop
	   (items centrés dans la barre), mais WP réutilise ce même réglage comme
	   align-items:center sur le <ul> une fois en colonne (overlay mobile) — les
	   items courts (Carrière, Entreprises) se retrouvaient alors réduits à leur
	   contenu et centrés au lieu de prendre toute la largeur. */
	.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
		align-self: stretch;
		border-bottom: 1px solid var(--wp--preset--color--grey-dark);
	}

	.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.875rem 0;
		background: transparent;
		border: 0;
		font-family: inherit;
		font-size: var(--wp--preset--font-size--l);
		font-weight: 600;
		line-height: var(--wp--custom--line-height--l);
		text-align: left;
		color: var(--wp--preset--color--black);
		cursor: pointer;
	}

	.wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		width: 15px;
		height: 15px;
		flex-shrink: 0;
		margin-left: 1rem;
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M1.5 7.5H13.5' stroke='%23192548' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.5 1.5L13.5 7.50002L7.5 13.5' stroke='%23192548' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}

	.tt-overlay-extra {
		display: block;
		margin-top: 1.5rem;
		width : 100%;
	}

	.tt-overlay-je-suis{
		padding-bottom: 1.25rem;
	}

	.tt-overlay-je-suis__label {
		margin: 0 0 1rem;
		font-size: 14px;
		font-weight: 500;
		color: var(--wp--preset--color--black);
	}

	.tt-overlay-je-suis__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 1.25rem;
	}

	.tt-overlay-je-suis__list li {
		font-size: 14px;
		font-weight: 600;
		color: var(--wp--preset--color--black);
	}

	.tt-overlay-secondary-links {
		list-style: none;
		margin: 1.25rem 0 0;
		padding: 1.25rem 0 0;
		border-top: 1px solid var(--wp--preset--color--grey-dark);
		display: grid;
		gap: 1.25rem;
	}

	/* Sans bloc "Je suis" (masqué dans l'éditeur), les liens suivent
	   directement les rubriques, dont le filet bas sert déjà de séparateur. */
	.tt-overlay-extra > .tt-overlay-secondary-links:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.tt-overlay-secondary-links li {
		font-size: 14px;
		font-weight: 600;
		color: var(--wp--preset--color--black);
	}
}