/**
 * Resa SMS — CTA + volet coulissant (drawer) + formulaire multi-étapes.
 * Style repris de la maquette (bleu parapente). Toutes les classes sont
 * préfixées « resa- » pour ne pas entrer en collision avec le thème.
 */

:root {
	--resa-bleu-ciel: #4a90d9;
	--resa-bleu-fond: #3a7bc0;
	--resa-bleu-profond: #214e92;
	--resa-bleu-clair: #eaf3fb;
	--resa-texte: #1a2b3c;
	--resa-gris: #6b7a8d;
	--resa-gris-bord: #e2e8f0;
	--resa-blanc: #ffffff;
	--resa-ombre: 0 -8px 40px rgba(33, 78, 146, .18);
	--resa-ombre-lat: -8px 0 40px rgba(33, 78, 146, .18);
	--resa-rayon: 22px;
}

/* --- CTA ---
 * .resa-cta = simple DÉCLENCHEUR (le JS y accroche l'ouverture du volet).
 * Volontairement SANS style visuel imposé : ainsi, appliquée à un bouton natif
 * (Flatsome / UX Builder), elle laisse le bouton garder le look du site.
 * Le style « pilule bleue » n'est appliqué QUE via .resa-cta--pill, utilisé
 * par le bouton généré par le shortcode. */
.resa-cta { cursor: pointer; }

.resa-cta--pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--resa-bleu-profond);
	color: #fff;
	border: none;
	border-radius: 100px;
	padding: 16px 32px;
	font-size: 1.05rem;
	font-weight: 700;
	font-family: inherit;
	box-shadow: 0 8px 30px rgba(33, 78, 146, .28);
	transition: transform .15s ease, box-shadow .15s ease;
}
.resa-cta--pill:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(33, 78, 146, .35); }
.resa-cta--pill svg { width: 20px; height: 20px; }

/* --- CTA « Réserver » du header (bouton de thème lié à #reserver) ---
 * On prend la main sur le style ici (en !important) pour ne plus dépendre des
 * réglages Flatsome : pilule blanche, texte bleu gras, ombre, et remplissage
 * bleu au survol. Cible tout lien vers #reserver. */
a[href$="#reserver" i] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	background: #fff !important;
	color: var(--resa-bleu-profond) !important;
	border: 2px solid #fff !important;
	border-radius: 99px !important;
	font-weight: 800 !important;
	padding: 12px 22px !important;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .18) !important;
	transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
a[href$="#reserver" i]:hover {
	background: var(--resa-bleu-profond) !important;
	color: #fff !important;
	border-color: var(--resa-bleu-profond) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 28px rgba(33, 78, 146, .38) !important;
}
/* L'icône flèche suit la couleur du texte. */
a[href$="#reserver" i] i,
a[href$="#reserver" i] svg { color: inherit !important; }

/* --- Overlay + volet --- */
.resa-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 40, 70, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease;
	z-index: 99998;
	backdrop-filter: blur(2px);
}
.resa-overlay.is-open { opacity: 1; visibility: visible; }

.resa-drawer {
	position: fixed;
	z-index: 99999;
	background: var(--resa-blanc);
	color: var(--resa-texte);
	display: flex;
	flex-direction: column;
	transition: transform .34s cubic-bezier(.22, .61, .36, 1);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
}
/* Robustesse : le thème (Flatsome) ne doit pas casser la mise en page interne. */
.resa-drawer,
.resa-drawer *,
.resa-drawer *::before,
.resa-drawer *::after { box-sizing: border-box; }
/* Flatsome ajoute un margin-bottom à tous les <button> : on le neutralise dans
 * le volet (sinon le chiffre du compteur est décalé et un espace mort apparaît
 * sous les boutons). */
.resa-drawer button { -webkit-appearance: none; appearance: none; margin: 0 !important; }

@media (min-width: 721px) {
	.resa-drawer {
		top: 0; right: 0; height: 100vh; width: 440px; max-width: 100vw;
		border-radius: var(--resa-rayon) 0 0 var(--resa-rayon);
		box-shadow: var(--resa-ombre-lat);
		transform: translateX(100%);
	}
	.resa-drawer.is-open { transform: translateX(0); }
}
@media (max-width: 720px) {
	.resa-drawer {
		left: 0; right: 0; bottom: 0; width: 100%;
		/* dvh = hauteur d'écran RÉELLE sur iOS (hors barres du navigateur). */
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: var(--resa-rayon) var(--resa-rayon) 0 0;
		box-shadow: var(--resa-ombre);
		transform: translateY(100%);
	}
	.resa-drawer.is-open { transform: translateY(0); }
}

