/**
 * Menu sticky — images collées les unes aux autres.
 *
 * Items 1–4 (index 0–3 dans `tof_options[sticky_menu_items]`) : affichés en
 * desktop ET en mobile.
 * Logo mobile (index 4) + Menu mobile (index 5) : items « mobile-only »,
 * masqués en desktop via la classe `.tof-sticky-menu__item--mobile-only`.
 *
 * Desktop (≥ 900 px) : collé au bord droit du viewport, centré verticalement,
 *                      images empilées verticalement.
 * Mobile  (< 900 px) : barre horizontale en haut du viewport, pleine largeur
 *                      (en lieu et place du menu principal). Positionnée en
 *                      `position: sticky` (et NON `fixed`) : la barre est
 *                      ainsi rendue dans le flux APRÈS la barre de
 *                      notification (qui est insérée en premier dans le
 *                      <body> via `wp_body_open` priorité 5), de sorte que
 *                      la barre de notification s'affiche au-dessus du menu
 *                      sticky. Au scroll, la barre de notification disparaît
 *                      vers le haut, le menu sticky reste collé au top.
 *                      Ordre DOM : [Logo mobile, Item 1–4, Menu mobile]. Le
 *                      « Menu mobile » est un <button> qui ouvre l'overlay
 *                      natif de `core/navigation` (cf. sticky-menu.js).
 *
 * Aucun fond, aucune bordure, aucun espacement ajouté autour des images :
 * ce qui est rendu à l'écran est strictement l'image choisie dans la médiathèque.
 */

.tof-sticky-menu {
	position: fixed;
	z-index: 1000;
	pointer-events: none; /* activé uniquement sur les liens */
}

.tof-sticky-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	background: transparent;
	border: 0;
}

.tof-sticky-menu__item {
	margin: 0;
	padding: 0;
	display: flex;
}

.tof-sticky-menu__link {
	pointer-events: auto;
	display: block;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	text-decoration: none;
	line-height: 0; /* supprime l'espace résiduel sous l'image inline */
	position: relative;
}

/* Bouton « Menu mobile » : on neutralise tous les styles UA propres à
   <button> (background, border, padding…) pour que le bouton rende
   strictement comme un <a> du menu sticky : juste l'image. */
