/*
 * Le formulaire de demande (template-parts/formulaires/demande.php) et sa fenêtre. Chargé sur la
 * page Contact, et à la demande par demande-modale.js sur les autres pages, avec photos.css.
 *
 * Une question par étape, en grand, des tuiles à toucher, une barre de progression en trois
 * traits d'eau. Champs du site (main.css), fonds plus sombres que le cadre pour qu'ils se
 * creusent, erreurs en ambre comme dans le tunnel. Aucun rouge : il reste à réserver et payer,
 * le bouton d'action est donc à l'eau.
 */

/* ---------------------------------------------------------------- Le cadre */

.demande {
	position: relative;
	padding: clamp(24px, 3.4vw, 44px);
	background: linear-gradient(180deg, rgba(18, 36, 56, 0.66), rgba(11, 22, 36, 0.52) 55%, rgba(11, 22, 36, 0.4));
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: 0 50px 90px -50px rgba(0, 0, 0, 0.7);
	scroll-margin-top: calc(var(--entete) + 20px);
}

/* Le filet d'eau du haut, qui passe lentement d'un bord à l'autre. */
.demande::before,
.demande-modale::before {
	content: '';
	position: absolute;
	inset: -1px -1px auto;
	height: 2px;
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: linear-gradient(90deg, rgba(111, 168, 220, 0), var(--water) 30%, var(--water-2) 50%, var(--water) 70%, rgba(111, 168, 220, 0)) 0 0 / 200% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.demande::before,
	.demande-modale::before { animation: filet-eau 9s linear infinite; }
}

@keyframes filet-eau {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

/* Au téléphone, le cadre prend toute la largeur : chaque pixel va aux champs. */
@media (max-width: 599.98px) {
	.demande {
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		border-inline: 0;
		border-radius: 0;
	}

	.demande::before { border-radius: 0; }
}

.demande__titre {
	font-weight: 300;
	font-size: clamp(22px, 2.4vw, 26px);
	line-height: 1.2;
	color: var(--text-2);
}

.demande__formulaire { display: grid; }

/* Sans script, les étapes se suivent : un blanc entre le titre et le filet de la première. */
.demande:not(.est-stepper) .demande__formulaire { margin-top: 14px; }

/* ---------------------------------------------------------------- Progression */

/* Trois traits : faits en eau, le courant en eau claire qui se remplit, les suivants en filet. */
.demande__progres {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.demande__pas { display: grid; gap: 9px; min-width: 0; }

.demande__barre {
	position: relative;
	height: 3px;
	overflow: hidden;
	background: var(--line-strong);
	border-radius: 2px;
}

.demande__barre::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--water);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-lente) var(--ease);
}

.demande__pas.est-fait .demande__barre::after { transform: none; }

.demande__pas.est-courant .demande__barre::after {
	transform: none;
	background: linear-gradient(90deg, var(--water), var(--water-2));
	box-shadow: 0 0 10px rgba(169, 207, 240, 0.6);
}

.demande__pas-nom {
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--text-3);
	transition: color var(--dur-lente) var(--ease);
}

.demande__pas.est-fait .demande__pas-nom { color: var(--text-2); }
.demande__pas.est-courant .demande__pas-nom { color: var(--text); }

/* ---------------------------------------------------------------- Étapes */

.demande__etape {
	display: grid;
	gap: 18px;
	min-width: 0;
	margin: 0;
	padding: clamp(24px, 3vw, 30px) 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/* Une étape à la fois : plus de filet, la barre de progression sépare déjà. */
.est-stepper .demande__etape { border-top: 0; padding-bottom: clamp(22px, 2.8vw, 28px); }

/* La question de l'étape, en grand. Flottante, la légende du fieldset devient une case de la
   grille comme les autres, au lieu de se poser sur sa bordure. */
.demande__question {
	float: left;
	width: 100%;
	padding: 0 0 4px;
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.12;
	letter-spacing: -0.012em;
	color: var(--text);
}

/* Focus posé par le script en changeant d'étape, pour les lecteurs d'écran : pas de cadre. */
.demande__question:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
	.demande__etape.vient-avant { animation: etape-avant 0.4s var(--ease) both; }
	.demande__etape.vient-arriere { animation: etape-arriere 0.4s var(--ease) both; }
}