.resa-drawer-head {
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--resa-gris-bord);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}
.resa-drawer-titles { flex: 1; min-width: 0; }
.resa-drawer-head h2 { font-size: 1.2rem; font-weight: 800; color: var(--resa-bleu-profond); margin: 0; }
.resa-drawer-head .resa-sub { font-size: .85rem; color: var(--resa-gris); margin-top: 3px; }
/* Logo en haut à droite (remplace l'ancien rond blanc). */
.resa-drawer-logo { height: 44px; width: auto; max-width: 120px; object-fit: contain; flex-shrink: 0; display: block; }
/* Fermeture : croix discrète (plus de « rond blanc »). */
.resa-close {
	width: 30px; height: 30px; padding: 0;
	border: none; background: none;
	cursor: pointer; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--resa-gris); border-radius: 50%; transition: background .15s, color .15s;
}
.resa-close:hover { background: var(--resa-bleu-clair); color: var(--resa-bleu-profond); }

.resa-progress { display: flex; gap: 6px; padding: 14px 24px 0; flex-shrink: 0; }
.resa-progress .resa-bar { height: 4px; flex: 1; border-radius: 100px; background: var(--resa-gris-bord); transition: background .3s; }
.resa-progress .resa-bar.is-active { background: var(--resa-bleu-ciel); }
.resa-progress .resa-bar.is-done { background: var(--resa-bleu-profond); }

.resa-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.resa-step { display: none; animation: resa-fade .3s ease; }
.resa-step.is-visible { display: block; }
@keyframes resa-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.resa-step-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.resa-step-help { font-size: .88rem; color: var(--resa-gris); margin-bottom: 18px; }

/* --- Cartes de vol --- */
.resa-flight {
	border: 2px solid var(--resa-gris-bord); border-radius: 16px;
	padding: 16px 18px; margin-bottom: 12px; cursor: pointer;
	transition: all .15s; display: flex; align-items: center;
	justify-content: space-between; gap: 14px;
}
.resa-flight:hover { border-color: var(--resa-bleu-ciel); background: var(--resa-bleu-clair); }
.resa-flight.is-selected { border-color: var(--resa-bleu-profond); background: var(--resa-bleu-clair); }
.resa-flight-name { font-weight: 700; font-size: 1.02rem; color: var(--resa-bleu-profond); }
.resa-flight-desc { font-size: .85rem; color: var(--resa-gris); margin-top: 2px; }
.resa-flight-price { font-weight: 800; font-size: 1.15rem; color: var(--resa-bleu-profond); white-space: nowrap; }

/* --- Compteur participants --- */
.resa-counter-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.resa-counter-row .resa-lib { font-weight: 700; }
.resa-counter-row .resa-hint { font-size: .82rem; color: var(--resa-gris); margin-top: 2px; }
.resa-counter { display: flex; align-items: center; gap: 14px; }
/* Dimensions forcées (!important) : le thème Flatsome impose un min-height aux
 * <button>, ce qui étirait les ronds en ovale. On garantit un cercle 40x40. */
.resa-counter button {
	width: 40px !important; height: 40px !important;
	min-width: 40px !important; min-height: 40px !important; max-height: 40px !important;
	padding: 0 !important; border-radius: 50%;
	border: 1.5px solid var(--resa-bleu-ciel); background: var(--resa-blanc);
	color: var(--resa-bleu-profond); font-size: 1.4rem; cursor: pointer;
	display: flex; align-items: center; justify-content: center; line-height: 1;
	transition: all .15s; font-family: inherit; flex: 0 0 auto;
}
.resa-counter button:hover:not(:disabled) { background: var(--resa-bleu-ciel); color: #fff; }
.resa-counter button:disabled { opacity: .35; cursor: not-allowed; border-color: var(--resa-gris-bord); }
/* Le nombre : même hauteur que les boutons (40px) + double centrage (flex ET
 * line-height) + reset marges/padding, en !important pour neutraliser le thème
 * qui décalait le chiffre vers le bas sur le site réel. */
.resa-counter .resa-val {
	font-weight: 800; font-size: 1.25rem; color: var(--resa-texte);
	min-width: 30px;
	height: 40px !important;
	line-height: 40px !important;
	margin: 0 !important; padding: 0 !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	vertical-align: middle;
	font-variant-numeric: tabular-nums;
}

/* --- Poids par participant --- */
.resa-weights { margin-top: 8px; }
.resa-weight-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--resa-gris-bord); animation: resa-fade .25s ease; }
.resa-weight-row .resa-num { width: 30px; height: 30px; border-radius: 50%; background: var(--resa-bleu-clair); color: var(--resa-bleu-profond); font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resa-weight-row .resa-wlabel { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; }
.resa-weight-row .resa-winput { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.resa-weight-row input { width: 84px; height: 46px; padding: 0 12px; border: 1.5px solid var(--resa-bleu-ciel); border-radius: 10px; font-size: 1rem; font-family: inherit; text-align: center; background: var(--resa-blanc); color: var(--resa-texte); -webkit-appearance: none; appearance: none; }
.resa-weight-row input::placeholder { color: #b6c2d0; }
.resa-weight-row input:focus { outline: none; border-color: var(--resa-bleu-profond); box-shadow: 0 0 0 3px rgba(74,144,217,.15); }
.resa-weight-row .resa-kg { font-size: .9rem; color: var(--resa-gris); font-weight: 600; }

/* --- Écran d'intro (avant le formulaire) --- */
.resa-intro { text-align: center; padding: 12px 6px 4px; }
.resa-intro-icon { width: 66px; height: 66px; border-radius: 50%; background: var(--resa-bleu-clair); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 2rem; }
.resa-intro h3 { font-size: 1.2rem; color: var(--resa-bleu-profond); margin: 0 0 10px; }
.resa-intro p { color: var(--resa-gris); font-size: .95rem; line-height: 1.55; margin: 0 0 10px; }
.resa-intro .resa-intro-note { font-size: .85rem; color: var(--resa-bleu-profond); background: var(--resa-bleu-clair); border-radius: 10px; padding: 10px 12px; }

/* --- Champs texte --- */
.resa-field { margin-bottom: 16px; }
.resa-field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.resa-field label .resa-optionnel { font-weight: 400; color: var(--resa-gris); font-size: .82rem; }
.resa-field input,
.resa-field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--resa-gris-bord); border-radius: 12px; font-size: 1rem; transition: border .15s; font-family: inherit; }
.resa-field textarea { resize: vertical; min-height: 80px; line-height: 1.4; }
.resa-field input:focus,
.resa-field textarea:focus { outline: none; border-color: var(--resa-bleu-ciel); }
/* Champ date : alignement à gauche + hauteur cohérente (rendu iOS/Safari). */
.resa-field input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
	min-height: 52px;
	background: var(--resa-blanc);
	color: var(--resa-texte);
}
.resa-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.resa-field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }

