/* ═══════════════════════════════════════════════════════════════════════
   Le décor du tunnel.

   Le fond, le quadrillage, l'en-tête réduit au logo et l'air autour du
   contenu. Deux pages le portent : la commande et la confirmation. Elles
   se suivent à trente secondes d'intervalle, et le client doit voir qu'il
   est resté au même endroit.

   Rien ici ne dépend de FunnelKit : ce qui touche à son formulaire vit
   dans `checkout.css`, ce qui touche au récapitulatif dans
   `recapitulatif.css`, et ce qui est propre à la confirmation dans
   `confirmation.css`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La page ────────────────────────────────────────────────────────────
   Papier et quadrillage, exactement ceux de l'accueil : mêmes 32 px, même
   filet, même densité. */

body.page-tunnel {
	background-color: var(--papier);
	min-height: 100vh;
}

/* Le quadrillage est `fixed` et non `absolute` : il couvre la fenêtre
   entière quelle que soit la longueur du formulaire, et il continue de
   couvrir pendant le défilement. En `absolute`, il s'arrêterait à la
   hauteur du document au premier rendu, laissant le bas nu dès qu'une
   erreur de validation allonge la page.

   Le `z-index` négatif le fait passer sous l'en-tête sans avoir à rendre
   celui-ci transparent, comme sur l'accueil. */
.tunnel-grille {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		repeating-linear-gradient(to right, var(--2h) 0 1px, transparent 1px 100%),
		repeating-linear-gradient(to bottom, var(--2h) 0 1px, transparent 1px 100%);
	background-size: 32px 32px, 32px 32px;
	opacity: 0.55;
	pointer-events: none;
}

/* ── L'en-tête du tunnel ────────────────────────────────────────────────
   C'est le bloc `.site-entete` du reste du site, à l'identique : même
   cadre en papier bordé, même largeur calculée sur le conteneur, même
   remontée collante au défilement, même logo de 19 px. Rien n'est
   redéclaré ici, tout vient de `style.css`.

   Seul le contenu change : le menu, la recherche et le panier ne sont pas
   rendus. Chacun de ces liens ferait repartir en arrière au moment précis
   où l'on allait payer.

   Une seule règle est donc nécessaire, et elle ne concerne que ce que
   l'absence de menu laisse se produire : sans deuxième élément, le bloc
   n'a plus rien à espacer.

   **Le logo est centré**, et non calé à gauche comme partout ailleurs.
   C'est un choix de Clément, du 11/09/2026, et il se tient : dans le reste
   du site, le logo ouvre une ligne qu'il partage avec le menu et les
   outils, et son alignement à gauche vient de là. Seul sur sa ligne, calé
   à gauche, il laisse un bandeau vide sur quatre-vingts pour cent de la
   largeur. Centré, il devient une enseigne : c'est exactement ce qu'on lui
   demande de dire sur une page de paiement.

   La règle vaut aussi pour la page de confirmation, qui reprend cet
   en-tête à l'identique. */

.site-entete--tunnel .entete-interieur {
	justify-content: center;
}

/* ── Le corps du tunnel ─────────────────────────────────────────────────
   L'air au-dessus vaut celui d'une page de contenu : le formulaire ne doit
   pas être collé sous l'en-tête. */

.tunnel {
	position: relative;
	z-index: 1;
	padding: var(--e8) 0 var(--e9);
}