/**
 * Advanced Photo Suite — l'entête du site, la même partout.
 *
 * Une seule entête, celle du thème, sur toutes les pages : même hauteur, même
 * logo blanc ombré, même menu sur plaque de verre fumé. Le diaporama d'accueil
 * en rendait naguère une seconde, au centre de l'écran ; elle a disparu.
 *
 * Ce qui change d'une page à l'autre, c'est seulement ce qu'il y a DERRIÈRE :
 * un bandeau sombre sur les pages ordinaires, la photographie du diaporama sur
 * l'accueil. Le logo et le menu, eux, ne bougent pas d'un pixel.
 *
 * Le thème pose plusieurs de ses valeurs en attribut `style` ou par des classes
 * de préréglage plus spécifiques que les nôtres — d'où les `!important` de ce
 * fichier. Ils sont cantonnés aux propriétés que le thème impose vraiment, et
 * chacun est commenté.
 */

/* ------------------------------------------------------------------------- */
/* Le bandeau                                                                 */
/* ------------------------------------------------------------------------- */

.wp-site-blocks > header {
	position: relative;
	z-index: 10;

	/*
	 * Aucun fond propre : l'entête se pose sur ce qu'il y a derrière — le fond
	 * sombre de la page, ou la photographie du diaporama sur l'accueil. Elle
	 * portait un bandeau noir, qui coupait la page d'un trait horizontal net
	 * juste sous le logo ; le fond sombre général rend ce bandeau inutile.
	 */
	background: none;
	padding-block-end: clamp(.9rem, 2vh, 1.6rem);
}

/*
 * Le thème coiffe l'entête d'un espaceur réglé pour du blanc sur crème. Sur un
 * bandeau sombre il creuse un vide de plus de 60 px avant le logo : on le
 * ramène à une respiration.
 */
.wp-site-blocks > header .wp-block-spacer {
	height: clamp(.9rem, 2vh, 1.6rem) !important;
}

/* ------------------------------------------------------------------------- */
/* Le logo                                                                    */
/* ------------------------------------------------------------------------- */

.wp-site-blocks > header .wp-block-site-logo img {
	/*
	 * Le fichier est noir sur fond transparent : sur un fond sombre il faut
	 * l'inverser. Plus simple et plus sûr que d'exiger un second fichier.
	 *
	 * Deux ombres, et c'est leur écart qui fait le relief : un contact serré
	 * qui détache le tracé du fond, une diffusion large et basse qui le pose.
	 * Une ombre unique, à ce rayon, cerne le logo d'un halo gris.
	 */
	filter:
		invert(1)
		drop-shadow(0 1px 2px rgba(0, 0, 0, .5))
		drop-shadow(0 6px 20px rgba(0, 0, 0, .45));
}

/* ------------------------------------------------------------------------- */
/* Le menu                                                                    */
/* ------------------------------------------------------------------------- */

/*
 * La plaque de verre fumé. Sur l'accueil, c'est le FLOU — et non l'opacité —
 * qui rend le menu lisible : il efface le détail de la photographie sous les
 * mots, ce qui permet de rester très transparent. Sur un bandeau uni il ne
 * reste qu'un léger creux, et c'est très bien : la plaque est la même, c'est
 * le fond qui diffère.
 *
 * PIÈGE, et il coûte cher : `backdrop-filter` fait de l'élément qui le porte
 * le BLOC CONTENEUR de ses descendants en `position: fixed` — au même titre
 * que `transform` ou `filter`. Posée sur le <nav>, la plaque emprisonnait donc
 * le panneau plein écran du menu mobile, qui s'ouvrait aux 24 px du bouton
 * hamburger au lieu de l'écran entier. D'où le partage ci-dessous : au-dessus
 * du seuil, la plaque coiffe le <nav> ; en dessous, où le panneau existe, elle
 * se replie sur le seul bouton.
 *
 * Le seuil est celui du cœur de WordPress (600 px), pas une valeur à nous :
 * c'est lui qui décide quand le menu se replie en bouton.
 */
@media (min-width: 600px) {
	.wp-site-blocks > header nav.wp-block-navigation {
		/*
		 * La plaque épouse les liens. Le bloc de navigation s'étire sinon sur
		 * toute la largeur de son groupe, et la plaque devenait une bande
		 * traversant l'écran — plus un objet posé, mais un second bandeau.
		 */
		width: fit-content;
		margin-inline: auto;

		padding: clamp(.5rem, 1.4vh, .8rem) clamp(1.1rem, 3.5vw, 2.1rem);

		background: rgba(14, 12, 10, 0.3);
		-webkit-backdrop-filter: blur(16px) saturate(0.85);
		backdrop-filter: blur(16px) saturate(0.85);
		border-radius: 2px;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.14),
			0 18px 50px -22px rgba(0, 0, 0, 0.55);
	}
}

