/*
 * Formulaire de reservation.
 *
 * Valeurs reprises de la maquette validee. Le formulaire pose sa propre
 * carte : fond, texte, champs et filets lui appartiennent, il ne depend
 * d'aucun conteneur et reste lisible partout.
 *
 * Pour l'habiller, surcharger les variables depuis le CSS du site :
 *
 *   .sgn-resa {
 *       --sgn-fond: #fbfaf7;
 *       --sgn-texte: #1b2530;
 *       --sgn-accent: #c9a227;
 *       --sgn-accent-texte: #1b2530;
 *   }
 *
 * L'apparence "nu" retire toute mise en forme et ne laisse que la structure.
 */

.sgn-resa {
	--sgn-fond: #ffffff;
	--sgn-texte: #1f2328;
	--sgn-libelle: #5d646c;
	--sgn-attenue: #8a8f96;
	--sgn-champ-fond: #ffffff;
	--sgn-champ-bordure: #d5d2c9;
	--sgn-filet: #e4e2dc;
	--sgn-inactif-fond: #f4f2ed;
	--sgn-inactif-texte: #b0b4b9;
	--sgn-accent: #1f2328;
	--sgn-accent-texte: #ffffff;
	--sgn-rayon: 4px;
}

.sgn-resa .sgn-resa-form {
	background: var(--sgn-fond);
	color: var(--sgn-texte);
	border-radius: 8px;
	padding: 24px 22px;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.sgn-resa .sgn-resa-entete {
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sgn-attenue);
	margin: 0 0 18px;
	font-weight: 400;
}

.sgn-resa .sgn-resa-filet {
	height: 1px;
	background: var(--sgn-filet);
	margin: 20px 0;
}

.sgn-resa .sgn-resa-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sgn-resa .sgn-resa-etape[hidden] { display: none; }
.sgn-resa .sgn-resa-etape { margin-bottom: 18px; }
.sgn-resa .sgn-resa-etape:last-of-type { margin-bottom: 0; }

.sgn-resa .sgn-resa-duo { display: flex; flex-wrap: wrap; gap: 14px; }
.sgn-resa .sgn-resa-duo > .sgn-resa-champ { flex: 1; min-width: 0; }
.sgn-resa .sgn-resa-duo > .sgn-resa-champ.sgn-resa-court { flex: 0 0 110px; }

.sgn-resa .sgn-resa-champ { margin: 0 0 14px; }
.sgn-resa .sgn-resa-champ:last-child { margin-bottom: 0; }

.sgn-resa .sgn-resa-champ label,
.sgn-resa .sgn-resa-titre {
	display: block;
	font-size: 12px;
	color: var(--sgn-libelle);
	margin-bottom: 5px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

.sgn-resa .sgn-resa-titre { margin-bottom: 7px; }

.sgn-resa .sgn-resa-champ input,
.sgn-resa .sgn-resa-champ select,
.sgn-resa .sgn-resa-champ textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 15px;
	color: var(--sgn-texte);
	background: var(--sgn-champ-fond);
	border: 1px solid var(--sgn-champ-bordure);
	border-radius: var(--sgn-rayon);
	line-height: 1.4;
	box-shadow: none;
	min-width: 0;
}

.sgn-resa .sgn-resa-champ input,
.sgn-resa .sgn-resa-champ select { height: 38px; padding: 0 9px; }

/* iOS donne au champ date une largeur propre qui ignore width:100%
   et le fait deborder. On neutralise l'apparence native et on force. */
.sgn-resa .sgn-resa-champ input[type=date],
.sgn-resa .sgn-resa-champ input[type=time] {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	display: block;
}
.sgn-resa .sgn-resa-champ textarea { padding: 8px 9px; resize: vertical; min-height: 60px; }
.sgn-resa .sgn-resa-champ input::placeholder,
.sgn-resa .sgn-resa-champ textarea::placeholder { color: var(--sgn-attenue); opacity: 1; }

.sgn-resa .sgn-resa-champ input:focus,
.sgn-resa .sgn-resa-champ select:focus,
.sgn-resa .sgn-resa-champ textarea:focus {
	border-color: var(--sgn-accent);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--sgn-accent);
}