@keyframes etape-avant { from { opacity: 0; transform: translateX(22px); } }
@keyframes etape-arriere { from { opacity: 0; transform: translateX(-22px); } }

/* Retour, en haut à gauche de l'étape, au-dessus de la question : là où on le cherche. */
.demande__precedent {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 12px 0 -6px -2px;
	padding: 0 12px 0 2px;
	background: none;
	border: 0;
	color: var(--text-2);
	font: inherit;
	font-size: 14.5px;
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}

.demande__precedent:hover { color: var(--text); }
.demande__precedent span { transition: transform var(--dur-lente) var(--ease); }
.demande__precedent:hover span { transform: translateX(-3px); }

/* Avec Retour au-dessus, la question remonte d'autant. */
.demande__precedent:not([hidden]) ~ .demande__etape { padding-top: 10px; }

/* Le motif choisi, rappelé en tête de la deuxième étape. */
.demande__rappel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	margin-top: -8px;
	font-size: 14.5px;
	color: var(--text-2);
}

.demande__rappel span::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--water);
	vertical-align: 2px;
}

.demande__modifier {
	padding: 6px 0;
	background: none;
	border: 0;
	color: var(--water);
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}

.demande__modifier:hover { color: var(--water-2); }

/* ---------------------------------------------------------------- Tuiles */

.demande__choix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	gap: 10px;
}

@media (max-width: 599.98px) {
	.demande__choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Une tuile par motif : le dessin en haut, la pastille du choix en face, le libellé dessous. La
 * pastille porte le contraste de la commande (bordure de champ, 3,4:1), la tuile reste discrète
 * tant qu'elle n'est pas choisie. La tuile se clique : elle seule monte au survol.
 */
.demande__motif {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px;
	grid-template-rows: auto 1fr;
	gap: 16px 10px;
	min-height: 132px;
	padding: 16px;
	background: rgba(6, 13, 22, 0.45);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-lente) var(--ease);
}

.demande__picto {
	grid-column: 1;
	grid-row: 1;
	width: 38px;
	height: 38px;
	color: var(--text-2);
	transition: color var(--dur) var(--ease);
}

.demande__libelle {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: end;
	font-size: 15px;
	line-height: 1.35;
	color: var(--text);
}

.demande__motif input {
	appearance: none;
	grid-column: 2;
	grid-row: 1;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid var(--field);
	border-radius: 50%;
	background: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease);
}

.demande__motif input::before {
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--water-2);
	transform: scale(0);
	transition: transform var(--dur) var(--ease);
}

@media (hover: hover) {
	.demande__motif:hover {
		border-color: rgba(255, 255, 255, 0.34);
		background-color: rgba(255, 255, 255, 0.03);
		transform: translateY(-2px);
	}

	.demande__motif:hover .demande__picto { color: var(--text); }
}

.demande__motif:has(input:checked) { border-color: var(--water); background-color: var(--water-dim); }
.demande__motif:has(input:checked) .demande__picto { color: var(--text); }
.demande__motif input:checked { border-color: var(--water-2); }
.demande__motif input:checked::before { transform: scale(1); }

.demande__motif:has(input:focus-visible) { outline: 2px solid var(--water); outline-offset: 2px; }
.demande__motif input:focus-visible { outline: none; }

.demande__motifs.est-invalide .demande__motif { border-color: rgba(240, 192, 105, 0.6); }
.demande__motifs.est-invalide .demande__motif input { border-color: var(--warn); }

/* ---------------------------------------------------------------- Champs */

.demande input[type='text'],
.demande input[type='tel'],
.demande input[type='email'],
.demande textarea,
.demande select { background-color: rgba(6, 13, 22, 0.75); }

/* La liste déroulante : la flèche du site, et la liste ouverte dans le sombre. */
.demande select {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a3b6c9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	color-scheme: dark;
	cursor: pointer;
}

.demande textarea { min-height: 130px; }