/* --- Honeypot (invisible) --- */
.resa-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --- Pied : récap + boutons --- */
/* padding-bottom : safe-area iOS pour que « Continuer » ne passe pas sous la barre Safari. */
.resa-foot { border-top: 1px solid var(--resa-gris-bord); padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; background: var(--resa-blanc); }
.resa-recap { font-size: .85rem; color: var(--resa-gris); margin-bottom: 12px; min-height: 20px; }
.resa-recap b { color: var(--resa-bleu-profond); }
.resa-error { font-size: .85rem; color: #b91c1c; margin-bottom: 10px; display: none; }
.resa-error.is-visible { display: block; }
.resa-actions { display: flex; gap: 10px; align-items: stretch; }
/* Sélecteur .resa-actions .resa-btn = spécificité suffisante pour neutraliser
 * les styles de bouton du thème (majuscules, letter-spacing, min-height…). */
.resa-actions .resa-btn {
	flex: 1; padding: 14px 16px; border-radius: 100px;
	font-size: 1rem; font-weight: 700; line-height: 1.2; cursor: pointer;
	border: none; transition: all .15s; font-family: inherit;
	text-transform: none; letter-spacing: normal; white-space: nowrap;
	min-height: 0; min-width: 0;
}
.resa-actions .resa-btn-back { background: var(--resa-blanc); color: var(--resa-bleu-profond); border: 1.5px solid var(--resa-gris-bord); flex: 0 0 auto; padding: 14px 20px; }
.resa-actions .resa-btn-back:hover { background: var(--resa-bleu-clair); }
.resa-actions .resa-btn-next { background: var(--resa-bleu-profond); color: #fff; }
.resa-actions .resa-btn-next:hover:not(:disabled) { background: #1a3f78; }
.resa-actions .resa-btn-next:disabled { background: var(--resa-gris-bord); color: var(--resa-gris); cursor: not-allowed; }

/* --- Confirmation --- */
.resa-done { text-align: center; padding: 30px 10px; }
.resa-done-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--resa-bleu-clair); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.resa-done-icon svg { width: 38px; height: 38px; color: var(--resa-bleu-profond); }
.resa-done h3 { font-size: 1.3rem; color: var(--resa-bleu-profond); margin-bottom: 8px; }
.resa-done p { color: var(--resa-gris); font-size: .95rem; line-height: 1.5; }

/* Empêche le défilement de l'arrière-plan quand le volet est ouvert. */
body.resa-no-scroll { overflow: hidden; }

/* ----------------------------------------------------------------------------
 * Peaufinage mobile : espacements resserrés, en-tête et compteur ajustés.
 * -------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.resa-drawer-head { padding: 16px 18px 12px; }
	.resa-drawer-logo { height: 40px; max-width: 104px; }
	.resa-progress { padding: 12px 18px 0; }
	.resa-body { padding: 16px 18px; }
	.resa-step-help { margin-bottom: 14px; }

	/* Compteur : libellé qui respire, boutons alignés à droite. */
	.resa-counter-row { padding: 14px 0; gap: 12px; }
	.resa-counter-row .resa-lib { font-size: .98rem; }
	.resa-counter { gap: 14px; }

	/* Date : un poil plus compacte. */
	.resa-field input[type="date"] { min-height: 50px; }

	.resa-foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }

	/* Boutons : compacts et sur une seule ligne. */
	.resa-actions { gap: 8px; }
	.resa-actions .resa-btn { padding: 13px 12px; font-size: .95rem; }
	.resa-actions .resa-btn-back { padding: 13px 16px; }
}