/* Module de réservation — calendrier et formulaire public */

.reservation-onglet {
	padding: 12px 24px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	transition: all .15s ease;
}
.reservation-onglet-actif {
	background: #14161B;
	color: #fff;
	border-color: #14161B;
}

.reservation-calendrier {
	background: #fff;
	border: 1px solid #e7e4dd;
	border-radius: 10px;
	padding: 20px;
}

.reservation-calendrier-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-size: 18px;
	font-weight: 700;
}
.reservation-calendrier-entete button {
	background: none;
	border: 1px solid #ddd;
	border-radius: 6px;
	width: 36px;
	height: 36px;
	font-size: 18px;
	cursor: pointer;
}
.reservation-calendrier-entete button:hover { background: #f5f3ef; }

.reservation-calendrier-jours-semaine {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-bottom: 8px;
	font-weight: 600;
}

.reservation-calendrier-grille {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.reservation-jour {
	aspect-ratio: 1;
	border: 1px solid #eee;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	transition: all .15s ease;
	position: relative;
}
.reservation-jour:hover:not(:disabled) { border-color: #09558E; background: rgba(9,85,142,.08); }
.reservation-jour-vide { visibility: hidden; }
.reservation-jour-passe { color: #ccc; cursor: not-allowed; background: #fafafa; }
.reservation-jour-occupe::after {
	content: "";
	position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
	width: 5px; height: 5px; border-radius: 50%; background: #D93B33;
}
.reservation-jour-majore { color: #B07515; font-weight: 600; }
.reservation-jour-aujourdhui { border-color: #09558E; border-width: 2px; }
.reservation-jour-choisi { background: #14161B !important; color: #fff !important; border-color: #14161B !important; }

.reservation-calendrier-legende {
	display: flex; gap: 18px; flex-wrap: wrap;
	margin-top: 16px; font-size: 12px; color: #666;
}
.legende-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.legende-libre { background: #2F9E67; }
.legende-occupe { background: #D93B33; }
.legende-majore { background: #B07515; }

.reservation-panneau {
	background: #fff;
	border: 1px solid #e7e4dd;
	border-radius: 10px;
	padding: 24px;
	min-height: 200px;
}

.reservation-formulaire h3 { text-transform: capitalize; margin-top: 0; }

.reservation-alerte-majoration {
	background: #FEF3E2; color: #B07515; padding: 10px 14px; border-radius: 6px; font-size: 13px;
}

.reservation-prix {
	display: flex; align-items: baseline; gap: 8px;
	background: #F5F3EF; padding: 14px 18px; border-radius: 8px; margin: 16px 0;
}
.reservation-prix strong { font-size: 24px; }

.reservation-confirmation { text-align: center; padding: 30px 10px; }
.reservation-confirmation i { font-size: 42px; color: #2F9E67; margin-bottom: 14px; display: block; }

.reservation-erreur { color: #D93B33; font-size: 13px; margin-top: 10px; }

/* nouveau formulaire : boutons de durée, sections distinctes, résumé et animation de prix */

.reservation-duree-boutons { display: flex; gap: 8px; }
.reservation-duree-btn {
	flex: 1;
	padding: 10px 8px;
	border: 1px solid #ddd;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	transition: all .15s ease;
}
.reservation-duree-btn:hover { border-color: #09558E; }
.reservation-duree-btn-actif { background: #14161B; color: #fff; border-color: #14161B; }

.reservation-section-creneau {
	background: #F5F3EF;
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 20px;
}

.reservation-resume-creneau {
	font-size: 13px;
	color: #444;
	font-style: italic;
	margin: 12px 0 0 0;
}

.reservation-prix {
	display: flex; align-items: baseline; gap: 8px;
	background: #fff; padding: 14px 18px; border-radius: 8px; margin: 12px 0 0 0;
	border: 1px solid #e7e4dd;
	transition: box-shadow .3s ease, border-color .3s ease;
}
.reservation-prix-maj { box-shadow: 0 0 0 3px rgba(9,85,142,.25); border-color: #09558E; }

.reservation-section-coordonnees h4 { font-size: 16px; margin-bottom: 14px; }

/* plage de jours actuellement sélectionnée (journée(s) ou semaine(s)) — mise en évidence
   discrète sur le calendrier, distincte du jour cliqué lui-même (choisi = fond noir plein) */
.reservation-jour-dans-plage:not(.reservation-jour-choisi) {
	background: rgba(9,85,142,.15);
	border-color: #09558E;
}

/* bouton principal du formulaire — couleur de la charte du site public (#09558E), pas le bleu
   générique de btn-primary qui ne correspondait pas */
.reservation-btn-principal {
	background-color: #09558E;
	border: 1px solid #09558E;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 13px;
	padding: 12px 24px;
	border-radius: 10px;
	cursor: pointer;
	width: 100%;
	transition: background-color .15s ease;
}
.reservation-btn-principal:hover { background-color: #019BE2; border-color: #019BE2; }
.reservation-btn-principal:disabled { opacity: .6; cursor: not-allowed; }

/* jours des mois voisins (avant/après le mois affiché) — grisés mais cliquables (sauf s'ils
   sont dans le passé), pour basculer directement sur ce mois et ce jour */
.reservation-jour-hors-mois {
	color: #bbb;
	background: #fafafa;
}
.reservation-jour-hors-mois:hover:not(:disabled) { color: #09558E; border-color: #09558E; }
.reservation-jour-hors-mois:disabled { cursor: not-allowed; color: #ddd; }

/* jour déjà occupé : distinct d'un jour simplement "passé", pour que le curseur "interdit"
   et l'infobulle expliquent pourquoi il n'est pas cliquable */
.reservation-jour-occupe:disabled {
	cursor: not-allowed;
	background: #FEF0EF;
}

.reservation-alerte-conflit {
	background: #FEF0EF; color: #D93B33; padding: 10px 14px; border-radius: 6px; font-size: 13px;
	margin: 10px 0 0 0;
}

/* indicateur d'étapes — remplace le message de placeholder initial et se retrouve en version
   compacte en haut du formulaire une fois une date choisie, pour garder le fil du parcours */

.reservation-etapes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 0 4px 0;
}

.reservation-etape {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 64px;
}

.reservation-etape-numero {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	background: #eee;
	color: #999;
}

.reservation-etape-libelle {
	font-size: 11px;
	text-align: center;
	color: #999;
	line-height: 1.2;
}

.reservation-etape-trait {
	height: 2px;
	background: #eee;
	flex: 1;
	max-width: 40px;
	margin-bottom: 20px;
}

.reservation-etape-active .reservation-etape-numero { background: #09558E; color: #fff; }
.reservation-etape-active .reservation-etape-libelle { color: #09558E; font-weight: 600; }

.reservation-etape-faite .reservation-etape-numero { background: #2F9E67; color: #fff; }
.reservation-etape-faite .reservation-etape-libelle { color: #2F9E67; }

.reservation-etape-grise .reservation-etape-numero { background: #f2f2f2; color: #ccc; }
.reservation-etape-grise .reservation-etape-libelle { color: #ccc; }

.reservation-etapes-invite {
	text-align: center;
	color: #888;
	font-size: 13px;
	margin: 18px 0 0 0;
}

.reservation-etapes-compact {
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eee;
}
.reservation-etapes-compact .reservation-etape-numero { width: 26px; height: 26px; font-size: 12px; }
.reservation-etapes-compact .reservation-etape-libelle { font-size: 10px; }

/* écran de choix de l'espace (étape 1) — deux grandes cartes cliquables */
.reservation-choix-ressource {
	display: flex;
	gap: 20px;
	max-width: 700px;
	margin: 30px auto 0 auto;
	flex-wrap: wrap;
	justify-content: center;
}

.reservation-carte-ressource {
	flex: 1;
	min-width: 240px;
	background: #fff;
	border: 2px solid #e7e4dd;
	border-radius: 12px;
	padding: 30px 24px;
	text-align: center;
	cursor: pointer;
	transition: all .15s ease;
}
.reservation-carte-ressource:hover { border-color: #09558E; box-shadow: 0 6px 20px rgba(9,85,142,.12); transform: translateY(-2px); }
.reservation-carte-ressource i { font-size: 34px; color: #09558E; margin-bottom: 14px; display: block; }
.reservation-carte-titre { font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.reservation-carte-desc { font-size: 13px; color: #888; line-height: 1.4; }

/* barre "ressource sélectionnée" au-dessus du calendrier, une fois l'étape 1 passée — rappelle
   ce qui a été choisi et permet d'y revenir sans perdre sa place */
.reservation-ressource-selectionnee {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 20px;
}
.reservation-ressource-selectionnee span {
	font-weight: 700;
	font-size: 15px;
	color: #09558E;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.reservation-ressource-selectionnee a {
	font-size: 12px;
	color: #888;
	text-decoration: underline;
}
.reservation-ressource-selectionnee a:hover { color: #09558E; }

.reservation-ressource-rappel {
	display: inline-block;
	background: #E8F2F8;
	color: #09558E;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 3px 10px;
	border-radius: 20px;
	margin: 0 0 12px 0;
}