/* Sans script, le champ du navigateur reste seul : son bouton prend l'allure du site. */
.demande input[type='file']::file-selector-button {
	margin-right: 14px;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	color: var(--text);
	font: inherit;
	font-size: 13px;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.demande .photos__zone { background-color: rgba(6, 13, 22, 0.5); }

/* ---------------------------------------------------------------- Accord */

/* La case « J'accepte d'être recontacté » : toute la ligne se touche. */
.demande__case {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	padding: 15px 16px;
	background: rgba(6, 13, 22, 0.45);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.demande__case input {
	appearance: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1.5px solid var(--field);
	border-radius: var(--r-sm);
	background: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.demande__case input::before {
	content: '';
	width: 11px;
	height: 6px;
	margin-top: -3px;
	border: solid var(--ink);
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg) scale(0);
	transition: transform var(--dur) var(--ease);
}

.demande__case:hover { border-color: rgba(255, 255, 255, 0.34); }
.demande__case:has(input:checked) { border-color: var(--water); background-color: var(--water-dim); }
.demande__case input:checked { border-color: var(--water-2); background: var(--water-2); }
.demande__case input:checked::before { transform: rotate(-45deg) scale(1); }
.demande__case:has(input:focus-visible) { outline: 2px solid var(--water); outline-offset: 2px; }
.demande__case input:focus-visible { outline: none; }

.demande__accord.est-invalide .demande__case { border-color: var(--warn); background-color: rgba(240, 192, 105, 0.05); }
.demande__accord.est-invalide .demande__case input { border-color: var(--warn); }

/* ---------------------------------------------------------------- Boutons */

.demande__envoi {
	display: grid;
	gap: 14px;
	padding-top: clamp(22px, 2.8vw, 28px);
	border-top: 1px solid var(--line);
}

.demande__boutons {
	display: flex;
	align-items: center;
	gap: 8px 16px;
}

.demande__boutons > [hidden] { display: none; }

/* L'action de l'étape, à l'eau, sur toute la largeur. */
.demande__bouton {
	flex: 1 1 auto;
	background: linear-gradient(180deg, rgba(111, 168, 220, 0.26), rgba(111, 168, 220, 0.13));
	border-color: rgba(111, 168, 220, 0.62);
	color: #fff;
}

.demande__bouton:hover,
.demande__bouton:focus-visible {
	background: linear-gradient(180deg, rgba(111, 168, 220, 0.36), rgba(111, 168, 220, 0.2));
	border-color: var(--water-2);
	color: #fff;
}

.demande__fleche { transition: transform var(--dur-lente) var(--ease); }

.demande__bouton:hover .demande__fleche,
.demande__bouton:focus-visible .demande__fleche { transform: translateX(4px); }

.demande__envoi .aide a { color: var(--water); }

/* ---------------------------------------------------------------- Envoyée */

.demande__envoyee {
	display: grid;
	justify-items: start;
	gap: 12px;
	margin-top: clamp(22px, 3vw, 30px);
	padding-top: clamp(26px, 3.4vw, 36px);
	border-top: 1px solid var(--line);
	color: var(--text-2);
}

.demande__envoyee .demande__bouton { flex: none; margin-top: 8px; }

.demande__coche {
	position: relative;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin-bottom: 6px;
	border: 1px solid rgba(143, 224, 190, 0.5);
	border-radius: 50%;
	color: var(--ok);
}

.demande__coche svg {
	width: 40px;
	height: 40px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 32;
}

/* Une onde part du rond, une seule fois, comme la goutte de l'accueil. */
.demande__coche::after {
	content: '';
	position: absolute;
	inset: -1px;
	border: 1px solid var(--ok);
	border-radius: 50%;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.demande__coche svg { animation: coche-trace 0.7s 0.25s var(--ease) both; }
	.demande__coche::after { animation: coche-onde 1.6s 0.5s cubic-bezier(0.2, 0.6, 0.35, 1) both; }
}

@keyframes coche-trace { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes coche-onde { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.9); opacity: 0; } }

.demande__envoyee-titre {
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(30px, 3.6vw, 42px);
	line-height: 1.1;
	color: var(--text);
}

.demande__envoyee-titre:focus { outline: none; }

/* ---------------------------------------------------------------- Erreurs */

/* Ce que le tunnel déclare dans reservation.css, dont ce formulaire a besoin partout. */
.demande .facultatif { color: var(--text-3); }

.demande .piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.demande .erreur {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 18px;
	padding: 14px 16px;
	background: rgba(240, 192, 105, 0.08);
	border: 1px solid rgba(240, 192, 105, 0.5);
	border-left-width: 4px;
	border-radius: var(--r-md);
	color: var(--text);
	font-size: 15px;
	line-height: 1.5;
}

.demande .erreur[hidden] { display: none; }
.demande .erreur:focus { outline: none; }

.demande .erreur::before,
.demande .champ__erreur::before {
	content: '!';
	flex: none;
	display: grid;
	place-items: center;
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.15em;
	border-radius: 50%;
	background: var(--warn);
	color: var(--ink);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
}

.demande .champ__erreur {
	text-wrap: pretty;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var(--warn);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
}

.demande .champ__erreur[hidden] { display: none; }

.demande .champ.est-invalide input:not([type='file']):not([type='radio']):not([type='checkbox']),
.demande .champ.est-invalide textarea {
	border-color: var(--warn);
	box-shadow: inset 0 0 0 1px var(--warn);
	background-color: rgba(240, 192, 105, 0.05);
}

@media (prefers-reduced-motion: no-preference) {
	.demande .champ__erreur:not([hidden]) { animation: erreur-entre 0.25s var(--ease) both; }
}

@keyframes erreur-entre { from { opacity: 0; transform: translateY(-4px); } }

/* ---------------------------------------------------------------- La fenêtre */

/*
 * La fenêtre de demande des autres pages : le formulaire sans son cadre, la fenêtre en tient
 * lieu. Au téléphone, elle prend tout l'écran et monte du bas.
 */
/* La page derrière ne défile plus. Sa barre disparaît sans laisser de bande : la largeur qu'elle
   prenait revient en marge à droite (--barre, mesurée par demande-modale.js), la page ne bouge pas
   et la fenêtre plein écran du téléphone va bien d'un bord à l'autre. */
html.a-modale { overflow: hidden; }
html.a-modale body { padding-right: var(--barre, 0px); }

.demande-modale {
	position: fixed;
	width: min(680px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	overflow: visible;
	background: linear-gradient(180deg, #11223a, #0b1624 46%, #0a1421);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	color: var(--text);
	box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.85);
}

.demande-modale::backdrop {
	background: rgba(3, 7, 12, 0.74);
	backdrop-filter: blur(6px);
}

.demande-modale__corps {
	max-height: calc(100dvh - 50px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(169, 207, 240, 0.35) transparent;
	padding: clamp(26px, 4vw, 44px);
}

.demande-modale .demande {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.demande-modale .demande::before { content: none; }

/* La place de la croix, en haut à droite du titre. */
.demande-modale .demande__titre { padding-right: 48px; }

.demande-modale__fermer {
	position: absolute;
	z-index: 1;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(6, 13, 22, 0.6);
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.demande-modale__fermer svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.demande-modale__fermer:hover,
.demande-modale__fermer:focus-visible { border-color: rgba(255, 255, 255, 0.6); background: var(--ink); }

.demande-modale__chargement {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 200px;
	color: var(--text-2);
}

/* Une goutte qui pulse le temps que le formulaire arrive. */
.demande-modale__chargement::before {
	content: '';
	width: 10px;
	height: 14px;
	border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
	background: linear-gradient(180deg, #fff, var(--water-2));
	box-shadow: 0 0 12px rgba(150, 200, 255, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
	.demande-modale__chargement::before { animation: goutte-pulse 1s ease-in-out infinite alternate; }
}

@keyframes goutte-pulse { to { opacity: 0.35; transform: translateY(4px); } }

.demande-modale__appel {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--text-3);
}

.demande-modale__appel a {
	color: var(--water);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.demande-modale[open] { animation: modale-entre 0.34s var(--ease) both; }
	.demande-modale[open]::backdrop { animation: voile-entre 0.34s ease both; }
	.demande-modale.est-fermante { animation: modale-sort 0.18s ease both; }
	.demande-modale.est-fermante::backdrop { animation: voile-sort 0.18s ease both; }
}

@keyframes modale-entre { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
@keyframes modale-sort { to { opacity: 0; transform: translateY(10px); } }
@keyframes voile-entre { from { opacity: 0; } }
@keyframes voile-sort { to { opacity: 0; } }

@media (max-width: 599.98px) {
	.demande-modale {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border: 0;
		border-radius: 0;
	}

	.demande-modale::before { border-radius: 0; }

	.demande-modale__corps {
		height: 100%;
		max-height: none;
		padding: 22px var(--gutter) calc(28px + env(safe-area-inset-bottom));
	}

	.demande-modale__fermer { top: 12px; right: 12px; }
}