/* Sous le seuil, la plaque coiffe le bouton — qui en a le plus besoin : une
   icône de trois traits blancs sur une photographie claire disparaît. */
@media (max-width: 599px) {
	.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
		padding: .5rem .6rem;

		background: rgba(14, 12, 10, 0.3);
		-webkit-backdrop-filter: blur(16px) saturate(0.85);
		backdrop-filter: blur(16px) saturate(0.85);
		border-radius: 2px;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.14),
			0 18px 50px -22px rgba(0, 0, 0, 0.55);
	}
}

/* Sans flou d'arrière-plan, la plaque compense en opacité. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.wp-site-blocks > header nav.wp-block-navigation,
	.wp-site-blocks > header .wp-block-navigation__responsive-container-open {
		background: rgba(14, 12, 10, 0.58);
	}
}

/*
 * Le bloc de navigation impose sa couleur — un gris moyen, illisible sur
 * sombre — par une classe de préréglage du thème, plus spécifique que la
 * nôtre. Il faut la reprendre sur les sélecteurs du bloc lui-même.
 */
.wp-site-blocks > header nav.wp-block-navigation,
.wp-site-blocks > header nav.wp-block-navigation a,
.wp-site-blocks > header .wp-block-navigation-item__content {
	color: #fff !important;
	text-decoration: none;
	font-size: clamp(.86rem, 1.1vw, 1rem);
	letter-spacing: .06em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 16px rgba(0, 0, 0, .55);
}

.wp-site-blocks > header .wp-block-navigation-item__content {
	padding-block: .4em;
	border-block-end: 1px solid transparent;
	transition: border-color 200ms ease;
}

.wp-site-blocks > header .wp-block-navigation-item__content:hover,
.wp-site-blocks > header .wp-block-navigation-item__content:focus-visible {
	border-block-end-color: rgba(255, 255, 255, .8);
}

/*
 * Le groupe qui enveloppe le menu porte un fond de préréglage du thème, qui
 * dessinerait une seconde bande d'une autre teinte derrière la plaque.
 */
.wp-site-blocks > header .wp-block-group.has-background {
	background-color: transparent !important;
}

/*
 * DEUX VITRES POUR UNE. Le cœur de WordPress pose sur le conteneur du menu :
 *
 *   .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open)
 *   { background-color: inherit !important; }
 *
 * et `inherit` reprend ici la valeur CALCULÉE du <nav>, c'est-à-dire notre
 * plaque. Elle se repeignait donc sur elle-même : deux couches de 30 % au lieu
 * d'une, soit près de 50 % d'opacité, et le menu s'alourdissait d'un cran.
 *
 * Le `!important` du cœur oblige au nôtre.
 */
.wp-site-blocks > header .wp-block-navigation__responsive-container:not(.is-menu-open) {
	background-color: transparent !important;
}

/* Le bouton du menu déroulant sur petit écran, et le panneau qu'il ouvre. */
.wp-site-blocks > header .wp-block-navigation__responsive-container-open,
.wp-site-blocks > header .wp-block-navigation__responsive-container-close {
	color: #fff !important;
}

/*
 * Le panneau plein écran du menu mobile s'ouvre sur un fond BLANC hérité du
 * thème. Nos liens y arrivaient blancs sur blanc : le menu existait, se
 * parcourait au clavier, et ne se voyait pas. Il prend donc le noir du
 * bandeau — le même fond, le même blanc, la même entête à toutes les tailles.
 *
 * `!important` parce que le thème pose ce fond par une classe de préréglage
 * plus spécifique que la nôtre.
 */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0f0d0b !important;
}

/* ------------------------------------------------------------------------- */
/* Sur l'accueil : la même entête, posée sur la photographie                   */
/* ------------------------------------------------------------------------- */

/*
 * Elle quitte le flux pour flotter au-dessus du diaporama. Sans cela, sa bande
 * repousserait la photographie vers le bas et le plein écran — le sujet même
 * de cette page — n'en serait plus un.
 *
 * Seul le fond disparaît : la photographie le remplace. La position, le logo
 * et le menu restent exactement ceux des autres pages, ce qui est tout l'objet
 * de la manœuvre.
 */
body.aps-accueil-diaporama .wp-site-blocks { position: relative; }

body.aps-accueil-diaporama .wp-site-blocks > header {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
}