/* VCJ – Opération de Noël : charte de la page Noël entreprises */
.vcj-noel {
	--vn-rouge: #B21919;
	--vn-rouge-sombre: #8F1414;
	--vn-rouge-voile: #B2191910;
	--vn-fond: #09390B45;        /* fond sauge de la page */
	--vn-bouton: #09390C8C;      /* bouton sauge de la page */
	--vn-vert: #2F4B33;          /* vert foncé pour le texte */
	--vn-encre: #2A2A2A;
	--vn-gris: #6B6B6B;
	--vn-trait: #D9DDD6;
	--vn-papier: #FFFFFF;
	--vn-rayon: 4px;

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	color: var(--vn-encre);
	font-size: 16px;
	line-height: 1.5;
}
.vcj-noel[hidden] { display: none; }
html.vcj-noel-lock { overflow: hidden; }

.vcj-noel *, .vcj-noel *::before, .vcj-noel *::after { box-sizing: border-box; }
.vcj-noel [hidden] { display: none !important; }

.vcj-noel__overlay {
	position: absolute;
	inset: 0;
	background: rgba(24, 28, 24, .62);
}

.vcj-noel__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	background: var(--vn-papier);
	border-radius: var(--vn-rayon);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	overflow: hidden;
	outline: none;
}
@media (prefers-reduced-motion: no-preference) {
	.vcj-noel:not([hidden]) .vcj-noel__dialog { animation: vcj-noel-in .28s ease-out; }
	@keyframes vcj-noel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Mode intégré dans la page */
.vcj-noel--inline { position: static; padding: 0; z-index: auto; }
.vcj-noel--inline .vcj-noel__dialog { max-height: none; box-shadow: none; border: 1px solid var(--vn-trait); margin: 0 auto; }

/* ---------- Bandeau ---------- */
.vcj-noel__head {
	position: relative;
	background: var(--vn-rouge);
	color: #fff;
	text-align: center;
	padding: 22px 56px 14px;
}
.vcj-noel__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.vcj-noel__close:hover { background: rgba(255, 255, 255, .14); }
.vcj-noel__kicker {
	margin: 0;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .9;
}
.vcj-noel .vcj-noel__title {
	margin: 4px 0 2px;
	color: #fff;
	font-size: clamp(20px, 3.4vw, 27px);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.vcj-noel__stars { margin: 0 0 12px; font-size: 13px; letter-spacing: .5em; opacity: .85; }

.vcj-noel__steps {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vn;
}
.vcj-noel__steps li {
	counter-increment: vn;
	flex: 1 1 0;
	max-width: 110px;
	padding-top: 8px;
	border-top: 2px solid rgba(255, 255, 255, .3);
	font-size: 12px;
	color: rgba(255, 255, 255, .72);
	white-space: nowrap;
}
.vcj-noel__steps li::before { content: counter(vn) ". "; }
.vcj-noel__steps li.is-done { border-top-color: rgba(255, 255, 255, .7); }
.vcj-noel__steps li.is-active { border-top-color: #fff; color: #fff; font-weight: 600; }

/* ---------- Corps ---------- */
.vcj-noel__form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; margin: 0; }
.vcj-noel__body { flex: 1 1 auto; overflow-y: auto; padding: 26px 32px 20px; -webkit-overflow-scrolling: touch; }
.vcj-noel--inline .vcj-noel__body { overflow: visible; }

.vcj-noel .vcj-noel__h {
	margin: 0 0 6px;
	color: var(--vn-rouge);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.3;
}
.vcj-noel__lead { margin: 0 0 20px; color: var(--vn-gris); font-size: 15px; max-width: 62ch; }
.vcj-noel__sub { margin: 22px 0 10px; font-weight: 600; color: var(--vn-vert); }

.vcj-noel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.vcj-noel__field { margin: 0 0 14px; }
.vcj-noel__grid .vcj-noel__field { margin: 0; }
.vcj-noel__field--wide { grid-column: 1 / -1; }
.vcj-noel__field label, .vcj-noel__session-calc label {
	display: block;
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vn-encre);
}
.vcj-noel__req { color: var(--vn-rouge); }
.vcj-noel__opt { font-weight: 400; color: var(--vn-gris); font-size: 13px; }

.vcj-noel input[type="text"],
.vcj-noel input[type="email"],
.vcj-noel input[type="tel"],
.vcj-noel input[type="date"],
.vcj-noel input[type="number"],
.vcj-noel textarea {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid #BFC6BD;
	border-radius: var(--vn-rayon);
	background: #fff;
	color: var(--vn-encre);
	font: inherit;
	font-size: 16px;
	box-shadow: none;
}
.vcj-noel textarea { min-height: 0; resize: vertical; }
.vcj-noel input:focus-visible,
.vcj-noel textarea:focus-visible,
.vcj-noel button:focus-visible,
.vcj-noel a:focus-visible,
.vcj-noel__choice:focus-within,
.vcj-noel__pill:focus-within {
	outline: 2px solid var(--vn-vert);
	outline-offset: 2px;
}
.vcj-noel .is-invalid { border-color: var(--vn-rouge) !important; background-color: #FFF8F8; }
.vcj-noel__err { margin: 6px 0 0; color: var(--vn-rouge); font-size: 14px; }
.vcj-noel__alert {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-left: 4px solid var(--vn-rouge);
	background: var(--vn-rouge-voile);
	color: var(--vn-rouge-sombre);
}
.vcj-noel__loading { padding: 40px 0; text-align: center; color: var(--vn-gris); }
.vcj-noel__closed { padding: 20px 0; text-align: center; }
.vcj-noel__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vcj-noel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Dates : additionnelles et alternatives ---------- */
.vcj-noel__field--main input[type="date"] { max-width: 260px; }
.vcj-noel__dates {
	margin: 18px 0 0;
	padding: 16px 18px;
	border-radius: var(--vn-rayon);
	border-left: 4px solid;
}
.vcj-noel__dates--add { border-left-color: var(--vn-rouge); background: var(--vn-rouge-voile); }
.vcj-noel__dates--alt { border-left-color: var(--vn-vert); background: #09390B14; }
.vcj-noel__dates-name { margin: 0 0 4px; font-weight: 600; font-size: 16px; }
.vcj-noel__dates--add .vcj-noel__dates-name { color: var(--vn-rouge); }
.vcj-noel__dates--alt .vcj-noel__dates-name { color: var(--vn-vert); }
.vcj-noel__sym { display: inline-block; width: 1.3em; }
.vcj-noel__dates-help { margin: 0 0 10px; font-size: 14px; color: var(--vn-encre); max-width: 62ch; }
.vcj-noel__date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.vcj-noel__date-row input[type="date"] { width: auto; flex: 0 1 260px; }
.vcj-noel__date-row .vcj-noel__err { flex-basis: 100%; margin: 0; }
.vcj-noel__remove {
	width: 36px;
	height: 36px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--vn-gris);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.vcj-noel__remove:hover { border-color: var(--vn-trait); color: var(--vn-rouge); }
.vcj-noel__add {
	padding: 6px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.vcj-noel__dates--add .vcj-noel__add { color: var(--vn-rouge); }
.vcj-noel__dates--alt .vcj-noel__add { color: var(--vn-vert); }

/* ---------- Participants ---------- */
.vcj-noel__session {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--vn-trait);
}
.vcj-noel__session:first-child { border-top: 1px solid var(--vn-trait); }
.vcj-noel__tag { display: block; font-size: 13px; font-weight: 600; }
.vcj-noel__session--main .vcj-noel__tag { color: var(--vn-vert); }
.vcj-noel__session--add .vcj-noel__tag { color: var(--vn-rouge); }
.vcj-noel__session-day { font-size: 16px; }
.vcj-noel__session-day::first-letter { text-transform: uppercase; }
.vcj-noel__session-calc { display: grid; grid-template-columns: 90px auto 90px; align-items: center; column-gap: 10px; }
.vcj-noel__session-calc label { grid-column: 1 / -1; font-size: 13px; }
.vcj-noel__session-calc input[type="number"] { text-align: center; }
.vcj-noel__x { color: var(--vn-gris); white-space: nowrap; }
.vcj-noel__amount { text-align: right; font-variant-numeric: tabular-nums; }
.vcj-noel__session .vcj-noel__err { flex-basis: 100%; margin: 0; }
.vcj-noel__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 16px;
	padding: 14px 18px;
	background: var(--vn-fond);
	border-radius: var(--vn-rayon);
	color: var(--vn-vert);
}
.vcj-noel__total strong { font-size: 22px; font-variant-numeric: tabular-nums; }

/* ---------- Choix (lieu, coffrets) ---------- */
.vcj-noel__fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.vcj-noel__fieldset legend { margin: 0 0 10px; padding: 0; font-weight: 600; font-size: 15px; }
.vcj-noel__choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--vn-trait);
	border-radius: var(--vn-rayon);
	cursor: pointer;
}
.vcj-noel__choice:hover { border-color: var(--vn-bouton); }
.vcj-noel__choice:has(input:checked) { border-color: var(--vn-vert); background: #09390B12; }
.vcj-noel__choice.is-disabled { opacity: .5; cursor: not-allowed; }
.vcj-noel__choice input, .vcj-noel__pill input { margin: 4px 0 0; accent-color: var(--vn-rouge); width: 18px; height: 18px; flex: none; }
.vcj-noel__choice-body { flex: 1 1 auto; }
.vcj-noel__choice-body strong { display: block; font-weight: 600; }
.vcj-noel__choice-body > span { display: block; font-size: 14px; color: var(--vn-gris); }
.vcj-noel__link { flex: none; align-self: center; color: var(--vn-rouge); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.vcj-noel__fieldset--inline legend { float: left; width: 100%; }
.vcj-noel__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px 8px 0;
	padding: 8px 14px;
	border: 1px solid var(--vn-trait);
	border-radius: 999px;
	cursor: pointer;
}
.vcj-noel__pill input { margin: 0; }
.vcj-noel__pill:has(input:checked) { border-color: var(--vn-vert); background: #09390B12; }
.vcj-noel__note { margin: 4px 0 0; font-size: 14px; color: var(--vn-rouge-sombre); }
.vcj-noel__note--info { margin: -4px 0 10px; color: var(--vn-vert); }
.vcj-noel__coffret-qte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; margin: -4px 0 18px; }
.vcj-noel__coffret-qte .vcj-noel__field { margin: 0; width: 160px; }
.vcj-noel__estim { flex: 1 1 260px; margin: 0 0 10px; font-size: 14px; color: var(--vn-vert); }

/* ---------- Récapitulatif ---------- */
.vcj-noel__recap-block { padding: 14px 0; border-top: 1px solid var(--vn-trait); }
.vcj-noel__recap-head { display: flex; justify-content: space-between; align-items: baseline; }
.vcj-noel .vcj-noel__recap-head h4 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--vn-vert); }
.vcj-noel__edit { border: 0; background: none; padding: 4px 0; color: var(--vn-rouge); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vcj-noel__recap dl { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 6px 16px; margin: 0; }
.vcj-noel__recap dt { color: var(--vn-gris); font-size: 14px; }
.vcj-noel__recap dd { margin: 0; font-size: 15px; }
.vcj-noel__grand {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 6px 0 18px;
	padding: 14px 18px;
	background: var(--vn-fond);
	border-radius: var(--vn-rayon);
	color: var(--vn-vert);
}
.vcj-noel__grand strong { font-size: 24px; color: var(--vn-rouge); font-variant-numeric: tabular-nums; }
.vcj-noel__consent { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; font-size: 14px; cursor: pointer; }
.vcj-noel__consent input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--vn-rouge); flex: none; }
.vcj-noel__consent > span { flex: 1 1 0; }
.vcj-noel__consent a { color: var(--vn-rouge); }
.vcj-noel__consent .vcj-noel__err { flex-basis: 100%; }