.sgn-resa .sgn-resa-creneaux { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.sgn-resa .sgn-resa-service {
	flex: 0 0 100%;
	font-size: 12px;
	color: var(--sgn-attenue);
	margin: 0 0 -1px;
}

.sgn-resa .sgn-resa-creneau {
	font: inherit;
	font-size: 14px;
	width: auto;
	min-width: 0;
	text-transform: none;
	letter-spacing: normal;
	text-align: center;
	margin: 0;
	transition: none;
	padding: 7px 13px;
	line-height: 1.2;
	color: var(--sgn-texte);
	background: var(--sgn-champ-fond);
	border: 1px solid var(--sgn-champ-bordure);
	border-radius: var(--sgn-rayon);
	cursor: pointer;
}

.sgn-resa .sgn-resa-creneau:hover:not(:disabled) { border-color: var(--sgn-accent); }

.sgn-resa .sgn-resa-creneau.est-choisi {
	background: var(--sgn-accent);
	border: 2px solid var(--sgn-accent);
	color: var(--sgn-accent-texte);
	padding: 6px 12px;
}

.sgn-resa .sgn-resa-creneau.est-complet {
	background: var(--sgn-inactif-fond);
	border-color: var(--sgn-filet);
	color: var(--sgn-inactif-texte);
	text-decoration: line-through;
	cursor: not-allowed;
}

.sgn-resa .sgn-resa-vide,
.sgn-resa .sgn-resa-aide,
.sgn-resa .sgn-resa-mention {
	font-size: 12.5px;
	color: var(--sgn-attenue);
	margin: 4px 0 0;
	line-height: 1.5;
}

.sgn-resa .sgn-resa-mention { margin: 0 0 16px; }
.sgn-resa .sgn-resa-aide a, .sgn-resa .sgn-resa-mention a { color: inherit; }
.sgn-resa .sgn-resa-envoi { margin: 0; }

.sgn-resa .sgn-resa-bouton {
	font: inherit;
	font-size: 15px;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	transition: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.2;
	width: 100%;
	height: 44px;
	color: var(--sgn-accent-texte);
	background: var(--sgn-accent);
	border: 1px solid var(--sgn-accent);
	border-radius: var(--sgn-rayon);
	cursor: pointer;
}

.sgn-resa .sgn-resa-bouton:hover:not(:disabled) { opacity: .9; }
.sgn-resa .sgn-resa-bouton:disabled { opacity: .55; cursor: wait; }

.sgn-resa .sgn-resa-message:empty { display: none; }

.sgn-resa .sgn-resa-message {
	font-size: 14px;
	line-height: 1.5;
	padding: 11px 13px;
	margin-top: 16px;
	border-radius: var(--sgn-rayon);
	border: 1px solid var(--sgn-champ-bordure);
	color: var(--sgn-texte);
	background: var(--sgn-champ-fond);
}

.sgn-resa .sgn-resa-message.est-erreur { border-color: #b04a44; }
.sgn-resa .sgn-resa-message.est-succes { border-color: #3f7d55; }

/* Apparence nue : aucune mise en forme imposee. */
.sgn-resa--nu .sgn-resa-form {
	background: none;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
}

.sgn-resa--nu .sgn-resa-entete,
.sgn-resa--nu .sgn-resa-filet { display: none; }

.sgn-resa--nu .sgn-resa-champ input,
.sgn-resa--nu .sgn-resa-champ select,
.sgn-resa--nu .sgn-resa-champ textarea,
.sgn-resa--nu .sgn-resa-creneau,
.sgn-resa--nu .sgn-resa-bouton,
.sgn-resa--nu .sgn-resa-message {
	background: none;
	border: none;
	border-radius: 0;
	color: inherit;
	height: auto;
	padding: 0;
	box-shadow: none;
	font: inherit;
}

.sgn-resa--nu .sgn-resa-champ label,
.sgn-resa--nu .sgn-resa-titre,
.sgn-resa--nu .sgn-resa-service,
.sgn-resa--nu .sgn-resa-vide,
.sgn-resa--nu .sgn-resa-aide,
.sgn-resa--nu .sgn-resa-mention {
	color: inherit;
	font-size: inherit;
}
/* Le conteneur peut repeindre ses boutons au survol : on garde la main. */
.sgn-resa .sgn-resa-creneau:hover:not(:disabled) {
	background: var(--sgn-champ-fond);
	color: var(--sgn-texte);
}

.sgn-resa .sgn-resa-creneau.est-choisi:hover {
	background: var(--sgn-accent);
	color: var(--sgn-accent-texte);
}

.sgn-resa .sgn-resa-bouton:hover:not(:disabled) {
	background: var(--sgn-accent);
	color: var(--sgn-accent-texte);
	opacity: .9;
}

/*
 * Telephone. Les paires de champs passent l'une sous l'autre : sur un
 * ecran de 375 px, une date et un menu deroulant cote a cote se
 * compriment au point d'etre illisibles.
 *
 * Les champs passent a 16 px : en dessous, iOS zoome automatiquement a
 * la mise au point et deforme la page.
 */
@media (max-width: 520px) {
	.sgn-resa .sgn-resa-form { padding: 18px 16px; }

	.sgn-resa .sgn-resa-duo { flex-direction: column; gap: 0; }

	.sgn-resa .sgn-resa-duo > .sgn-resa-champ,
	.sgn-resa .sgn-resa-duo > .sgn-resa-champ.sgn-resa-court {
		flex: 1 1 auto;
		width: 100%;
	}

	.sgn-resa .sgn-resa-champ input,
	.sgn-resa .sgn-resa-champ select,
	.sgn-resa .sgn-resa-champ textarea { font-size: 16px; }

	.sgn-resa .sgn-resa-champ input,
	.sgn-resa .sgn-resa-champ select { height: 44px; }

	.sgn-resa .sgn-resa-creneau {
		flex: 1 1 calc(33.333% - 5px);
		padding: 11px 6px;
		font-size: 15px;
	}

	.sgn-resa .sgn-resa-creneau.est-choisi { padding: 10px 5px; }

	.sgn-resa .sgn-resa-bouton { height: 48px; }
}

/*
 * Champs de date. Sur iOS, input[type=date] impose une largeur minimale
 * intrinseque et ignore le width: 100% quand la place manque : le champ
 * deborde alors de la carte. Il faut lui retirer son apparence native et
 * annuler sa largeur minimale. Au passage, iOS centre son contenu, ce qui
 * le desaligne de tous les autres champs.
 */
.sgn-resa .sgn-resa-champ input[type="date"],
.sgn-resa .sgn-resa-champ input[type="time"] {
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
}

/* Le conteneur de champ ne doit jamais laisser deborder son contenu. */
.sgn-resa .sgn-resa-champ { min-width: 0; }
.sgn-resa .sgn-resa-form { overflow-x: hidden; }