/* Bons cadeaux : formulaire public. Couleurs modifiables par le thème via les variables. */

.boncad {
	--boncad-texte: #2b2427;
	--boncad-accent: #161213;
	--boncad-ligne: #ddd6d2;
	--boncad-fond: #fff;
	--boncad-erreur: #b3261e;
	max-width: 640px;
	font-size: 1rem;
	color: var(--boncad-texte);
}

.boncad label,
.boncad legend,
.boncad input,
.boncad textarea {
	font-size: 1rem;
}

.boncad fieldset {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.boncad legend,
.boncad-champ > label {
	display: block;
	padding: 0;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

/* Choix du massage : cartes bien visibles, la carte choisie est cerclée et teintée. */

.boncad-offres {
	display: grid;
	gap: 10px;
	margin-bottom: 1.25rem;
}

.boncad-offre,
.boncad-choix {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	margin: 0;
	background: var(--boncad-fond);
	border: 1px solid var(--boncad-ligne);
	border-radius: 4px;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
	.boncad-offre:hover,
	.boncad-choix:hover {
		border-color: #a89c96;
	}
}

.boncad-offre input[type="radio"],
.boncad-choix input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.boncad-rond {
	display: inline-block;
	flex: none;
	width: 22px;
	height: 22px;
	border: 2px solid #a89c96;
	border-radius: 50%;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.boncad-offre.est-choisi,
.boncad-choix.est-choisi,
.boncad-offre:has(input:checked),
.boncad-choix:has(input:checked) {
	background: #f7f3f0;
	border-color: var(--boncad-accent);
	box-shadow: 0 0 0 1px var(--boncad-accent);
}

.est-choisi > .boncad-rond,
input:checked + .boncad-rond {
	border-color: var(--boncad-accent);
	box-shadow: inset 0 0 0 5px var(--boncad-accent);
}

.boncad-offre:has(input:focus-visible),
.boncad-choix:has(input:focus-visible) {
	outline: 2px solid var(--boncad-accent);
	outline-offset: 2px;
}

.boncad-offre-nom {
	flex: 1;
	min-width: 0;
	line-height: 1.3;
}

.boncad-offre-nom strong {
	display: block;
	font-size: 1.05rem;
}

.boncad-offre-nom small {
	display: block;
	margin-top: 2px;
	font-size: 0.9rem;
	color: #5f565a;
}

.boncad-offre-prix {
	font-size: 1.15rem;
	font-weight: 800;
	white-space: nowrap;
}

.boncad-offre-prix input {
	width: 5.5em;
	padding: 4px 6px;
}

.boncad-champ {
	margin: 0 0 1.2rem;
}

.boncad input[type="text"],
.boncad input[type="email"],
.boncad input[type="number"],
.boncad textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	font: inherit;
	color: inherit;
	background: var(--boncad-fond);
	border: 1px solid var(--boncad-ligne);
	border-radius: 3px;
	box-sizing: border-box;
}

.boncad input:focus,
.boncad textarea:focus {
	outline: 2px solid var(--boncad-accent);
	outline-offset: 1px;
}


.boncad-info {
	font-size: 0.92em;
	color: #5f565a;
}

.boncad-bouton,
a.boncad-bouton {
	display: inline-block;
	padding: 0.85em 1.5em;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background: var(--boncad-accent);
	border: 1px solid var(--boncad-accent);
	border-radius: 3px;
	cursor: pointer;
}

@media (hover: hover) {
	.boncad-bouton:hover,
	a.boncad-bouton:hover {
		color: #fff;
		opacity: 0.88;
	}
}

.boncad-erreur {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.92em;
	color: var(--boncad-erreur);
}

.boncad-alerte {
	padding: 12px 14px;
	border-left: 3px solid var(--boncad-erreur);
	background: #fbf1f0;
}

.boncad-message {
	padding: 22px 24px;
	border: 1px solid var(--boncad-ligne);
}

.boncad-titre {
	margin: 0 0 0.5rem;
	font-size: 1.3em;
	font-weight: 700;
}

.boncad-piege {
	position: absolute;
	left: -9999px;
}

/* Page « Vérifier un bon » (téléphone). */

.boncad-verif {
	max-width: 460px;
}

.boncad-verif-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	margin-bottom: 1.5rem;
}

.boncad-verif-form label {
	grid-column: 1 / -1;
	font-weight: 700;
}

.boncad-verif-form input {
	font-family: Consolas, Monaco, monospace;
	font-size: 1.15rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.boncad-etat {
	margin: 0 0 0.25rem;
	padding: 18px 20px;
	font-size: 1.35rem;
	font-weight: 800;
	border-radius: 3px;
}

.boncad-etat-oui {
	background: #e3f1e7;
	color: #14532d;
}

.boncad-etat-non {
	background: #fbe9e8;
	color: #8a1c14;
}

.boncad-etat-attente {
	background: #fff4d6;
	color: #6b4e00;
}

.boncad-verif-code {
	margin: 0.25rem 0 1rem;
	font-family: Consolas, Monaco, monospace;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
}

.boncad-verif-details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0 0 1.25rem;
}

.boncad-verif-details dt {
	color: #5f565a;
}

.boncad-verif-details dd {
	margin: 0;
	font-weight: 700;
}

.boncad-bouton-grand {
	width: 100%;
	padding: 1.1em;
	font-size: 1.15rem;
}

.boncad-lien {
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.boncad-fait {
	font-weight: 700;
}

/* Achat : aperçu du bon à gauche, formulaire à droite. */

.boncad-achat {
	--boncad-serif: Georgia, "Times New Roman", Times, serif;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.boncad-achat .boncad {
	max-width: none;
}

.boncad-apercu {
	position: sticky;
	top: 110px;
}

.boncad-carte {
	display: grid;
	grid-template-columns: 34% 1fr;
	aspect-ratio: 1.414;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e0dc;
	box-shadow: 0 18px 40px rgba(22, 18, 19, 0.16);
	color: #161213;
}

.boncad-carte-sans-photo {
	grid-template-columns: 1fr;
}

.boncad-carte-photo {
	background-position: center;
	background-size: cover;
}

.boncad-carte-texte {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 6% 7%;
	margin: 3%;
	border: 1px solid #ece7e4;
}

.boncad-carte p {
	margin: 0;
	color: inherit;
}

.boncad-carte-sur {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #5f565a;
}

.boncad-carte-centre {
	margin-bottom: 0.7em !important;
	font-family: var(--boncad-serif);
	font-size: 1.7rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1.1;
}

.boncad-carte-offre {
	font-weight: 700;
	line-height: 1.3;
}

.boncad-carte-prix {
	margin-bottom: 0.6em !important;
	font-family: var(--boncad-serif);
	font-size: 1.5rem;
	font-style: italic;
	font-weight: 700;
}

.boncad-carte-noms,
.boncad-carte-message {
	font-size: 0.85rem;
	line-height: 1.45;
}

.boncad-carte-message {
	margin-top: 0.4em !important;
	font-family: var(--boncad-serif);
	font-style: italic;
	opacity: 0.75;
	overflow-wrap: anywhere;
}

.boncad-carte-code {
	margin-top: auto !important;
	padding-top: 0.6em;
	font-family: Consolas, Monaco, monospace;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	color: #5f565a;
}

.boncad-etapes {
	margin: 1.75rem 0 0 1.2em;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

.boncad-etapes li {
	margin-bottom: 0.3em;
}

.boncad-recap {
	width: 100%;
	margin: 1rem 0 1.25rem;
	border-collapse: collapse;
}

.boncad-recap th,
.boncad-recap td {
	padding: 8px 0;
	text-align: left;
	border-bottom: 1px solid var(--boncad-ligne, #ddd6d2);
}

.boncad-recap th {
	width: 35%;
	font-weight: 400;
	color: #5f565a;
}

.boncad-demo-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

@media (max-width: 900px) {
	.boncad-achat {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.boncad-apercu {
		position: static;
	}
}

@media (max-width: 520px) {
	.boncad-carte {
		grid-template-columns: 1fr;
		grid-template-rows: 120px auto;
		aspect-ratio: auto;
	}

	.boncad-carte-texte {
		min-height: 230px;
	}
}

/* Formulaire en 3 étapes. */

.boncad [hidden] {
	display: none !important;
}

.boncad-barre {
	--boncad-actif: #cc3366;
	--boncad-fait: #6f6569;
	--boncad-avenir: #161213;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.boncad-barre-etape {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 0 12px;
	border-bottom: 3px solid var(--boncad-ligne);
	color: var(--boncad-avenir);
	font-size: 0.9rem;
	line-height: 1.25;
}

.boncad-barre-num {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-weight: 800;
}

.boncad-barre-texte small {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.boncad-barre-etape.est-actif {
	color: var(--boncad-actif);
	font-weight: 700;
	border-bottom-color: var(--boncad-actif);
}

.boncad-barre-etape.est-actif .boncad-barre-num {
	color: #fff;
	background: var(--boncad-actif);
	border-color: var(--boncad-actif);
}

.boncad-barre-etape.est-fait {
	color: var(--boncad-fait);
	border-bottom-color: var(--boncad-fait);
}

.boncad-js .boncad-barre-etape.est-fait {
	cursor: pointer;
}

.boncad-barre-etape.est-fait .boncad-barre-num {
	font-size: 0;
	background: #f7f3f0;
}

.boncad-barre-etape.est-fait .boncad-barre-num::before {
	content: "✓";
	font-size: 1rem;
}

/* Sans JavaScript, toutes les étapes restent visibles et la barre est masquée. */
.boncad:not(.boncad-js) .boncad-barre,
.boncad:not(.boncad-js) .boncad-nav button[data-aller] {
	display: none;
}

.boncad-achat .boncad h2.boncad-etape-titre {
	margin: 0 0 1rem;
	font-size: 1.45rem;
	line-height: 1.2;
}

.boncad-etape-titre:focus {
	outline: none;
}

.boncad-choix {
	padding: 13px 16px;
}

.boncad-envoi {
	display: grid;
	gap: 8px;
}

.boncad-envoi legend {
	margin-bottom: 0.5rem;
}

.boncad-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 1.5rem 0 0;
}

.boncad-nav .boncad-bouton:only-child,
.boncad-nav .boncad-bouton:last-child {
	margin-left: auto;
}

.boncad-nav .boncad-bouton {
	min-width: 200px;
	padding: 0.95em 1.6em;
	font-size: 1.05rem;
}

.boncad-recap-liste {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0;
	margin: 0 0 1.25rem;
	border-top: 1px solid var(--boncad-ligne);
}

.boncad-recap-liste dt,
.boncad-recap-liste dd {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--boncad-ligne);
}

.boncad-recap-liste dt {
	padding-right: 24px;
	color: #5f565a;
}

.boncad-recap-liste dd {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.boncad-apercu-note {
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: #5f565a;
}

.boncad-suite .boncad-barre {
	max-width: 640px;
}

@media (max-width: 600px) {
	.boncad-barre-texte small {
		display: none;
	}

	.boncad-barre-etape {
		flex-direction: column;
		gap: 6px;
		padding-bottom: 10px;
		font-size: 0.8rem;
		text-align: center;
	}

	.boncad-nav .boncad-bouton {
		flex: 1;
		min-width: 0;
	}
}

/* Texte d'exemple des champs : lisible (contraste suffisant). */
.boncad input::placeholder,
.boncad textarea::placeholder {
	color: #6f6569;
	opacity: 1;
}

/* Petit écran : aperçu du bon placé dans l'étape en cours (etapes.js). */
.boncad-apercu.boncad-apercu-dans-etape {
	margin: 1.5rem 0 1.5rem;
}

.boncad-apercu-dans-etape .boncad-carte {
	box-shadow: 0 8px 22px rgba(22, 18, 19, 0.12);
}

.boncad-apercu-dans-etape .boncad-apercu-note {
	margin-top: 0.6rem;
}

.boncad-relire {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	color: #5f565a;
}