/* Formulaire de réservation : formulaire sur fond de lin, carte du prix sombre.
   Rouge réservé aux erreurs ; focus et choix en ardoise. */
.cc-resa {
	--r-texte: var(--cc-encre, #18221F);
	--r-doux: var(--cc-granit, #5A5850);
	--r-ligne: var(--cc-argent, #D6CEC0);
	--r-champ: #8C8578; /* contour des champs : 3:1 sur le lin et sur le blanc (WCAG 1.4.11) */
	--r-accent: var(--cc-ardoise, #1E3531);
	--r-erreur: var(--cc-erreur, #A11F27);
	color: var(--r-texte);
}
.cc-resa__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
@media (max-width: 860px) { .cc-resa__corps { grid-template-columns: 1fr; } }

.cc-resa__groupe { border: 0; margin: 0 0 var(--wp--preset--spacing--50, 2.5rem); padding: 0; min-width: 0; }
.cc-resa__groupe legend {
	font-family: var(--cc-serif, Georgia, serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--intertitre, 1.25rem);
	line-height: 1.2;
	padding: 0;
	margin-bottom: 0.9rem;
	color: var(--r-accent);
}
.cc-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 1.25rem; }
.cc-champ { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.cc-champ--large { grid-column: 1 / -1; }
.cc-resa label, .cc-resa summary { font-weight: 700; font-size: var(--wp--preset--font-size--petit, 1rem); color: var(--r-texte); }
.cc-resa label small, .cc-resa summary small { font-weight: 400; font-size: var(--wp--preset--font-size--note, 0.875rem); color: var(--r-doux); }
.cc-resa input[type="text"], .cc-resa input[type="email"], .cc-resa input[type="tel"],
.cc-resa input[type="date"], .cc-resa input[type="time"], .cc-resa select, .cc-resa textarea {
	font: inherit;
	font-size: 1.0625rem;
	color: var(--r-texte);
	background: #fff;
	border: 1px solid var(--r-champ);
	border-radius: 2px;
	padding: 0.65rem 0.8rem;
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
}
.cc-resa textarea { min-height: 6.5rem; resize: vertical; }
.cc-resa :is(input, select, textarea):focus { border-color: var(--r-accent); box-shadow: 0 0 0 2px var(--r-accent); outline: none; }
.cc-resa :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--r-erreur); box-shadow: inset 3px 0 0 var(--r-erreur); }
.cc-resa :is(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: inset 3px 0 0 var(--r-erreur), 0 0 0 2px var(--r-accent); }
.cc-champ__aide { margin: 0; font-size: var(--wp--preset--font-size--note, 0.875rem); line-height: 1.5; color: var(--r-doux) !important; min-height: 1.2em; }
.cc-champ__aide:empty { min-height: 0; }
.cc-champ__aide a { color: var(--r-accent); font-weight: 600; }
.cc-champ__aide.est-libre { color: #1F6B45 !important; }
.cc-champ__aide.est-pris { color: var(--r-erreur) !important; }
#cc_date_regle.est-actif { color: var(--r-texte) !important; background: #fff; border-left: 3px solid var(--r-accent); padding: 0.5rem 0.7rem; }

/* Erreurs : lisibles sur le lin, signées d'un petit losange. */
.cc-resa p.cc-erreur {
	display: flex;
	gap: 0.45rem;
	align-items: baseline;
	margin: 0.35rem 0 0;
	font-size: var(--wp--preset--font-size--note, 0.875rem);
	line-height: 1.5;
	font-weight: 600;
	color: var(--r-erreur) !important;
}
.cc-resa p.cc-erreur::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; background: currentColor; transform: translateY(-0.05em) rotate(45deg); }

/* Choix en pastilles (occasion, formation). */
.cc-choix { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cc-choix__item { position: relative; margin: 0; font-weight: 400 !important; }
.cc-choix__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cc-choix__item span {
	display: block;
	padding: 0.65rem 1rem;
	background: #fff;
	border: 1px solid var(--r-champ);
	border-radius: 2px;
	color: var(--r-texte);
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cc-choix__item:hover span { border-color: var(--r-accent); }
.cc-choix__item input:checked + span { background: var(--r-accent); color: #fff; border-color: var(--r-accent); }
.cc-choix__item input:focus-visible + span { outline: 2px solid var(--r-accent); outline-offset: 2px; }
.cc-choix__item.est-indisponible span { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.cc-choix--musiciens { flex-direction: column; align-items: stretch; }
@media (min-width: 640px) { .cc-choix--musiciens { flex-direction: row; } .cc-choix--musiciens .cc-choix__item { flex: 1 1 0; } }
.cc-choix--musiciens .cc-choix__item { display: flex; }
.cc-choix--musiciens .cc-choix__item span { flex: 1; display: flex; align-items: center; }

.cc-case { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 0.6rem; font-weight: 400 !important; cursor: pointer; }
.cc-case input { width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0; accent-color: var(--r-accent); flex: none; }
.cc-case small { color: var(--r-doux); }
.cc-resa a { color: var(--r-accent); }
.cc-resa__cg { margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--r-ligne); max-width: var(--cc-mesure, 34em); }
.cc-resa__cg .cc-case { margin: 0; }
.cc-resa__cg .cc-case input { width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; }
.cc-resa__cg a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

.cc-details { margin-top: 1.25rem; }
.cc-details summary { cursor: pointer; list-style-position: inside; }
.cc-details summary:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
.cc-details[open] summary { margin-bottom: 1rem; }

/* Récapitulatif du prix : carte sombre. */
.cc-resa__prix {
	--r-texte: #fff;
	--r-doux: rgba(255, 255, 255, 0.78);
	--r-ligne: rgba(255, 255, 255, 0.22);
	position: sticky;
	top: 1.25rem;
	background: var(--cc-ardoise, #1E3531);
	border-radius: 2px;
	padding: 1.5rem 1.5rem 1.6rem;
	color: #fff;
}
.cc-resa__prix :focus-visible { outline-color: #fff; }
.cc-resa__prix-titre { font-family: var(--cc-serif, Georgia, serif); font-weight: 600; font-size: var(--wp--preset--font-size--intertitre, 1.25rem); line-height: 1.2; margin: 0 0 1rem; color: #fff; }
.cc-resa__lignes p {
	display: flex; justify-content: space-between; gap: 1rem;
	margin: 0; padding: 0.45rem 0; border-bottom: 1px solid var(--r-ligne);
	font-size: var(--wp--preset--font-size--petit, 1rem); color: var(--r-doux) !important;
}
.cc-resa__lignes p span:last-child { white-space: nowrap; color: #fff; font-family: var(--cc-serif, Georgia, serif); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.cc-resa__lignes .cc-resa__devis { display: block; color: #fff !important; border: 0; }
.cc-resa__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0.9rem 0 0.2rem; color: #fff !important; line-height: 1.2; }
.cc-resa__total b { font-family: var(--cc-serif, Georgia, serif); font-weight: 600; font-size: 1.75rem; font-variant-numeric: lining-nums tabular-nums; }
.cc-resa__acompte, .cc-resa__repas { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--petit, 1rem); color: var(--r-doux) !important; }
.cc-resa__repas { color: #fff !important; }
.cc-resa__note { font-size: var(--wp--preset--font-size--note, 0.875rem); line-height: 1.5; color: var(--r-doux) !important; margin: 0.6rem 0 1.25rem; }
.cc-resa__envoyer {
	font: inherit; font-weight: 700; font-size: 1.0625rem; color: var(--cc-ardoise, #1E3531);
	background: var(--cc-neige, #F4EFE6); border: 0; border-radius: 2px;
	padding: 0.9rem 1.4rem; width: 100%; min-height: 44px; cursor: pointer;
}
.cc-resa__envoyer:hover { background: #fff; }
.cc-verif__ok {
	font: inherit; font-weight: 700; font-size: 1.0625rem; color: var(--cc-neige, #F4EFE6);
	background: var(--cc-ardoise, #1E3531); border: 0; border-radius: 2px;
	padding: 0.9rem 1.4rem; min-height: 44px; cursor: pointer;
}
.cc-verif__ok:hover { background: var(--cc-encre, #18221F); }
.cc-resa__envoyer:disabled, .cc-verif__ok:disabled { opacity: 0.6; cursor: progress; }

/* Téléphone : total sur une ligne en bas d'écran, retiré quand l'accroche, la carte du prix ou le pied sont visibles. */
.cc-resa__barre { display: none; }
@media (max-width: 860px) {
	.cc-resa__barre {
		display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
		position: fixed; inset: auto 0 0; z-index: 30;
		padding: 0.55rem 1.25rem calc(0.55rem + env(safe-area-inset-bottom));
		background: var(--cc-ardoise, #1E3531); color: #fff;
		box-shadow: 0 -1px 0 rgba(244, 239, 230, 0.18);
		transition: transform 0.2s ease;
	}
	.cc-resa__barre span { display: flex; align-items: baseline; gap: 0.45rem; white-space: nowrap; font-size: var(--wp--preset--font-size--note, 0.875rem); color: rgba(255, 255, 255, 0.78); }
	.cc-resa__barre b { font-family: var(--cc-serif, Georgia, serif); font-weight: 600; font-size: 1.25rem; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
	.cc-resa__barre button { font: inherit; font-weight: 700; white-space: nowrap; color: var(--cc-ardoise, #1E3531); background: var(--cc-neige, #F4EFE6); border: 0; border-radius: 2px; min-height: 44px; padding: 0.6rem 1.1rem; cursor: pointer; }
	.cc-resa__barre.est-cachee { transform: translateY(110%); }
}

/* Vérification avant envoi : toujours entière à l'écran, boutons visibles. */
.cc-verif {
	box-sizing: border-box;
	width: min(32rem, calc(100% - 1.5rem));
	max-width: none;
	max-height: calc(100dvh - 1.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 2px;
	padding: 1.75rem 1.5rem 0;
	background: var(--cc-neige, #F4EFE6);
	color: var(--cc-encre, #18221F);
}
.cc-verif::backdrop { background: rgba(12, 22, 19, 0.65); }
html:has(.cc-verif[open]) { overflow: hidden; }
.cc-verif :focus-visible { outline: 2px solid var(--cc-ardoise, #1E3531); outline-offset: 3px; }
.cc-verif h2 { font-family: var(--cc-serif, Georgia, serif); font-weight: 600; font-size: var(--wp--preset--font-size--grand, 1.75rem); line-height: 1.12; margin: 0 0 1rem; color: var(--cc-ardoise, #1E3531); }
.cc-verif__liste { display: grid; grid-template-columns: 8rem 1fr; gap: 0.4rem 1rem; margin: 0 0 1.1rem; }
.cc-verif__liste dt { color: var(--cc-granit, #5A5850); }
.cc-verif__liste dd { margin: 0; }
.cc-verif__info { font-size: var(--wp--preset--font-size--note, 0.875rem); line-height: 1.5; color: var(--cc-granit, #5A5850) !important; margin: 0 0 0.5rem; }
.cc-verif__actions {
	position: sticky; bottom: 0;
	display: flex; gap: 0.75rem; justify-content: flex-end; flex-wrap: wrap;
	background: var(--cc-neige, #F4EFE6);
	box-shadow: 0 -1px 0 var(--cc-argent, #D6CEC0);
	padding: 0.75rem 0 1.5rem;
}
.cc-verif__retour {
	font: inherit; font-weight: 700; background: transparent; color: var(--cc-ardoise, #1E3531);
	border: 1px solid currentColor; border-radius: 2px; padding: 0.85rem 1.2rem; min-height: 44px; cursor: pointer;
}
@media (max-width: 480px) {
	.cc-verif { padding-inline: 1.25rem; }
	.cc-verif__liste { grid-template-columns: 1fr; gap: 0; }
	.cc-verif__liste dd { margin-bottom: 0.5rem; }
	.cc-verif__actions > * { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .cc-choix__item span, .cc-resa__barre { transition: none; } }