/**
 * Page du tunnel de réservation.
 *
 * Chargée uniquement sur la page qui porte le shortcode [kokorepair].
 *
 * Le plugin apporte sa propre feuille, confinée à .kokorepair, et cette
 * feuille est claire — direction « atelier clair » assumée par le plugin. On
 * ne la combat pas : on l'installe. Le panneau clair posé sur le noir du site
 * devient le plan de travail éclairé où l'on pose l'appareil ; le contraste
 * sépare nettement « je consulte » de « je remplis ma demande ».
 *
 * Ce fichier ne touche donc presque rien à l'intérieur du tunnel. Il l'encadre.
 */

/* ------------------------------------------------- En-tête compact */

.k-tunnel-entete {
	position: relative;
	overflow: hidden;
	background: var(--noir-2);
	border-bottom: 1px solid var(--ligne);
	/* En-tête volontairement court : sur un portable, ce qui compte au-dessus
	   de la ligne de flottaison, c'est la première question du tunnel, pas la
	   présentation du service. */
	padding-block: var(--e-4) var(--e-5);
}

.k-tunnel-entete__interieur {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e-5);
	flex-wrap: wrap;
}

.k-tunnel-entete h1 {
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
	margin-bottom: var(--e-2);
}

.k-tunnel-entete .k-titre-page__intro {
	font-size: var(--t-note);
	max-width: 40rem;
}

.k-tunnel-entete__preuves {
	display: flex;
	gap: var(--e-4);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.k-tunnel-entete__preuves li {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-petit);
	font-weight: 600;
	color: var(--craie-2);
	white-space: nowrap;
}

.k-tunnel-entete__preuves svg {
	color: var(--or);
	flex: none;
}

/* --------------------------------------------- Le plan de travail */

/*
 * Le panneau qui accueille le tunnel. Le filet d'or sur l'arête supérieure
 * relie visuellement ce bloc clair au reste du site — sans lui, il aurait
 * l'air d'un corps étranger collé sur la page.
 */
.k-tunnel {
	position: relative;
	background: #ffffff;
	border-radius: var(--r-3);
	padding: clamp(1rem, 0.7rem + 1.4vw, 1.875rem);
	box-shadow:
		0 0 0 1px rgba(247, 250, 254, 0.08),
		0 30px 80px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

.k-tunnel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--or) 25%, var(--or) 75%, transparent);
}

/*
 * Le tunnel gère lui-même sa largeur maximale (940px) et ses marges. Dans le
 * panneau, il doit occuper toute la place disponible : la double contrainte
 * produirait une colonne étroite perdue au milieu d'un grand bloc blanc.
 */
.k-tunnel .kokorepair {
	max-width: none;
}

/* La halte d'attente pendant qu'une étape se recharge. */
.k-tunnel .kokorepair[aria-busy='true'] {
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

/* ------------------------------------------------- Sous le tunnel */

.k-tunnel-rassure {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--e-4);
	margin-top: var(--e-5);
}

.k-tunnel-rassure div {
	display: flex;
	gap: var(--e-3);
	align-items: flex-start;
	font-size: var(--t-petit);
	color: var(--craie-3);
	line-height: 1.5;
}

.k-tunnel-rassure svg {
	color: var(--or);
	flex: none;
	margin-top: 1px;
}

@media (max-width: 700px) {
	.k-tunnel {
		/* Sur téléphone, le panneau prend toute la largeur : la marge
		   latérale ne sert qu'à montrer le fond, et elle coûte de la place
		   à des cibles tactiles qui en manquent déjà. */
		margin-inline: calc(clamp(1.25rem, 5vw, 3rem) * -1);
		border-radius: 0;
		padding-inline: var(--e-4);
	}

	.k-tunnel-entete__interieur {
		align-items: flex-start;
	}
}

/* La section qui porte le plan de travail suit immédiatement l'en-tête : on
   rapproche les deux. Le premier écran doit montrer une question du tunnel,
   pas une bande vide. */
.k-tunnel-entete + .k-section {
	padding-top: var(--e-5);
}

/*
 * Sur téléphone, le panneau blanc et le conteneur prenaient à eux deux près de
 * quatre-vingts pixels de marge : autant de moins pour les cartes du tunnel,
 * qui finissaient en colonnes étroites. On leur rend cette largeur.
 *
 * Mesuré depuis sur un écran de 390 px : la gouttière, le panneau et
 * l'enveloppe du plugin coûtaient encore 94 px avant la première lettre du
 * descriptif. Les deux marges du thème se resserrent encore d'un cran ; le
 * plugin fait sa part de son côté.
 */
@media (max-width: 600px) {
	.k-tunnel {
		padding: 0.625rem;
		border-radius: var(--r-2);
	}

	/* La page d'un appareil porte aussi le tunnel, sans l'en-tête dédiée :
	   la gouttière s'y resserre pareillement. */
	.k-tunnel-entete + .k-section > .k-conteneur,
	.k-section > .k-conteneur:has(> .k-tunnel) {
		padding-inline: 0.5rem;
	}
}