/* ═══════════════════════════════════════════════════════════════════════════
   00 — EN-TÊTE

   L'en-tête de TOUTES les pages : bandeau de mention pétrole, barre de
   navigation collante ivoire — 108 px au bureau, filet fin en bas —, deux
   mégamenus, et menu plein écran sous 1100 px. Composition du kit : logo à
   gauche, navigation au centre, action à droite.

   Les composants partagés (`.fmt-btn`, `.fmt-chip`, `.fmt-rail`, `.fmt-eyebrow`,
   `.fmt-mono`, `.fmt-logo`) viennent de style.css et ne sont pas réécrits ici :
   on ne pose que la mise en page propre à l'en-tête et les bascules d'état.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	/* Voile de protection sous le texte d'une carte photographique : le
	   `--scrim-bottom` du kit, poussé à 88 % en pied de carte. Le libellé y est
	   petit (12 à 18 px) et la photographie peut être claire à cet endroit ;
	   au pire point, l'ivoire y tient encore 7:1. */
	--fmt-entete-voile-carte: linear-gradient(
		to top,
		rgba(20, 60, 64, .88) 0%,
		rgba(20, 60, 64, .5) 42%,
		rgba(20, 60, 64, 0) 72%
	);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENVELOPPES

   `position: sticky` est borné par la boîte du PARENT, pas par la fenêtre. Or
   la composition est rendue dans le `<header>` que pose le `wp:template-part`
   du gabarit, et ce `<header>` ne fait que la hauteur de l'en-tête lui-même :
   la barre y serait enfermée et ne se décollerait jamais du haut de l'en-tête
   — c'est-à-dire qu'elle ne collerait à rien du tout.

   `display: contents` retire la BOÎTE de ces deux enveloppes sans retirer les
   éléments : le `<header>` garde son rôle « banner », la composition garde son
   nom de classe, et la barre prend pour repère le conteneur de page, qui fait
   la hauteur du document.

   Corollaire : la composition doit rester un ENFANT DIRECT de la partie de
   gabarit. Toute enveloppe intermédiaire réintroduirait la boîte qu'on efface
   ici, et la barre cesserait de coller.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-entete,
.wp-block-template-part:has(> .fmt-entete) {
	display: contents;
}

.fmt-entete {
	/* Hauteur de la rangée de navigation. Sert deux fois : à la poser, et à
	   caler le haut du menu plein écran sous elle. Déclarée en CSS et non
	   mesurée en JavaScript : le menu mobile doit s'ouvrir juste, même avant
	   que le script ait tourné. À tenir égale au repli `--fmt-nav-h` de
	   style.css. */
	--fmt-entete-h: 80px;

	/* Retrait imposé par la barre d'administration, voir plus bas. */
	--fmt-entete-top: 0px;
}

/* WordPress espace les frères d'une mise en page « flux » de 24 px. Ici les
   deux bandes se touchent : le bandeau et la barre forment une seule masse. */
