/*
 * Bon cadeau : fiche produit. Repris de theme/beaute-naissante/assets/css/gift-certificate.css (05/10/2026),
 * complété en fin de fichier pour le nouveau formulaire et l aperçu au format du PDF (210 x 100 mm).
 */

/* ═══════════════════════════════════════════════
 * A. PAGE-LEVEL — Override WC layout
 * ═══════════════════════════════════════════════ */

.bn-gift-product-page {
	background: linear-gradient(180deg, #FAF6F1 0%, #FFFFFF 40%, #FAF6F1 100%);
}

.bn-gift-product-page .woocommerce div.product {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem 3rem;
}

.bn-gift-product-page .woocommerce div.product::after {
	content: none;
}

/* Summary — full-width, centré */
.bn-gift-product-page .woocommerce div.product .summary.entry-summary {
	float: none;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}

/* Kill la galerie WC (cachée aussi côté PHP, sécurité) */
.bn-gift-product-page .woocommerce-product-gallery,
.bn-gift-product-page .woocommerce-product-gallery__trigger,
.bn-gift-product-page .flex-control-thumbs {
	display: none !important;
}

/* Kill le breadcrumb WC */
.bn-gift-product-page .woocommerce-breadcrumb {
	display: none;
}

/* Kill la quantité (1 bon cadeau par ajout) */
.bn-gift-product-page .quantity {
	display: none !important;
}

/* Kill les liens "Effacer" */
.bn-gift-product-page .reset_variations {
	display: none !important;
}

/* Cacher le bouton AJOUTER AU PANIER tant qu'aucune variation n'est sélectionnée */
.bn-gift-product-page .woocommerce-variation-add-to-cart:not(.woocommerce-variation-add-to-cart-enabled) .single_add_to_cart_button {
	display: none !important;
}

/* Centrer le wrapper du bouton + formulaire personnalisation */
.bn-gift-product-page .woocommerce-variation-add-to-cart {
	width: 100%;
	text-align: center;
}

/* Kill le titre WC par défaut — classique + bloc (remplacé par le hero) */
.bn-gift-product-page .product_title,
.bn-gift-product-page h1.product_title,
.bn-gift-product-page .wp-block-post-title {
	display: none !important;
}

/* Kill le prix WC par défaut — classique + bloc */
.bn-gift-product-page .summary > .price,
.bn-gift-product-page .woocommerce div.product p.price,
.bn-gift-product-page .wp-block-woocommerce-product-price {
	display: none !important;
}

/* Kill l'extrait/description courte — classique + bloc */
.bn-gift-product-page .woocommerce-product-details__short-description,
.bn-gift-product-page .wp-block-post-excerpt {
	display: none !important;
}

/* Kill les meta (catégories, SKU) — classique + bloc */
.bn-gift-product-page .product_meta,
.bn-gift-product-page .wp-block-woocommerce-product-meta {
	display: none !important;
}

/* Kill les tabs WC (Description, Infos, Avis) — classique + bloc */
.bn-gift-product-page .woocommerce-tabs,
.bn-gift-product-page .wp-block-woocommerce-product-details {
	display: none !important;
}

/* Kill les produits liés et upsells */
.bn-gift-product-page .related.products,
.bn-gift-product-page .upsells.products {
	display: none !important;
}

/* Kill la galerie bloc WC (colonne gauche du two-column layout) */
.bn-gift-product-page .wp-block-woocommerce-product-image-gallery {
	display: none !important;
}

/* Bloc layout : convertir 2 colonnes produit → 1 colonne centrée
   Scoper à main pour ne pas affecter le footer */
.bn-gift-product-page main > .wp-block-columns {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
	gap: 0 !important;
}

.bn-gift-product-page main > .wp-block-columns > .wp-block-column {
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 900px !important;
}

/* Cacher la colonne de gauche (galerie) */
.bn-gift-product-page main > .wp-block-columns > .wp-block-column:first-child {
	display: none !important;
}

/* Kill le breadcrumb bloc */
.bn-gift-product-page .wp-block-breadcrumbs,
.bn-gift-product-page .wc-block-breadcrumbs {
	display: none !important;
}

/* ═══════════════════════════════════════════════
 * B. HERO SECTION
 * ═══════════════════════════════════════════════ */

.bn-gift-hero {
	text-align: center;
	padding: 3.5rem 1.5rem 2.5rem;
	width: 100%;
}

.bn-gift-hero__badge {
	display: inline-block;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #C4956A;
	margin-bottom: 1.25rem;
	padding: 0.45rem 1.4rem;
	border: 1.5px solid rgba(196, 149, 106, 0.35);
	border-radius: 999px;
	background: rgba(196, 149, 106, 0.04);
}

.bn-gift-hero__title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(2rem, 5vw, 3rem);
	color: #2C2C2C;
	margin: 0 0 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

.bn-gift-hero__subtitle {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(0.92rem, 2vw, 1.05rem);
	color: #7a7a7a;
	line-height: 1.85;
	max-width: 520px;
	margin: 0 auto 1.75rem;
}

.bn-gift-hero__separator {
	width: 60px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #C4956A, transparent);
	margin: 0 auto;
}

/* ═══════════════════════════════════════════════
 * C. INDICATEUR D'ÉTAPES
 * ═══════════════════════════════════════════════ */

.bn-gift-steps {
	display: flex;
	justify-content: center;
	gap: 2.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
}

.bn-gift-step {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	opacity: 0.35;
	transition: opacity 0.4s ease;
}

.bn-gift-step--active {
	opacity: 1;
}

.bn-gift-step--completed {
	opacity: 0.65;
}

.bn-gift-step__number {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #C4956A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	color: #C4956A;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.bn-gift-step--active .bn-gift-step__number {
	background: #C4956A;
	color: #fff;
}

.bn-gift-step--completed .bn-gift-step__number {
	background: #C4956A;
	color: #fff;
}

.bn-gift-step__label {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	color: #3a2a1a;
	letter-spacing: 0.015em;
}

/* Override du bloc WC add-to-cart — full-width centré + espace avant footer */
.bn-gift-product-page .wp-block-add-to-cart-form,
.bn-gift-product-page .wc-block-add-to-cart-form {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding-bottom: 4rem;
}

/* ═══════════════════════════════════════════════
 * D. VARIATION SELECTOR (Étape 1 — Choisir le soin)
 * ═══════════════════════════════════════════════ */

.bn-gift-product-page .variations_form .variations {
	margin: 0 auto 1rem;
	max-width: 600px;
	border: none;
}

.bn-gift-product-page .variations_form .variations tr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.bn-gift-product-page .variations td.label {
	padding: 0;
}

.bn-gift-product-page .variations td.label label {
	font-family: 'Playfair Display', serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: #2C2C2C;
	text-transform: none;
	letter-spacing: 0.01em;
	text-align: center;
	display: block;
}

.bn-gift-product-page .variations td.value {
	padding: 0;
	width: 100%;
	max-width: 600px;
}

.bn-gift-product-page .variations td.value select {
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	padding: 0.85rem 2.5rem 0.85rem 1.2rem;
	height: auto;
	border: 2px solid #e0dbd5;
	border-radius: 14px;
	background-color: #fff;
	color: #3a2a1a;
	width: 100%;
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C4956A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.2rem center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	overflow: visible;
	text-overflow: ellipsis;
}

.bn-gift-product-page .variations td.value select:focus {
	outline: none;
	border-color: #C4956A;
	box-shadow: 0 0 0 4px rgba(196, 149, 106, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Prix de la variation — centré, grand, doré */
.bn-gift-product-page .woocommerce-variation.single_variation {
	text-align: center;
	margin: 1rem 0 0.5rem;
}

.bn-gift-product-page .woocommerce-variation-price .price {
	font-family: 'Playfair Display', serif;
	font-size: 1.8rem;
	color: #C4956A;
	font-weight: 700;
}

/* ═══════════════════════════════════════════════
 * E. SECTION PERSONNALISATION (Étape 2)
 * ═══════════════════════════════════════════════ */

.bn-gift-section--hidden {
	display: none;
}

.bn-gift-section {
	margin: 1.5rem 0 1rem;
	padding: 2.5rem 0 0;
	border-top: 1px solid rgba(196, 149, 106, 0.15);
	width: 100%;
	animation: bn-gift-fadeIn 0.6s ease-out;
}

.bn-gift-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	color: #2C2C2C;
	margin-bottom: 2rem;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.bn-gift-title__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #C4956A;
	color: #fff;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
 * F. LAYOUT 2 COLONNES (Form + Preview)
 * ═══════════════════════════════════════════════ */

.bn-gift-layout {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 2.5rem;
	align-items: start;
}

/* ═══════════════════════════════════════════════
 * G. FORMULAIRE (colonne gauche)
 * ═══════════════════════════════════════════════ */

.bn-gift-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bn-gift-field {
	position: relative;
}

/* Animation staggered des champs */
.bn-gift-field:nth-child(1) { animation: bn-gift-slideIn 0.5s ease-out 0.05s both; }
.bn-gift-field:nth-child(2) { animation: bn-gift-slideIn 0.5s ease-out 0.15s both; }
.bn-gift-field:nth-child(3) { animation: bn-gift-slideIn 0.5s ease-out 0.25s both; }
.bn-gift-field:nth-child(4) { animation: bn-gift-slideIn 0.5s ease-out 0.35s both; }

.bn-gift-label {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: #3a2a1a;
	margin-bottom: 0.5rem;
	letter-spacing: 0.02em;
}

.bn-required {
	color: #c0392b;
	font-weight: 700;
}

.bn-optional {
	color: #999;
	font-weight: 400;
	font-size: 0.8rem;
}

.bn-gift-input {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 2px solid #e0dbd5;
	border-radius: 14px;
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	color: #3a2a1a;
	background: #fff;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
}

.bn-gift-input:focus {
	outline: none;
	border-color: #C4956A;
	box-shadow: 0 0 0 4px rgba(196, 149, 106, 0.12);
	background: #fff;
}

.bn-gift-input::placeholder {
	color: #c0b8ae;
	font-style: italic;
}

.bn-gift-textarea {
	resize: vertical;
	min-height: 100px;
	max-height: 200px;
	line-height: 1.6;
}

.bn-char-count {
	display: block;
	text-align: right;
	font-size: 0.75rem;
	color: #bbb;
	margin-top: 0.3rem;
	font-family: 'DM Sans', sans-serif;
}

/* ═══════════════════════════════════════════════
 * H. SÉLECTEUR DE MODÈLE (3 cartes)
 * ═══════════════════════════════════════════════ */

.bn-gift-templates-field .bn-gift-label {
	font-family: 'Playfair Display', serif;
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

.bn-template-choices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.bn-template-choice {
	position: relative;
	cursor: pointer;
	border: 2px solid #e8e4df;
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
	background: #fff;
	text-align: center;
}

.bn-template-choice:hover {
	border-color: #C4956A;
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(196, 149, 106, 0.15);
}

.bn-template-choice.selected {
	border-color: #C4956A;
	box-shadow: 0 0 0 2px #C4956A, 0 6px 20px rgba(196, 149, 106, 0.2);
}

.bn-template-choice.selected::after {
	content: '✓';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	background: #C4956A;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	z-index: 2;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.bn-template-choice input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bn-template-thumb-wrap {
	aspect-ratio: 1225 / 2178;
	overflow: hidden;
	background: #f5f3f0;
}

.bn-template-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.bn-template-choice:hover .bn-template-thumb-wrap img {
	transform: scale(1.04);
}

.bn-template-label {
	display: block;
	padding: 0.45rem 0;
	font-family: 'DM Sans', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	color: #5a4a3b;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
 * I. APERÇU CANVAS (colonne droite — sticky)
 * ═══════════════════════════════════════════════ */

.bn-gift-preview-wrap {
	position: sticky;
	top: 90px;
}

.bn-preview-title {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	color: #9a8a7b;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 0.75rem;
	text-align: center;
}

.bn-gift-preview-container {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.08),
		0 4px 12px rgba(0, 0, 0, 0.04);
	background: #faf8f5;
	border: 1px solid rgba(196, 149, 106, 0.12);
}

.bn-gift-preview-container canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* Loading overlay */
.bn-preview-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(250, 248, 245, 0.92);
	z-index: 5;
	border-radius: 16px;
}

.bn-preview-loading span {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.85rem;
	color: #aaa;
}

/* Spinner */
.bn-preview-loading::before {
	content: '';
	display: block;
	width: 28px;
	height: 28px;
	border: 3px solid rgba(196, 149, 106, 0.2);
	border-top-color: #C4956A;
	border-radius: 50%;
	animation: bn-spin 0.8s linear infinite;
	margin-bottom: 0.75rem;
}

.bn-preview-note {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.72rem;
	color: #bbb;
	text-align: center;
	margin-top: 0.6rem;
	font-style: italic;
}

/* ═══════════════════════════════════════════════
 * J. BOUTON AJOUTER AU PANIER (Étape 3)
 * ═══════════════════════════════════════════════ */

.bn-gift-product-page .single_add_to_cart_button {
	display: block;
	width: 100%;
	max-width: 600px;
	margin: 2rem auto 0;
	padding: 1.1rem 2.5rem !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #C4956A, #D4A87A) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 4px 20px rgba(196, 149, 106, 0.35);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer;
}

.bn-gift-product-page .single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(196, 149, 106, 0.45) !important;
	background: linear-gradient(135deg, #b8875e, #C4956A) !important;
}

.bn-gift-product-page .single_add_to_cart_button:active {
	transform: translateY(0);
}

/* ═══════════════════════════════════════════════
 * K. ANIMATIONS
 * ═══════════════════════════════════════════════ */

@keyframes bn-gift-fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bn-gift-slideIn {
	from {
		opacity: 0;
		transform: translateX(-15px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes bn-spin {
	to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════
 * L. PANIER & CHECKOUT — Meta personnalisation
 * ═══════════════════════════════════════════════ */

.woocommerce-cart .product-name dl.variation dt,
.woocommerce-checkout .product-name dl.variation dt {
	font-weight: 600;
	color: #5a4a3b;
}

/* ═══════════════════════════════════════════════
 * M. RESPONSIVE — Tablette (≤1024px)
 * ═══════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.bn-gift-layout {
		gap: 2rem;
	}

	.bn-gift-hero {
		padding: 2.5rem 1.5rem 2rem;
	}

	.bn-gift-steps {
		gap: 1.5rem;
	}
}

/* ═══════════════════════════════════════════════
 * N. RESPONSIVE — Mobile (≤768px)
 * ═══════════════════════════════════════════════ */

@media (max-width: 768px) {
	.bn-gift-product-page .woocommerce div.product {
		padding: 0 1rem 2rem;
	}

	.bn-gift-hero {
		padding: 2rem 1rem 1.5rem;
	}

	.bn-gift-hero__subtitle br {
		display: none;
	}

	/* Steps : labels raccourcis */
	.bn-gift-steps {
		gap: 1rem;
		margin-bottom: 2rem;
	}

	.bn-gift-step__label {
		font-size: 0.72rem;
	}

	/* Layout 1 colonne */
	.bn-gift-layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Preview en premier sur mobile */
	.bn-gift-preview-wrap {
		order: -1;
		position: static;
	}

	.bn-gift-preview-container {
		max-width: 380px;
		margin: 0 auto;
	}

	.bn-gift-section {
		margin: 1.5rem 0 1rem;
	}

	.bn-template-choices {
		gap: 0.5rem;
	}

	.bn-template-label {
		font-size: 0.6rem;
		padding: 0.35rem 0;
	}

	.bn-gift-product-page .single_add_to_cart_button {
		max-width: 100%;
	}

	/* Variation selector full-width */
	.bn-gift-product-page .variations td.value {
		max-width: 100%;
	}
}

/* ═══════════════════════════════════════════════
 * O. RESPONSIVE — Petit mobile (≤480px)
 * ═══════════════════════════════════════════════ */

@media (max-width: 480px) {
	/* Steps : numéros seuls */
	.bn-gift-step__label {
		display: none;
	}

	.bn-gift-steps {
		gap: 2rem;
	}

	.bn-gift-preview-container {
		max-width: 300px;
	}

	.bn-template-choice.selected::after {
		width: 18px;
		height: 18px;
		font-size: 10px;
		top: 4px;
		right: 4px;
	}

	.bn-gift-title {
		font-size: 1.15rem;
	}

	.bn-gift-input {
		padding: 0.75rem 0.95rem;
		font-size: 0.95rem;
	}
}

/* ═══════════════════════════════════════════════
 * Z. EXTENSION BN-BONS-CADEAUX (octobre 2026)
 * ═══════════════════════════════════════════════ */

/* Polices de l'aperçu : les mêmes fichiers que le PDF */
@font-face { font-family: 'BNBC Playfair'; src: url('polices/PlayfairDisplay-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'BNBC DM Sans'; src: url('polices/DMSans-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'BNBC DM Sans'; src: url('polices/DMSans-SemiBold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'BNBC Garamond'; src: url('polices/EBGaramond-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'BNBC Garamond Italique'; src: url('polices/EBGaramond-Italic.woff2') format('woff2'); font-weight: normal; font-style: italic; font-display: swap; }

.bn-gift-intro {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.85rem;
	color: #5f5f5f;
	text-align: center;
	margin: -1.25rem 0 1.5rem;
}

.bn-gift-visuels {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.bn-gift-visuels legend {
	padding: 0;
	margin-bottom: 0.75rem;
}
.bn-gift-aide {
	font-family: 'DM Sans', sans-serif;
	font-size: 0.8rem;
	color: #5f5f5f;
	margin: 0.5rem 0 0;
}

/* Deux visuels au plus (celui du soin et le neutre) : vignettes au format du cadre photo du bon (78 x 88 mm) */
.bn-template-choices {
	grid-template-columns: repeat(2, minmax(0, 140px));
}
.bn-template-thumb-wrap {
	aspect-ratio: 78 / 88;
}
/* Focus clavier distinct de la sélection (05, parcours 2.5) */
.bn-template-choice:focus-within {
	outline: 2px solid #2C2C2C;
	outline-offset: 3px;
}

/* Aperçu au format du bon (paysage) : pleine largeur, au-dessus des champs sur ordinateur
   pour rester lisible ; sous les champs sur téléphone (05, parcours 2.6). */
.bn-gift-layout {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.bn-gift-preview-wrap {
	order: -1;
	position: static;
}
.bn-gift-layout > .bn-gift-form,
.bn-gift-layout > .bn-gift-preview-wrap {
	width: 100%;
	align-self: stretch;
}
@media (min-width: 769px) {
	.bn-gift-form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
	.bn-gift-form > .bn-gift-visuels,
	.bn-gift-form > .bn-gift-field:last-child {
		grid-column: 1 / -1;
	}
}
.bn-gift-preview-container canvas {
	aspect-ratio: 210 / 100;
	border-radius: 4px;
}
.bn-gift-preview-container {
	border-radius: 4px;
}
.bn-preview-note {
	color: #6b6b6b;
	font-style: normal;
}
.bn-char-count {
	color: #6b6b6b;
}

@media (max-width: 768px) {
	/* Formulaire d'abord, aperçu ensuite (05, parcours 2.6) */
	.bn-gift-preview-wrap {
		order: 0;
	}
	.bn-gift-preview-container {
		max-width: none;
	}
}
@media (max-width: 480px) {
	.bn-gift-preview-container {
		max-width: none;
	}
}