/* Aperçu du flocage — carte d'appel, modale de personnalisation, résumé.
   Tout est préfixé « btm- » ; les rares règles qui visent WAPF sont portées
   par .btm-corps pour ne rien déborder hors de la modale. */

.btm-ancre{ margin: 0 0 18px; }

/* ---------- carte d'appel ----------
   Une grille nommée : la vignette accompagne le titre, le texte d'aide et le
   bouton prennent toute la largeur sous mobile, tout se met en ligne dès
   qu'il y a la place. */
.btm-appel{
	background: #f7f3f0;
	border-radius: 8px;
	padding: 16px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"vignette titre"
		"aide     aide"
		"bouton   bouton";
	gap: 6px 13px;
	align-items: center;
}
.btm-appel__vignette{
	grid-area: vignette;
	width: 58px;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	line-height: 0;
	align-self: center;
}
.btm-appel__vignette img{ width: 100%; height: auto; display: block; }
.btm-appel__titre{
	grid-area: titre;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
}
.btm-appel__aide{
	grid-area: aide;
	margin: 2px 0 0;
	font-size: .86rem;
	line-height: 1.45;
	color: #7a6f66;
}
.btm-appel__btn{ grid-area: bouton; margin-top: 6px; }
.btm-appel__btn .btm-btn{ width: 100%; }

@media (min-width: 620px){
	.btm-appel{
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"vignette titre bouton"
			"vignette aide  bouton";
		gap: 2px 16px;
	}
	.btm-appel__vignette{ width: 72px; grid-row: span 2; }
	.btm-appel__btn{ margin-top: 0; }
	.btm-appel__btn .btm-btn{ width: auto; }
}