.tof-sticky-menu__link--menu-trigger {
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.tof-sticky-menu__link:hover,
.tof-sticky-menu__link:focus-visible {
	z-index: 2;
}

.tof-sticky-menu__link:focus-visible {
	outline: 2px solid var( --wp--preset--color--contrast, #111 );
	outline-offset: -2px;
}

/* Périphériques tactiles : Safari iOS déclenche :focus-visible au tap
   sur les <button> (notamment le trigger « Menu mobile »), ce qui
   affichait un cadre noir résiduel après ouverture. On neutralise
   l'outline en mode tactile — cohérent avec la règle globale dans
   site.css (`@media (hover: none) { :focus { outline: none } }`). */
@media ( hover: none ) {
	.tof-sticky-menu__link:focus-visible {
		outline: none;
	}
}

.tof-sticky-menu__img {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	transform-origin: center;
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
	will-change: transform;
}

/* Infobulle : rendue dans le <a>, masquée par défaut. Visible uniquement
   au hover/focus-visible en desktop (cf. media query ≥ 900px ci-dessous). */
.tof-sticky-menu__tooltip {
	display: none;
}

.tof-sticky-menu__link:hover .tof-sticky-menu__img,
.tof-sticky-menu__link:focus-visible .tof-sticky-menu__img {
	transform: scale( 1.12 );
}

@media ( prefers-reduced-motion: reduce ) {
	.tof-sticky-menu__img {
		transition: none;
	}

	.tof-sticky-menu__link:hover .tof-sticky-menu__img,
	.tof-sticky-menu__link:focus-visible .tof-sticky-menu__img {
		transform: none;
	}
}

/* --------- Desktop : bord droit, vertical, centré verticalement --------- */
@media ( min-width: 900px ) {
	.tof-sticky-menu {
		right: 0;
		top: 50%;
		transform: translateY( -50% );
	}

	.tof-sticky-menu__list {
		flex-direction: column;
	}

	.tof-sticky-menu__img {
		width: 67px; /* 84 px × 0.8 — réduction de 20 % */
		height: auto;
	}

	/* Items « Logo mobile » / « Menu mobile » : jamais visibles en desktop. */
	.tof-sticky-menu__item--mobile-only {
		display: none;
	}

	/* Infobulle : positionnée à gauche de l'image (le menu étant collé au bord
	   droit du viewport, le tooltip se déploie vers l'intérieur). Le `<a>` est
	   passé en `position: relative` (déjà le cas) pour ancrer le tooltip. */
	.tof-sticky-menu__tooltip {
		display: block;
		position: absolute;
		top: 50%;
		right: calc( 100% + 8px );
		transform: translate( 8px, -50% );
		background-color: #000;
		color: #fff;
		font-family: inherit;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.2;
		padding: 0.5rem 0.75rem;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		z-index: 3;
	}

	/* Petite pointe orientée vers l'image (à droite du tooltip). */
	.tof-sticky-menu__tooltip::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		transform: translateY( -50% );
		border: 6px solid transparent;
		border-left-color: #000;
	}

	.tof-sticky-menu__link:hover .tof-sticky-menu__tooltip,
	.tof-sticky-menu__link:focus-visible .tof-sticky-menu__tooltip {
		opacity: 1;
		visibility: visible;
		transform: translate( 0, -50% );
	}

	@media ( prefers-reduced-motion: reduce ) {
		.tof-sticky-menu__tooltip {
			transition: none;
			transform: translate( 0, -50% );
		}
	}
}

/* --------- Mobile : barre horizontale en haut --------- */
@media ( max-width: 899px ) {
	/* `position: sticky` (override du `fixed` de la règle de base) : la barre
	   est rendue dans le flux normal du <body>. La barre de notification,
	   insérée en premier (wp_body_open priorité 5), apparaît donc au-dessus.
	   Au scroll, la barre de notification s'efface vers le haut puis le menu
	   sticky se colle à `top: 0` et y reste. Pas besoin de compenser la
	   hauteur via un `padding-top` sur <body> : l'élément occupe
	   naturellement sa place dans le flux. */

	.tof-sticky-menu {
		position: sticky;
		top: 0;
		width: 100%;
		/* Fond noir : sans ce fond, le contenu de la page qui défile sous
		   la barre apparaît dans les zones transparentes des pictogrammes
		   (et visuellement sous l'heure / le niveau de batterie du
		   téléphone quand la barre d'URL Safari/Chrome est rétractée).
		   Le fond noir masque ces fuites tout en restant cohérent avec
		   les pictogrammes blancs du menu. Desktop : la règle reste
		   `background: transparent` (voir règle de base plus haut). */
		background: #000;
	}

	.tof-sticky-menu__list {
		flex-direction: row;
		width: 100%;
	}

	.tof-sticky-menu__item {
		flex: 1 1 0;
	}

	.tof-sticky-menu__link {
		width: 100%;
	}

	.tof-sticky-menu__img {
		width: 100%;
		height: auto;
	}

	/* Masque l'en-tête du site en mobile, MAIS la garde dans le flux DOM et
	   interactive : le menu principal est rendu par `core/navigation` à
	   l'intérieur, et son overlay (`.wp-block-navigation__responsive-container`)
	   doit pouvoir s'ouvrir quand on clique sur « Menu mobile ».

	   On collapse donc le header à 0 px + `overflow:hidden` : le contenu
	   (site-title, bouton burger natif) est invisible et hors-flux, tandis
	   que le modal de la nav (qui passe en `position: fixed; inset: 0`
	   lorsqu'il s'ouvre) s'échappe naturellement de l'overflow et couvre
	   le viewport. Ne pas remettre `display: none` ici : le modal serait
	   alors lui aussi caché et le menu ne pourrait plus s'ouvrir. */
	header.wp-block-template-part {
		height: 0;
		overflow: hidden;
	}
}