.fmt-entete > * {
	margin-block: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   BARRE D'ADMINISTRATION

   Elle est fixe et se pose PAR-DESSUS un élément collant à `top: 0`. On descend
   donc la barre d'autant. Sous 601 px, WordPress la repasse en `position:
   absolute` : elle défile avec la page, et tout retrait deviendrait un trou.
   ─────────────────────────────────────────────────────────────────────────── */

.admin-bar .fmt-entete {
	--fmt-entete-top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .fmt-entete {
		--fmt-entete-top: 32px;
	}
}

@media (max-width: 600px) {
	.admin-bar .fmt-entete {
		--fmt-entete-top: 0px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANDEAU DE MENTION

   Le `AnnouncementBar` du kit : fond pétrole, capitales espacées ivoire, au
   moins 29 px. Au-dessus de l'élément collant : il défile avec la page et ne
   revient pas. Il respire en `padding-block` plutôt qu'en hauteur fixe, pour
   pouvoir passer à deux lignes sur un téléphone sans rogner son texte.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-entete__annonce {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 29px;
	padding-block: 7px;
	padding-inline: var(--gutter);
	background: var(--surface-inverse);
}

.fmt-entete__annonce-texte {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--text-on-inverse);
	text-align: center;
	text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION COLLANTE

   Ivoire plein, filet fin en bas — le SEUL trait structurel du site : la
   barre est ivoire comme la plupart des bandes qu'elle survole, et sans lui le
   contenu glisserait dessous sans limite visible. Pas de verre : le kit le
   réserve à un en-tête posé sur une image, ce qui n'est jamais le cas ici.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-entete__barre {
	position: sticky;
	inset-block-start: var(--fmt-entete-top);
	z-index: 20;
	background: var(--surface-page);
	border-block-end: var(--hairline) solid var(--border-hairline);
}

/* Repère des panneaux : ils se posent sous la RANGÉE, pas sous la barre. */
.fmt-entete__interne {
	position: relative;
}

/* La rangée s'aligne sur la colonne de contenu de la page (1 240 px), comme
   dans la maquette : le logo tombe à l'aplomb des titres. */
.fmt-entete__rangee {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	block-size: var(--fmt-entete-h);
	padding-inline: var(--bande-x);
}

@media (min-width: 1100px) {
	.fmt-entete {
		--fmt-entete-h: 108px;
	}

	.fmt-entete__rangee {
		gap: var(--space-32);
	}
}

/* ───────────────────────────────────────────────────────────────────────────
   LOGO

   Le fichier officiel, imprimé en ligne par `fmt_fragrances_logo()`. Sa
   hauteur se règle ici par `--fmt-logo-h` — 44 px puis 55 px, les mesures de
   la maquette du kit — ; la largeur suit le rapport du dessin.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-entete__logo {
	flex: none;
	display: flex;
	align-items: center;
}

.fmt-entete__logo-lien {
	display: block;
	color: var(--petrole);
	text-decoration: none;
}

.fmt-entete__logo .fmt-logo {
	--fmt-logo-h: 44px;
}

@media (min-width: 1100px) {
	.fmt-entete__logo .fmt-logo {
		--fmt-logo-h: 55px;
	}
}

/* ───────────────────────────────────────────────────────────────────────────
   DÉCLENCHEURS ET LIENS SIMPLES

   Du texte, pas des pilules : Manrope 14 px / 600 en pétrole. Le lien ouvert
   se souligne d'un filet plein, le survol d'un voile.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-langues {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 2px;
	padding: 3px;
	background: var(--surface-contenant);
	border-radius: var(--radius-4);
}

.fmt-langues a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 36px;
	min-block-size: 38px;
	border-radius: var(--radius-2);
	font: 600 12px var(--font-sans);
	color: var(--text-heading);
	text-decoration: none;
}

.fmt-langues a:hover { background: var(--surface-contenant-survol); }
.fmt-langues a[aria-current="true"] {
	background: var(--surface-inverse);
	color: var(--text-on-inverse);
}

.fmt-langues a:focus-visible {
	outline: 2px solid var(--cuivre);
	outline-offset: 2px;
}

.fmt-entete__menu {
	display: flex;
	align-items: center;
	gap: var(--space-32);
	margin-inline: auto;
	flex: none;
}

.fmt-entete__declencheur,
.fmt-entete__lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0 4px;
	border: 0;
	border-block-end: var(--hairline) solid transparent;
	border-radius: 0;
	background: transparent;
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	line-height: 1.2;
	white-space: nowrap;
	color: var(--petrole);
	text-decoration: none;
	cursor: pointer;
	transition:
		border-color var(--dur-quick) var(--ease-soft),
		color var(--dur-quick) var(--ease-soft);
}

.fmt-entete__declencheur:hover,
.fmt-entete__lien:hover,
.fmt-entete__lien:focus-visible {
	border-block-end-color: var(--petrole-32);
	color: var(--petrole);
}

.fmt-entete__declencheur[aria-expanded="true"] {
	border-block-end-color: var(--petrole);
}

.fmt-entete__chevron {
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	transition: transform var(--dur-ui) var(--ease-soft);
}

[aria-expanded="true"] .fmt-entete__chevron {
	transform: rotate(180deg);
}

/*
 * REPLI SANS JAVASCRIPT. Le lien est l'état par défaut du document : il mène à
 * /boutique/ et à /marque-blanche/, et suffit à lui seul. `.fmt-js` — posée sur
 * <html> par le script — échange le lien contre le vrai bouton de mégamenu.
 * Les deux portent le même dessin : l'échange ne produit aucun scintillement.
 */
.fmt-entete__declencheur:not(.fmt-entete__declencheur--repli) {
	display: none;
}

.fmt-js .fmt-entete__declencheur--repli {
	display: none;
}

.fmt-js .fmt-entete__declencheur:not(.fmt-entete__declencheur--repli) {
	display: inline-flex;
}

/* ───────────────────────────────────────────────────────────────────────────
   APPEL À L'ACTION ET BOUTON DE MENU
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-entete__actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--space-16);
	flex: none;
}

@media (min-width: 1100px) {
	.fmt-entete__actions {
		margin-inline-start: 0;
	}
}

.fmt-entete__devis-court {
	display: none;
}

/* Le « Menu + » de la maquette mobile : un mot et un signe, sans contour. Le
   libellé visible est contenu dans le nom accessible (« Ouvrir le menu »). */
.fmt-entete__hamburger {
	display: none;
	flex: none;
	align-items: center;
	gap: 6px;
	block-size: 44px;
	padding: 0 4px;
	border: 0;
	border-radius: var(--radius-4);
	background: transparent;
	color: var(--petrole);
	font-family: var(--font-sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-entete__hamburger:hover {
	background: var(--petrole-08);
}

.fmt-entete__hamburger:active {
	transform: scale(var(--scale-press));
}

.fmt-entete__icone {
	inline-size: 18px;
	block-size: 18px;
}

/* Un seul des deux pictogrammes est rendu à la fois — l'autre quitte l'arbre
   d'accessibilité en même temps que l'affichage. */
.fmt-entete__icone--fermer,
.fmt-entete__hamburger[aria-expanded="true"] .fmt-entete__icone--ouvrir {
	display: none;
}

.fmt-entete__hamburger[aria-expanded="true"] .fmt-entete__icone--fermer {
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANNEAUX DE MÉGAMENU

   Une bande ivoire sous la barre, avec l'ombre `douce` que le kit réserve aux
   menus : c'est elle, et non un trait, qui la détache de la page. Ils s'ouvrent en `max-height`, pas en
   `height` : la hauteur réelle dépend du contenu, et une valeur plafond suffit
   à décrire l'ouverture. `visibility` double `inert` : sans JavaScript, aucune
   classe n'est posée, et il faut tout de même que les liens d'un panneau fermé
   restent hors du parcours de tabulation.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-entete__panneau {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + var(--hairline));
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	box-shadow: var(--shadow-soft);
	transition:
		max-height 300ms var(--ease-soft),
		opacity var(--dur-ui) var(--ease-soft),
		visibility 0s linear 300ms;
}

.fmt-entete__panneau.is-ouvert {
	max-height: 440px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		max-height 300ms var(--ease-soft),
		opacity var(--dur-ui) var(--ease-soft),
		visibility 0s;
}

.fmt-entete__panneau-corps {
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: var(--space-48);
	padding: var(--space-32) var(--bande-x);
	background: var(--surface-page);
}

.fmt-entete__panneau-corps--sans-colonne {
	grid-template-columns: minmax(0, 1fr);
}

/* ───────────────────────────────────────────────────────────────────────────
   COLONNE DE GAUCHE
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-entete__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.fmt-entete__surtitre {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--text-muted);
}

.fmt-entete__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-entete__gamme {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--text-body);
	text-decoration: none;
	transition: color var(--dur-quick) var(--ease-soft);
}

.fmt-entete__gamme--phare {
	font-weight: 600;
	color: var(--petrole);
}

/* Au survol, le texte ne change presque pas de teinte (le cuivre, trop pâle
   pour du texte, est réservé au soulignement) : c'est le soulignement qui
   signale le lien visé, comme dans le texte courant. */
.fmt-entete__gamme:hover,
.fmt-entete__gamme:focus-visible {
	color: var(--text-link-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--border-accent);
	text-underline-offset: .22em;
}

/* Lien de bas de colonne, détaché par l'espace : il quitte la gamme pour
   aller au catalogue entier ou au devis. */
.fmt-entete__pied {
	margin-block-start: var(--space-16);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--track-ui);
	color: var(--petrole);
	text-decoration: none;
	transition: color var(--dur-quick) var(--ease-soft);
}

.fmt-entete__pied:hover,
.fmt-entete__pied:focus-visible {
	color: var(--text-link-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--border-accent);
	text-underline-offset: .22em;
}

/* Le devis est l'action principale du panneau « Votre marque ». */
#fmt-entete-panneau-marque .fmt-entete__pied {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-block-size: 44px;
	margin-block-start: var(--space-24);
	padding: 10px 18px;
	border-radius: var(--radius-4);
	background: var(--petrole);
	color: var(--text-on-inverse);
	text-align: center;
}

#fmt-entete-panneau-marque .fmt-entete__pied:hover,
#fmt-entete-panneau-marque .fmt-entete__pied:focus-visible {
	background: var(--petrole-survol);
	color: var(--text-on-inverse);
	text-decoration: none;
}

/* ───────────────────────────────────────────────────────────────────────────
   COLONNE DE DROITE — RAIL DE CARTES
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-entete__vitrine {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-inline-size: 0;
}

.fmt-entete__vitrine-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
}

.fmt-entete__fleches {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

/* Deux repères ronds, en aplat lin — les seuls ronds de l'en-tête. */
.fmt-entete__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-contenant);
	color: var(--petrole);
	cursor: pointer;
	transition:
		background-color var(--dur-quick) var(--ease-soft),
		opacity var(--dur-quick) var(--ease-soft),
		transform var(--dur-quick) var(--ease-soft);
}

.fmt-entete__fleche:hover {
	background: var(--surface-contenant-survol);
}

.fmt-entete__fleche--pleine {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-entete__fleche--pleine:hover {
	background: var(--petrole-survol);
}

.fmt-entete__fleche:active {
	transform: scale(var(--scale-press));
}

/* En butée, la flèche ne disparaît pas : elle s'éteint. Un bouton qui s'efface
   déplace les autres et fait perdre le repère. */
.fmt-entete__fleche[disabled] {
	opacity: .32;
	cursor: default;
}

.fmt-entete__fleche svg {
	inline-size: 18px;
	block-size: 18px;
}

.fmt-entete__rail {
	display: flex;
	gap: 14px;
	padding-block-end: 6px;
}

/* ───────────────────────────────────────────────────────────────────────────
   CARTES

   Des vignettes du kit : rayon 16 px (elles portent une image), sans trait ni
   ombre. Au survol, la teinte fonce d'un cran et la carte monte d'un pixel.
   Deux familles : la carte produit pose son visuel sur le lin ; la carte photographique pose
   un visuel du kit en couverture sous un voile de pétrole.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-entete__carte {
	position: relative;
	isolation: isolate;
	flex: none;
	inline-size: 250px;
	block-size: 280px;
	border-radius: var(--radius-16);
	overflow: hidden;
	scroll-snap-align: start;
	text-decoration: none;
	transition:
		background-color var(--dur-ui) var(--ease-soft),
		transform var(--dur-ui) var(--ease-soft);
}

.fmt-entete__carte:hover {
	transform: translateY(var(--lift-hover));
}

.fmt-entete__carte--produit:hover {
	background: var(--surface-contenant-survol);
}

.fmt-entete__carte:active {
	transform: scale(var(--scale-press));
}

.fmt-entete__carte--produit {
	background: var(--surface-secondary);
}

.fmt-entete__carte--photo {
	background: var(--surface-inverse);
}

/*
 * Les packshots sont détourés sur fond TRANSPARENT : ils se posent sur le lin
 * sans halo, et sans `mix-blend-mode`, qui noircirait leurs bords.
 */
.fmt-entete .fmt-entete__packshot {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 84px;
	transform: translateX(-50%);
	inline-size: auto;
	block-size: 180px;
	object-fit: contain;
}

/* La grande carte porte une ligne de texte de plus : le flacon remonte et
   rétrécit d'autant, sinon il chevaucherait son propre libellé. */
.fmt-entete .fmt-entete__carte--grande .fmt-entete__packshot {
	inset-block-end: 104px;
	block-size: 140px;
}

.fmt-entete .fmt-entete__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fmt-entete__carte--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--fmt-entete-voile-carte);
}

/* Repère en haut de carte : un `Badge` pétrole plein. Sur une photographie,
   c'est l'aplat qui garantit la lecture — pas de verre dans ce système. */
.fmt-entete__carte-puce {
	position: absolute;
	z-index: 2;
	inset-block-start: 16px;
	inset-inline-start: 16px;
}

.fmt-entete__carte--photo .fmt-entete__carte-puce {
	background: var(--petrole);
	color: var(--text-on-inverse);
}

.fmt-entete__carte-puce--claire {
	background: var(--surface-page);
	color: var(--petrole);
}

.fmt-entete__carte-texte {
	position: absolute;
	z-index: 2;
	inset-inline: 18px;
	inset-block-end: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.fmt-entete__carte-nom {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-axes);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--track-subsection);
	color: var(--petrole);
}

.fmt-entete__carte--grande .fmt-entete__carte-nom {
	font-size: 24px;
}

.fmt-entete__carte-sous {
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--lh-caption);
	color: var(--text-muted);
}

.fmt-entete__carte-note {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--text-muted);
}

.fmt-entete__carte--grande .fmt-entete__carte-note {
	margin-block-start: 4px;
	font-weight: 600;
	color: var(--petrole);
}

.fmt-entete__carte--photo .fmt-entete__carte-nom,
.fmt-entete__carte--photo .fmt-entete__carte-note {
	color: var(--text-on-inverse);
}

.fmt-entete__carte--photo .fmt-entete__carte-sous {
	color: var(--ivoire);
}

/* Repère d'action : la carte entière est déjà le lien, ce n'est qu'un
   libellé suivi de sa flèche, comme au pied d'une `ProductCard` du kit. */
.fmt-entete__carte-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 10px;
	color: var(--text-on-inverse);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--track-ui);
	white-space: nowrap;
}

.fmt-entete__carte-action svg {
	inline-size: 14px;
	block-size: 14px;
}

/* Le catalogue reprend la composition des cartes de l'accueil : une zone
   image régulière, puis un corps souple qui garde les prix alignés. */
#fmt-entete-panneau-catalogue.is-ouvert {
	max-height: 480px;
}

#fmt-entete-panneau-catalogue .fmt-entete__rail {
	gap: var(--space-16);
	padding-block: 3px 6px;
}

#fmt-entete-panneau-catalogue .fmt-entete__carte--produit {
	display: flex;
	flex-direction: column;
	inline-size: 252px;
	block-size: 320px;
}

#fmt-entete-panneau-catalogue .fmt-entete__packshot {
	position: static;
	transform: none;
	flex: none;
	inline-size: 100%;
	block-size: 190px;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	background: none;
}

#fmt-entete-panneau-catalogue .fmt-entete__carte-texte {
	position: static;
	flex: 1;
	gap: 5px;
	padding: 12px 18px 18px;
}

#fmt-entete-panneau-catalogue .fmt-entete__carte-nom {
	font-size: 19px;
	line-height: 1.15;
}

#fmt-entete-panneau-catalogue .fmt-entete__carte-sous {
	font-size: var(--wp--preset--font-size--caption);
}

#fmt-entete-panneau-catalogue .fmt-entete__carte-note {
	margin-block-start: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU PLEIN ÉCRAN — SOUS 1100 px

   Deux colonnes de 250 px, un rail de six cartes et une grille de 230 px + 1fr
   ne tiennent pas sous 1100 px : le mégamenu n'y est pas rétréci, il est
   REMPLACÉ. « Menu + » ouvre un calque ivoire qui reprend, à plat et à la
   verticale, tous les liens des deux panneaux, rythmés par l'espace seul.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Le calque commence SOUS la barre, pour que le bouton reste visible et puisse
 * refermer ce qu'il a ouvert. Or la barre n'est pas toujours à la même
 * hauteur : tant que le bandeau n'a pas défilé, il la pousse vers le bas. Le
 * script mesure donc le bas réel de la barre à l'ouverture et le publie dans
 * `--fmt-entete-mobile-top` — le défilement étant figé pendant ce temps, une
 * seule mesure suffit et aucune écoute du défilement n'est requise. Le calcul
 * de repli couvre le cas où le script ne s'exécute pas.
 */
.fmt-entete__mobile {
	position: fixed;
	inset-block-start: var(--fmt-entete-mobile-top, calc(var(--fmt-entete-top) + var(--fmt-entete-h)));
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	padding: var(--space-32) var(--gutter) var(--space-48);
	background: var(--surface-page);
	color: var(--text-body);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--dur-ui) var(--ease-soft),
		transform var(--dur-ui) var(--ease-soft),
		visibility 0s linear var(--dur-ui);
}

.fmt-entete__mobile.is-ouvert {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity var(--dur-ui) var(--ease-soft),
		transform var(--dur-ui) var(--ease-soft),
		visibility 0s;
}

.fmt-entete__mobile-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

.fmt-entete__mobile-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.fmt-entete__mobile-liste {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 48 px de haut : la cible tactile confortable, et un rythme régulier qui
   se lit comme une liste sans qu'aucun trait ne la découpe. */
.fmt-entete__mobile-lien {
	display: flex;
	align-items: center;
	min-block-size: 48px;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--petrole);
	text-decoration: none;
}

/* Menu ouvert : la page derrière ne défile plus. Sans cela le pouce fait
   glisser le contenu sous un panneau qui, lui, ne bouge pas. */
.fmt-entete-fige {
	overflow: hidden;
}

@media (max-width: 1099px) {
	.fmt-entete__menu,
	.fmt-entete__panneau {
		display: none;
	}

	.fmt-entete__hamburger {
		display: inline-flex;
	}
}

/*
 * Au-delà du seuil, le menu plein écran n'existe plus du tout — y compris s'il
 * était ouvert au moment où la fenêtre a été élargie. La règle vient APRÈS
 * `.is-ouvert` : à spécificité égale, c'est l'ordre qui tranche.
 */
@media (min-width: 1100px) {
	.fmt-entete__mobile {
		display: none;
	}
}

@media (max-width: 600px) {
	/* À 0,16 em la mention prend trois lignes sur un téléphone : l'approche se
	   resserre, le corps de 11 px reste le plancher du système. */
	.fmt-entete__annonce-texte {
		letter-spacing: .08em;
	}

	.fmt-entete__devis-long {
		display: none;
	}

	.fmt-entete__devis-court {
		display: inline;
	}

	.fmt-entete__devis {
		block-size: 40px;
		padding-inline: 16px;
	}
}

/* Leave room for both languages, cart and menu on narrow screens. */
@media (max-width: 480px) {
	.fmt-entete__rangee { gap: var(--space-8); }
	.fmt-entete__actions { gap: var(--space-8); }
	.fmt-langues a { min-inline-size: 30px; }
	.fmt-entete__hamburger-libelle { display: none; }
}

@media (max-width: 380px) {
	.fmt-entete__logo .fmt-logo { --fmt-logo-h: 36px; }
}