.btm-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #222;
	color: #fff;
	border: 0;
	border-radius: 5px;
	padding: 13px 22px;
	font: 600 .95rem/1.2 inherit;
	cursor: pointer;
	text-align: center;
	transition: opacity .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.btm-btn:hover{ opacity: .86; color: #fff; }
.btm-btn:disabled{ opacity: .35; cursor: not-allowed; }
.btm-btn--doux{ background: #d1beaf; color: #222; }
.btm-btn--doux:hover{ color: #222; }
.btm-btn--plein{ width: 100%; }
.btm-btn:focus-visible,
.btm-lien:focus-visible,
.btm-fermer:focus-visible{ outline: 2px solid #222; outline-offset: 2px; }

.btm-lien{
	background: none;
	border: 0;
	padding: 0;
	color: #6b6058;
	font: 500 .86rem/1.4 inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- résumé une fois validé ----------
   Grille nommée : la vignette et les informations se partagent la première
   ligne, les actions prennent toute la largeur de la carte en dessous. Rangées
   dans la colonne de texte, elles n'avaient que 190 px sur mobile et se
   chevauchaient. */
.btm-resume{
	background: #f7f3f0;
	border-radius: 8px;
	padding: 14px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"vignette infos"
		"actions  actions";
	gap: 13px 14px;
	align-items: start;
}
.btm-resume__vignette{
	grid-area: vignette;
	position: relative;
	width: 92px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	line-height: 0;
	cursor: zoom-in;
}
.btm-resume__vignette img{ width: 100%; height: auto; display: block; }
.btm-resume__loupe{
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	color: #3a3129;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(34,34,34,.22);
}
.btm-resume__vignette:focus-visible{ outline: 2px solid #222; outline-offset: 2px; }

.btm-resume__corps{ grid-area: infos; min-width: 0; }
.btm-resume__titre{
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #7a6f66;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.2;
	margin-bottom: 9px;
}
.btm-resume__coche{
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #becec7;
	color: #2f4a3e;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btm-resume__liste{ margin: 0; padding: 0; }
.btm-resume__ligne{
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 5px 0;
	border-bottom: 1px solid #e8ded5;
}
.btm-resume__ligne:last-child{ border-bottom: 0; padding-bottom: 0; }
.btm-resume__liste dt{
	flex: 0 0 58px;
	margin: 0;
	font-size: .78rem;
	color: #9a8d82;
	font-weight: 400;
}
.btm-resume__liste dd{
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
	color: #222;
	overflow-wrap: anywhere;
}

.btm-resume__actions{
	grid-area: actions;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid #e8ded5;
}
.btm-resume__actions .btm-btn{ flex: 1 1 auto; min-width: 0; }
/* Dès qu'il y a la place, les boutons reprennent leur largeur naturelle
   plutôt que de s'étirer sur toute la carte. */
@media (min-width: 620px){
	.btm-resume__actions .btm-btn{ flex: 0 0 auto; }
	.btm-resume__actions .btm-retirer{ margin-left: auto; }
}
.btm-btn--petit{ padding: 9px 14px; font-size: .85rem; white-space: nowrap; }
.btm-retirer{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	border: 1px solid #e3d6c9;
	border-radius: 5px;
	background: transparent;
	color: #9a8d82;
	font: 500 .82rem/1.2 inherit;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.btm-retirer:hover{ color: #a5544a; border-color: #dcc0b8; background: #fdf7f6; }
.btm-retirer:focus-visible{ outline: 2px solid #222; outline-offset: 2px; }

/* ---------- rappel : « pensez à l'ajouter au panier » ---------- */
.btm-rappel{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 9px 0 0;
	padding: 12px 15px;
	border-radius: 8px;
	background: #bd5f52;
	color: #fff;
	font-size: .89rem;
	font-weight: 600;
	line-height: 1.4;
}
.btm-rappel svg{
	flex: 0 0 auto;
	animation: btm-descend 1.9s ease-in-out infinite;
}
@keyframes btm-descend{
	0%, 100%{ transform: translateY(-2px); }
	50%     { transform: translateY(2px); }
}

/* ---------- bouton d'ajout au panier ---------- */
.btm-note-panier{
	clear: both;
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	margin: 16px 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f7f3f0;
	border: 1px solid #e6dbd1;
	font-size: .86rem;
	line-height: 1.5;
	color: #6b5847;
}
/* Le lien suit le texte dans le même flux : posé en frère de la phrase, il
   partait seul sur une ligne dès que celle-ci se coupait. */
.btm-note-panier__texte{ min-width: 0; }
/* Un `display` posé sur l'élément l'emporte sur le [hidden] du navigateur :
   sans cette règle, masquer la note par JS resterait sans effet. */
.btm-note-panier[hidden]{ display: none !important; }
.btm-note-panier::before{
	content: "";
	margin-top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #d1beaf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23483a2c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 5v6M10 14.6v.1'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.btm-note-panier .btm-lien{
	color: #222;
	font-weight: 600;
	white-space: nowrap;
}
.single_add_to_cart_button.btm-bloque,
.single_add_to_cart_button:disabled{
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}
/* « Voir le panier », que WooCommerce colle après l'ajout */
.woocommerce a.added_to_cart,
a.added_to_cart.wc-forward{
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding: 12px 20px;
	border-radius: 5px;
	background: #d1beaf;
	color: #222 !important;
	font-weight: 600;
	font-size: .9rem;
	line-height: 1.2;
	text-decoration: none;
	vertical-align: middle;
}
.woocommerce a.added_to_cart:hover,
a.added_to_cart.wc-forward:hover{ background: #c3ac9a; color: #222 !important; }
@media (max-width: 480px){
	.woocommerce a.added_to_cart,
	a.added_to_cart.wc-forward{
		display: flex;
		justify-content: center;
		margin: 10px 0 0;
		width: 100%;
	}
}

/* ---------- modale ---------- */
.btm-voile{
	position: fixed;
	inset: 0;
	background: rgba(34,34,34,.55);
	z-index: 9999998;
	opacity: 0;
	transition: opacity .22s ease;
}
.btm-modale{
	position: fixed;
	inset: 0;
	z-index: 9999999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
}
.btm-modale[hidden],
.btm-voile[hidden]{ display: none !important; }
.btm-modale.est-ouverte .btm-panneau{ transform: none; }
.btm-voile.est-ouverte{ opacity: 1; }

.btm-panneau{
	position: relative;
	pointer-events: auto;
	background: #fff;
	width: 100%;
	max-width: 100%;
	height: 94dvh;
	max-height: 94dvh;
	border-radius: 16px 16px 0 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.32,.72,0,1);
	box-shadow: 0 -8px 40px rgba(34,34,34,.28);
}

.btm-entete{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid #ece4dc;
	background: #fff;
}
.btm-entete__titre{
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.3;
	margin: 0;
}
.btm-entete__pas{
	display: block;
	font: 500 .72rem/1.4 inherit;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9a8d82;
}
.btm-fermer{
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: #f2ece7;
	color: #222;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btm-fermer:hover{ background: #e6dbd1; }

.btm-defile{
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* aperçu collant en haut du défilement sur mobile */
.btm-scene{
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	padding: 14px 16px 12px;
	border-bottom: 1px solid #f0e9e3;
}
.btm-scene__cadre{
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 0;
	border: 0;
	max-width: min(78vw, 310px);
	border-radius: 8px;
	overflow: hidden;
	background: #f7f3f0;
	line-height: 0;
	cursor: zoom-in;
}
.btm-scene__loupe{
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 20px;
	background: rgba(255,255,255,.93);
	color: #3a3129;
	font-size: .74rem;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 1px 4px rgba(34,34,34,.18);
}
.btm-scene__cadre:hover .btm-scene__loupe{ background: #fff; }
.btm-scene__cadre:focus-visible{ outline: 2px solid #222; outline-offset: 3px; }

/* ---------- agrandissement ---------- */
.btm-loupe{
	position: fixed;
	inset: 0;
	z-index: 10000000;
	background: rgba(28,24,20,.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	cursor: zoom-out;
}
.btm-loupe[hidden]{ display: none !important; }
.btm-loupe__img{
	max-width: 100%;
	max-height: 100%;
	border-radius: 6px;
	display: block;
}
.btm-loupe__fermer{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.btm-loupe__fermer:hover{ background: rgba(255,255,255,.28); }
.btm-scene__img{ width: 100%; height: auto; display: block; }
.btm-scene__etat{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: rgba(255,255,255,.94);
	color: #222;
	border-radius: 4px;
	padding: 6px 14px;
	font-size: .82rem;
	line-height: 1.4;
}
.btm-scene__note{
	margin: 9px 0 0;
	font-size: .76rem;
	line-height: 1.45;
	color: #9a8d82;
	text-align: center;
}
.btm-scene__test{
	margin: 6px 0 0;
	font-size: .76rem;
	line-height: 1.45;
	color: #a06a3d;
	text-align: center;
	font-weight: 500;
}

.btm-corps{ padding: 16px 16px 22px; }

.btm-pied{
	flex: 0 0 auto;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid #ece4dc;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.btm-pied__ligne{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: .88rem;
	color: #6b6058;
}
.btm-pied__manque{ color: #a06a3d; font-weight: 500; }

/* Sur mobile la hauteur est comptée : le pied resterait posé sur les champs
   pendant tout le parcours alors qu'il ne sert qu'à la fin. Il n'apparaît
   donc qu'une fois la personnalisation complète, et il se déplie plutôt que
   de surgir d'un coup. Au-delà de 860 px il est visible en permanence. */
@media (max-width: 859px){
	/* L'aperçu était dimensionné en largeur (78vw) : sa hauteur suivait donc
	   les proportions de la photo et pouvait manger 300 px, laissant les
	   champs à l'étroit. On le plafonne en hauteur, proportionnellement à
	   l'écran — un petit téléphone rend plus de place qu'un grand. La photo
	   garde ses proportions dans le cadre, et le zoom reste à un doigt. */
	.btm-scene{ padding: 10px 16px 8px; }
	.btm-scene__cadre{ height: min(30dvh, 260px); }
	.btm-scene__img{ height: 100%; object-fit: contain; }

	.btm-pied{ display: none; }
	.btm-panneau--pret .btm-pied{
		display: flex;
		animation: btm-pied-entre .24s cubic-bezier(.32,.72,0,1) both;
	}
}
@keyframes btm-pied-entre{
	from{ opacity: 0; transform: translateY(100%); }
	to{ opacity: 1; transform: none; }
}

/* ---------- accordéon : une étape ouverte à la fois ---------- */
.btm-tete{
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: #222;
	text-align: left;
	cursor: pointer;
}
.btm-tete__num{
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #e0d2c5;
	color: #6b5847;
	font-size: .78rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s ease, color .18s ease;
}
.btm-fait .btm-tete__num{ font-size: 0; background: #becec7; }
.btm-fait .btm-tete__num::after{
	content: "\2713";
	font-size: .82rem;
	color: #2f4a3e;
}
.btm-tete__titre{
	flex: 0 1 auto;
	font-weight: 600;
	font-size: .97rem;
	line-height: 1.25;
	min-width: 0;
}
.btm-tete__valeur{
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-size: .84rem;
	color: #7a6f66;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.btm-tete__fleche{
	flex: 0 0 auto;
	color: #9a8d82;
	transition: transform .2s ease;
}
.btm-repli .btm-tete__fleche{ transform: rotate( -90deg ); }

/* étape encore inaccessible */
.btm-corps .wapf-field-container.btm-verrou{ opacity: .5; }
.btm-corps .wapf-field-container.btm-verrou .btm-tete{ cursor: default; }
.btm-corps .wapf-field-container.btm-verrou .btm-tete__valeur{ display: none; }

/* repliée : on ne garde que l'en-tête */
.btm-corps .wapf-field-container.btm-repli .wapf-field-label,
.btm-corps .wapf-field-container.btm-repli .wapf-field-input{ display: none !important; }
.btm-corps .wapf-field-container:not(.btm-repli) .btm-tete{ margin-bottom: 13px; }
.btm-corps .wapf-field-container:not(.btm-repli) .btm-tete__valeur{ display: none; }
/* le libellé d'origine ferait doublon avec l'en-tête */
.btm-corps .wapf-field-container .wapf-field-label{ display: none !important; }

/* C'est l'accordéon qui décide de ce qui est accessible, plus le masquage
   conditionnel de WAPF : sinon les étapes suivantes n'existeraient pas encore
   et le client ne verrait pas le chemin qui l'attend. */
.btm-corps .wapf-field-container.wapf-hide{ display: block !important; }

/* ---------- champs WAPF, réhabillés dans la modale ----------
   Le CSS du Customizer cible ces conteneurs par leur identifiant de champ
   (.wapf-field-container.wapf-field-text.field-xxxx.has-conditions), soit une
   spécificité supérieure à la nôtre. D'où les !important, strictement limités
   aux propriétés de mise en page et confinés à .btm-corps. */
.btm-corps .wapf-wrapper{ margin: 0 !important; width: 100% !important; }
.btm-corps .wapf-field-group{ margin: 0 !important; }
.btm-corps .wapf-field-container{
	background: #f7f3f0 !important;
	border-radius: 5px !important;
	padding: 16px !important;
	margin: 0 0 12px !important;
	width: 100% !important;
}
.btm-corps .wapf-field-container:last-child{ margin-bottom: 0 !important; }
.btm-corps .wapf-field-container.btm-champ-masque{ display: none !important; }
.btm-corps .wapf-field-label{
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.btm-corps .wapf-field-label label{ font-weight: 600; font-size: 1rem; margin: 0; }
.btm-corps .wapf-swatch-wrapper{
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 8px;
}
/* Les pastilles de couleur sont de petites textures : au-delà de deux par
   ligne elles seraient étirées et le grain des paillettes deviendrait sale. */
.btm-corps .btm-champ--couleur .wapf-swatch-wrapper{
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 6px;
}
.btm-corps .btm-champ--couleur .wapf-swatch{ padding: 7px 4px; gap: 5px; }
.btm-corps .btm-champ--couleur .wapf-swatch img{
	width: 100%;
	max-width: 67px;
	aspect-ratio: 67 / 54;
	object-fit: cover;
}
.btm-corps .btm-champ--couleur .wapf-swatch-label{ font-size: .68rem; line-height: 1.25; }
.btm-corps .wapf-swatch{
	margin: 0;
	padding: 9px 7px;
	border: 2px solid transparent;
	border-radius: 5px;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	cursor: pointer;
	min-height: 0;
	transition: border-color .15s ease, background .15s ease;
}
.btm-corps .wapf-swatch img{
	max-width: 100%;
	height: auto;
	width: auto;
	border-radius: 3px;
}
.btm-corps .wapf-swatch-label{
	font-size: .76rem;
	line-height: 1.3;
	text-align: center;
	color: #6b6058;
}
.btm-corps .wapf-swatch.wapf-checked{
	background: #d1beaf;
	border-color: #b79c88;
	padding-top: 9px;
}
.btm-corps .wapf-swatch.wapf-checked .wapf-swatch-label{ color: #222; font-weight: 600; }
.btm-corps .wapf-field-input input[type=text]{
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #d8cabc;
	border-radius: 5px;
	background: #fff;
	font-size: 16px; /* sous 16px, iOS zoome au focus */
	line-height: 1.4;
}
.btm-corps .wapf-field-input input[type=text]::placeholder{
	color: #9a8d82;
	opacity: 1; /* Firefox l'affaiblit par defaut */
}
.btm-corps .wapf-field-input input[type=text]:focus{
	outline: 2px solid #b79c88;
	outline-offset: 1px;
	border-color: transparent;
}
.btm-suite{
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 12px 20px;
	border: 0;
	border-radius: 5px;
	background: #222;
	color: #fff;
	font: 600 .92rem/1.2 inherit;
	cursor: pointer;
	transition: opacity .15s ease;
}
.btm-suite:hover{ opacity: .86; }
.btm-suite[hidden]{ display: none !important; }
.btm-suite:focus-visible{ outline: 2px solid #222; outline-offset: 2px; }
.btm-repli .btm-suite{ display: none !important; }

.btm-corps .wapf-pricing-hint{ font-size: .72rem; color: #8a7f76; }
.btm-corps .wapf-product-totals{ margin: 12px 0 0; font-size: .9rem; }

/* ---------- à partir de la tablette : deux colonnes ---------- */
@media (min-width: 860px){
	.btm-modale{ align-items: center; padding: 24px; }
	.btm-panneau{
		max-width: 980px;
		height: auto;
		max-height: 88vh;
		border-radius: 14px;
		transform: translateY(18px) scale(.98);
		opacity: 0;
		transition: transform .24s ease, opacity .24s ease;
	}
	.btm-modale.est-ouverte .btm-panneau{ transform: none; opacity: 1; }
	.btm-defile{
		display: grid;
		grid-template-columns: minmax(0,42%) minmax(0,58%);
		align-items: start;
	}
	.btm-scene{
		position: sticky;
		top: 0;
		padding: 22px;
		border-bottom: 0;
		border-right: 1px solid #f0e9e3;
		height: 100%;
	}
	.btm-scene__cadre{ max-width: 100%; }
	.btm-corps{ padding: 22px; }
	.btm-corps .wapf-swatch-wrapper{ grid-template-columns: repeat(3, minmax(0,1fr)); }
	.btm-corps .btm-champ--couleur .wapf-swatch-wrapper{ grid-template-columns: repeat(4, minmax(0,1fr)); }
	.btm-pied{ flex-direction: row; align-items: center; justify-content: space-between; }
	.btm-pied__ligne{ flex: 1 1 auto; }
	.btm-pied .btm-btn{ width: auto; min-width: 260px; }
}

/* ---------- petits écrans ---------- */
@media (max-width: 480px){
	.btm-scene__cadre{ max-width: min(80vw, 270px); }
}

@media (prefers-reduced-motion: reduce){
	.btm-panneau--pret .btm-pied{ animation: none; }
	.btm-panneau,
	.btm-voile{ transition: none; }
}

/* page figée derrière la modale (le décalage évite le saut de scroll iOS) */
body.btm-fige{
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* Le panier flottant du thème monte à z-index 9999997 : on le fait passer
   derrière le voile tant que la personnalisation est ouverte. */
body.btm-fige .xoo-wsc-basket,
body.btm-fige .xoo-wsc-container{ z-index: 999990 !important; }