/* ---------- Envoyé ---------- */
.vcj-noel__done { padding: 12px 0 8px; text-align: center; outline: none; }
.vcj-noel__done p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.vcj-noel__done-check { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #1a1a1a; }
.vcj-noel .vcj-noel__done-title { margin: 0 0 12px; color: #1a1a1a; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 400; line-height: 1.3; }
.vcj-noel__done-msg { font-style: italic; color: #3a2e26; line-height: 1.6; }

/* ---------- Pied ---------- */
.vcj-noel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 32px;
	border-top: 1px solid var(--vn-trait);
	background: #fff;
}
.vcj-noel__mini { margin: 0; color: var(--vn-vert); font-size: 15px; }
.vcj-noel__actions { display: flex; gap: 10px; margin-left: auto; }
.vcj-noel__btn {
	min-height: 46px;
	padding: 10px 24px;
	border: 1px solid transparent;
	border-radius: var(--vn-rayon);
	background: var(--vn-bouton);
	color: #fff;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
	transition: background-color .15s;
}
.vcj-noel__btn:hover { background: var(--vn-vert); }
.vcj-noel__btn--ghost { background: transparent; border-color: var(--vn-trait); color: var(--vn-vert); }
.vcj-noel__btn--ghost:hover { background: #09390B12; }
.vcj-noel__btn--rouge { background: var(--vn-rouge); }
.vcj-noel__btn--rouge:hover { background: var(--vn-rouge-sombre); }
.vcj-noel__btn[disabled] { opacity: .6; cursor: wait; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.vcj-noel { padding: 0; }
	.vcj-noel__dialog { max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; }
	.vcj-noel--inline .vcj-noel__dialog { height: auto; }
	.vcj-noel__head { padding: 16px 48px 12px; }
	.vcj-noel__steps li { font-size: 0; }
	.vcj-noel__steps li::before { font-size: 12px; content: counter(vn); }
	.vcj-noel__steps li.is-active { font-size: 12px; }
	.vcj-noel__steps li.is-active::before { content: counter(vn) ". "; }
	.vcj-noel__body { padding: 20px 18px 16px; }
	.vcj-noel__grid { grid-template-columns: 1fr; }
	.vcj-noel__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
	.vcj-noel__mini { flex-basis: 100%; }
	.vcj-noel__actions { width: 100%; }
	.vcj-noel__actions .vcj-noel__btn { flex: 1 1 0; padding: 10px 12px; }
	.vcj-noel__recap dl { grid-template-columns: 1fr; gap: 0; }
	.vcj-noel__recap dd { margin-bottom: 8px; }
	.vcj-noel__session-calc { grid-template-columns: 80px auto 1fr; }
}