/* Configurateur — styles visuels finaux, alignés sur la palette et la
   typographie du thème (theme.css : --lmp-*, --font-*). La disposition,
   les rayons de coin, les ombres et les états actif/hover reprennent la
   direction validée (maquette de référence Claude Design), mais toutes
   les couleurs viennent des variables --lmp-* déjà établies. */

.lmp-configurateur {
	max-width: 1180px;
	margin: 0 auto;
	font-family: var(--font-body, inherit);
	color: var(--lmp-brun);
}

/* Teintes neutres réutilisées : dérivées de --lmp-brun en transparence
   plutôt que de nouvelles couleurs, pour rester fidèle à la palette. */
.lmp-configurateur {
	--lmp-studio-hairline: rgba(61, 43, 31, 0.1);
	--lmp-studio-muted: rgba(61, 43, 31, 0.6);
	--lmp-studio-muted-strong: rgba(61, 43, 31, 0.75);
	--lmp-studio-wash: rgba(155, 126, 189, 0.1);
	--lmp-studio-wash-strong: rgba(155, 126, 189, 0.16);
	--lmp-studio-wash-cuir: rgba(212, 184, 150, 0.28);
	--lmp-studio-wash-cuir-strong: rgba(212, 184, 150, 0.42);
	--lmp-studio-shadow-sm: 0 3px 8px -4px rgba(61, 43, 31, 0.14);
	--lmp-studio-shadow-md: 0 8px 20px -12px rgba(61, 43, 31, 0.25);
	--lmp-studio-shadow-lg: 0 14px 32px -14px rgba(61, 43, 31, 0.22);
	--lmp-studio-shadow-dark: 0 8px 16px -8px rgba(61, 43, 31, 0.5);
	--lmp-studio-shadow-cta: 0 10px 22px -8px rgba(155, 126, 189, 0.55);
	--lmp-studio-shadow-gold: 0 6px 14px -6px rgba(139, 105, 20, 0.4);
}

/* ==========================================================
   En-tête marketing — texte du vrai site (page.html,
   .personnalisation-hero), SANS le bandeau de progression à 6 étapes
   qui le suit dans l'original : on garde le studio une page, pas le
   wizard. Sibling de #lmp-configurateur (pas un enfant) — render()
   vide et reconstruit #lmp-configurateur au complet, ce bloc statique
   serait effacé s'il était dedans.

   Traitement volontairement SANS carte (pas de fond dégradé, pas de
   rayon de coin, pas d'ombre) : le hero et les section-header de la
   page d'accueil (theme.css) ne mettent jamais leur titre dans une
   carte flottante — le texte respire directement sur le fond crème de
   la page (déjà --lmp-creme, le fond du <body>), simple padding
   généreux + centrage. Une carte ici ferait exactement l'effet de
   pièce rapportée que ce style corrige. page-personnaliser.php retire
   le h1 générique du thème pour cette page : ce titre est le seul.
   ========================================================== */

.lmp-studio__hero {
	max-width: 1180px;
	margin: 0 auto 2rem;
	padding: 2.5rem 1.5rem 0;
	text-align: center;
}

.lmp-studio__hero-title {
	font-family: var(--font-heading);
	font-size: clamp( 2rem, 4vw, 2.8rem );
	line-height: 1.15;
	color: var(--lmp-brun);
	margin: 0 0 0.75rem;
}

.lmp-studio__hero-subtitle {
	font-family: var(--font-body, inherit);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--lmp-brun);
	opacity: 0.8;
	max-width: 640px;
	margin: 0 auto;
}

.lmp-configurateur__error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #8a1f1f;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	margin: 0 0 1rem;
	font-weight: 600;
}

/* ==========================================================
   Barre du haut : vêtement (onglets) + couleur (pastilles)
   ========================================================== */

/* Une seule carte -- retour au modèle d'origine + agrandi, 2026-09-10
   (Marie-Christine : "grossis et tout doit etre sur la meme ligne [...]
   avant tout était dans une card et maintenant c'est weird"). Les onglets
   vêtement sont de nouveau DANS cette carte (buildTopBar() les inclut
   maintenant, voir configurateur.js) au lieu d'une rangée séparée au-dessus.
   flex-wrap:wrap comme le modèle d'origine (pas nowrap/scroll -- essayé
   d'abord, mais avec le prix/guides ajoutés depuis le scrollWidth dépassait
   2.5x la largeur visible, illisible) : chaque groupe (onglets, taille,
   couleur) tient sur sa propre ligne dans CETTE carte plutôt que d'être
   coupé dans un bloc séparé. */
.lmp-studio__topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	row-gap: 1rem;
	column-gap: 1.5rem;
	padding: 1.1rem 1.4rem;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-studio-hairline);
	border-radius: 20px;
	margin-bottom: 1.25rem;
	box-shadow: var(--lmp-studio-shadow-sm);
}

.lmp-studio__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.lmp-studio__tab {
	font-family: var(--font-heading);
	/* Taille d'origine -- 2026-09-10 (Marie-Christine : "le plus gros
	   c'était sur les pastilles [...] pas sur celle de Chandail à
	   capuche.../Ensemble des Minis"), agrandi par erreur puis remis
	   comme avant. */
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	border: 1.5px solid var(--lmp-studio-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-studio-muted-strong);
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lmp-studio__tab:hover {
	border-color: var(--lmp-lavande-clair);
	color: var(--lmp-brun);
}

.lmp-studio__tab.is-selected {
	border-color: transparent;
	background: var(--lmp-brun);
	color: var(--lmp-blanc);
	box-shadow: var(--lmp-studio-shadow-dark);
}

/* Prix du vêtement sélectionné (2026-09-03, demande de Christine -- voir
   buildTopBar() dans configurateur.js). Même badge que
   .lmp-studio__mascot-price-amount plus bas pour rester cohérent. */
.lmp-studio__garment-price {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--lmp-brun-cuir);
	background: var(--lmp-jaune);
	padding: 0.4rem 0.85rem;
	border-radius: 10px;
	white-space: nowrap;
	flex-shrink: 0;
	margin: 0;
}

.lmp-studio__topbar-label {
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lmp-studio-muted);
	white-space: nowrap;
	margin-right: 0.2rem;
}

.lmp-studio__sizes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.lmp-studio__size-btn {
	font-family: var(--font-heading);
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	border: 1.5px solid var(--lmp-studio-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-studio-muted-strong);
	font-size: 0.9rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lmp-studio__size-btn:hover {
	border-color: var(--lmp-lavande-clair);
	color: var(--lmp-brun);
}

.lmp-studio__size-btn.is-selected {
	border-color: transparent;
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
}

.lmp-studio__swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	/* flex-basis:100% (2026-09-10) -- .lmp-studio__topbar empile ses groupes
	   par simple manque de place sur la ligne (flex-wrap), jamais un rang
	   dédié : avec peu de pastilles de taille (pantalon 3, Ensemble 2), les
	   couleurs avaient assez de place pour remonter sur LA MÊME ligne que
	   "Taille", à droite -- rangée déformée par rapport à un vêtement à 7
	   tailles (hoodie/crewneck/tshirt), où ça tombait juste par coïncidence
	   sur sa propre ligne. flex-basis:100% force TOUJOURS sa propre ligne,
	   peu importe le nombre de pastilles de taille -- même rendu pour tous
	   les vêtements (bug trouvé sur pantalon ET Ensemble des Minis). */
	flex-basis: 100%;
}

/* Couleur du pantalon (Ensemble des Minis, 2026-09-10) -- rangée distincte de
   celle du haut juste au-dessus, même style de pastilles mais visuellement
   séparée pour ne pas laisser croire à une seule et même liste de couleurs. */
.lmp-studio__swatches--pantalon {
	margin-top: 0.5rem;
}

.lmp-studio__guide-link {
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--lmp-lavande-aa);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	white-space: nowrap;
	margin-left: 0.3rem;
}

.lmp-studio__guide-link:hover {
	color: var(--lmp-brun);
}

.lmp-guide-overlay {
	position: fixed;
	inset: 0;
	background: rgba(61, 43, 31, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
	z-index: 10000;
}

.lmp-guide-overlay__box {
	position: relative;
	max-width: min(900px, 100%);
	max-height: 100%;
	background: var(--lmp-blanc);
	border-radius: 16px;
	padding: 0.75rem;
	box-shadow: 0 20px 60px -20px rgba(61, 43, 31, 0.6);
	overflow: auto;
}

.lmp-guide-overlay__img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.lmp-guide-overlay__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--lmp-brun);
	color: var(--lmp-blanc);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px -4px rgba(61, 43, 31, 0.5);
}

/* ==========================================================
   Popup "Choisir une image / une police" -- refonte 2026-09-09
   (maquette Claude Design fournie par Christine : navigation par
   catégories à gauche, favoris/récentes, aperçu au survol, sélection
   puis confirmation). Palette/typographie adaptées aux tokens du
   thème (--lmp-* / --font-*) plutôt que le crème/terracotta/Lora de la
   maquette de référence -- même esprit que le reste de ce fichier
   (voir le commentaire en haut du fichier). Même patron position:
   fixed/fond assombri que .lmp-guide-overlay plus haut, boîte bien
   plus grande (navigation + grille + pied de page).
   ========================================================== */

.lmp-bib {
	position: fixed;
	inset: 0;
	background: rgba(61, 43, 31, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	z-index: 10000;
	--lmp-bib-hairline: rgba(61, 43, 31, 0.1);
	--lmp-bib-wash: rgba(155, 126, 189, 0.12);
}

/* Icônes SVG inline (voir svgIcon() dans configurateur.js) -- taille par
   défaut, TOUJOURS surchargée par une classe de contexte plus loin dans ce
   fichier (.lmp-bib__quick-icon, .lmp-bib__search-icon, etc.) : placée ici,
   tout en haut de la section, pour que ces règles de contexte (même
   spécificité, une seule classe) gagnent par ordre de cascade plutôt que
   d'être écrasées par celle-ci si elle apparaissait plus bas. */
.lmp-bib-icon {
	display: inline-flex;
	width: 100%;
	height: 100%;
}
.lmp-bib-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.lmp-bib__box {
	width: min(1180px, 100%);
	height: min(860px, calc(100vh - 48px));
	background: var(--lmp-creme);
	border-radius: 18px;
	box-shadow: 0 40px 90px -30px rgba(61, 43, 31, 0.5);
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	font-family: var(--font-body);
}

/* ---- En-tête ---- */
.lmp-bib__header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--lmp-bib-hairline);
	background: var(--lmp-blanc-casse);
}

.lmp-bib__header-title {
	flex: 0 0 auto;
}

.lmp-bib__eyebrow {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lmp-lavande-aa);
	font-weight: 700;
}

.lmp-bib__heading {
	margin: 2px 0 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--lmp-brun);
}

.lmp-bib__search-wrap {
	flex: 1 1 auto;
	max-width: 460px;
	margin-left: auto;
	position: relative;
	display: flex;
	align-items: center;
}

.lmp-bib__search-icon {
	position: absolute;
	left: 14px;
	width: 17px;
	height: 17px;
	color: var(--lmp-text-light);
	pointer-events: none;
}

.lmp-bib__search {
	width: 100%;
	padding: 11px 14px 11px 40px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--lmp-brun);
	border: 1.5px solid var(--lmp-bib-hairline);
	border-radius: 12px;
	box-sizing: border-box;
	background: var(--lmp-blanc);
}
.lmp-bib__search:focus {
	outline: none;
	border-color: var(--lmp-lavande);
}

.lmp-bib__close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 100px;
	border: 1.5px solid var(--lmp-bib-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-brun);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lmp-bib__close:hover {
	border-color: var(--lmp-lavande);
	color: var(--lmp-lavande-aa);
}
.lmp-bib__close .lmp-bib-icon {
	width: 16px;
	height: 16px;
}

/* ---- Corps : nav + contenu ---- */
.lmp-bib__body {
	display: grid;
	grid-template-columns: 270px 1fr;
	min-height: 0;
}

.lmp-bib__nav {
	border-right: 1px solid var(--lmp-bib-hairline);
	background: var(--lmp-creme-dark);
	overflow-y: auto;
	padding: 14px 10px 20px;
}

.lmp-bib__quick {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--lmp-bib-hairline);
}

.lmp-bib__quick-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	background: transparent;
	color: var(--lmp-brun);
}
.lmp-bib__quick-row:hover {
	background: var(--lmp-bib-wash);
}
.lmp-bib__quick-row.is-active {
	background: var(--lmp-brun);
	color: var(--lmp-blanc-casse);
}
.lmp-bib__quick-row.is-active .lmp-bib__quick-count {
	color: rgba(253, 251, 249, 0.65);
}

.lmp-bib__quick-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.lmp-bib__quick-label {
	flex: 1;
}

.lmp-bib__quick-count {
	font-size: 11px;
	font-weight: 700;
	color: var(--lmp-text-light);
	font-variant-numeric: tabular-nums;
}

.lmp-bib__cats-label {
	padding: 4px 10px 6px;
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lmp-text-light);
	font-weight: 700;
}

.lmp-bib__cats-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lmp-bib__cat-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	text-align: left;
	background: transparent;
}
.lmp-bib__cat-row:hover {
	background: rgba(61, 43, 31, 0.05);
}
.lmp-bib__cat-row.is-active {
	background: var(--lmp-bib-wash);
}

.lmp-bib__cat-thumb {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border-radius: 9px;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-bib-hairline);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.lmp-bib__cat-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Catégories de polices -- pas d'image équivalente, voir rebuildNav dans
   configurateur.js. */
.lmp-bib__cat-thumb-fallback {
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--lmp-lavande-aa);
}

.lmp-bib__cat-text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.lmp-bib__cat-label {
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--lmp-brun);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lmp-bib__cat-meta {
	font-size: 11px;
	color: var(--lmp-text-light);
	margin-top: 1px;
}

/* ---- Contenu principal ---- */
.lmp-bib__content {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 0;
	min-width: 0;
}

.lmp-bib__content-headwrap {
	padding: 16px 24px 12px;
	border-bottom: 1px solid var(--lmp-bib-hairline);
}

.lmp-bib__crumb {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lmp-lavande-aa);
	font-weight: 700;
}

.lmp-bib__content-title {
	margin: 3px 0 0;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	color: var(--lmp-brun);
}

.lmp-bib__result-line {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--lmp-text-light);
}

.lmp-bib__scroll-outer {
	position: relative;
	min-height: 0;
}

.lmp-bib__scroll {
	height: 100%;
	overflow-y: auto;
	padding: 18px 24px 24px;
	box-sizing: border-box;
}

.lmp-bib__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: 12px;
}

.lmp-bib__tile {
	position: relative;
	border-radius: 14px;
	padding: 10px 8px 8px;
	cursor: pointer;
	background: var(--lmp-blanc-casse);
	border: 1.5px solid var(--lmp-bib-hairline);
	box-shadow: 0 1px 2px rgba(61, 43, 31, 0.05);
	transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s, border-color 0.18s;
}
.lmp-bib__tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -12px rgba(61, 43, 31, 0.3);
}
.lmp-bib__tile.is-selected {
	border-color: var(--lmp-lavande);
	box-shadow: 0 8px 18px -10px rgba(155, 126, 189, 0.8);
}

.lmp-bib__tile-thumb {
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	background: var(--lmp-creme-dark);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.lmp-bib__tile-img {
	width: 78%;
	height: 78%;
	object-fit: contain;
}

.lmp-bib__tile-thumb--font {
	background: var(--lmp-blanc);
}

.lmp-bib__tile-font-text {
	font-size: 22px;
	color: var(--lmp-brun);
	text-align: center;
	padding: 0 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 100%;
}

.lmp-bib__tile-name {
	margin: 8px 0 0;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 1.3;
	color: var(--lmp-brun);
	text-align: center;
	min-height: 32px;
}

.lmp-bib__tile-fav {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 26px;
	height: 26px;
	border-radius: 100px;
	border: 1px solid var(--lmp-bib-hairline);
	background: rgba(253, 251, 249, 0.92);
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--lmp-text-light);
}
.lmp-bib__tile-fav:hover {
	border-color: var(--lmp-lavande);
}
.lmp-bib__tile-fav.is-fav {
	color: #c0577b;
}
.lmp-bib__tile-fav .lmp-bib-icon {
	width: 13px;
	height: 13px;
}

.lmp-bib__tile-check {
	position: absolute;
	top: 7px;
	left: 7px;
	width: 22px;
	height: 22px;
	border-radius: 100px;
	background: var(--lmp-lavande);
	display: none;
	place-items: center;
	color: var(--lmp-blanc);
}
.lmp-bib__tile.is-selected .lmp-bib__tile-check {
	display: grid;
}
.lmp-bib__tile-check .lmp-bib-icon {
	width: 12px;
	height: 12px;
}

.lmp-bib__empty {
	padding: 60px 20px;
	text-align: center;
}
.lmp-bib__empty-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 18px;
	color: var(--lmp-brun);
}
.lmp-bib__empty-sub {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--lmp-text-light);
}

/* ---- Aperçu au survol (desktop -- masqué sous 760px, voir plus bas) ---- */
.lmp-bib__preview {
	display: none;
	position: absolute;
	right: 24px;
	bottom: 20px;
	width: 190px;
	max-width: calc(100% - 48px);
	background: var(--lmp-blanc-casse);
	border: 1px solid var(--lmp-bib-hairline);
	border-radius: 16px;
	box-shadow: 0 24px 48px -20px rgba(61, 43, 31, 0.5);
	padding: 14px;
	pointer-events: none;
	box-sizing: border-box;
}
.lmp-bib__preview.is-visible {
	display: block;
}

.lmp-bib__preview-tile {
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: 12px;
	background: var(--lmp-creme-dark);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.lmp-bib__preview-img {
	width: 80%;
	height: 80%;
	object-fit: contain;
}
.lmp-bib__preview-font-text {
	font-size: 30px;
	color: var(--lmp-brun);
	text-align: center;
	padding: 0 8px;
}

.lmp-bib__preview-name {
	margin: 10px 0 0;
	font-family: var(--font-heading);
	font-size: 15px;
	color: var(--lmp-brun);
	line-height: 1.3;
}
.lmp-bib__preview-cat {
	margin: 3px 0 0;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lmp-lavande-aa);
	font-weight: 700;
}

/* ---- Pied de page ---- */
.lmp-bib__footer {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	border-top: 1px solid var(--lmp-bib-hairline);
	background: var(--lmp-blanc-casse);
	flex-wrap: wrap;
}

.lmp-bib__footer-sel {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.lmp-bib__footer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 100px;
	background: var(--lmp-creme-dark);
	color: var(--lmp-text-light);
	font-size: 12px;
	font-weight: 700;
	box-sizing: border-box;
}
.lmp-bib__footer-badge.is-active {
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
}

.lmp-bib__footer-label {
	font-size: 13px;
	color: var(--lmp-brun);
}

.lmp-bib__footer-clear {
	border: 0;
	background: transparent;
	color: var(--lmp-lavande-aa);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	padding: 4px 2px;
}
.lmp-bib__footer-clear:hover {
	text-decoration: underline;
}

.lmp-bib__footer-spacer {
	flex: 1;
}

/* ---- Mobile : nav empilée au-dessus du contenu, aperçu au survol masqué
   (pas de vrai survol tactile, la carte flottante ne ferait que cacher la
   grille) ---- */
@media (max-width: 760px) {
	.lmp-bib {
		padding: 0;
	}
	.lmp-bib__box {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
	.lmp-bib__body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		overflow-y: auto;
	}
	.lmp-bib__nav {
		max-height: 200px;
		border-right: 0;
		border-bottom: 1px solid var(--lmp-bib-hairline);
	}
	.lmp-bib__header {
		flex-wrap: wrap;
		gap: 10px;
	}
	.lmp-bib__search-wrap {
		max-width: none;
		flex: 1 1 100%;
		order: 3;
	}
	.lmp-bib__preview {
		display: none !important;
	}
}

.lmp-configurateur__voir-tout {
	display: block;
	width: 100%;
	margin-bottom: 0.7rem;
}

.lmp-studio__swatch-btn {
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid transparent;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 1.5px var(--lmp-studio-hairline);
	transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.lmp-studio__swatch-btn:hover {
	transform: translateY(-1px);
}

.lmp-studio__swatch-btn.is-selected {
	border-color: var(--lmp-lavande);
	box-shadow: 0 0 0 2px var(--lmp-blanc), 0 2px 6px -1px rgba(61, 43, 31, 0.35);
}

/* Stock à 0 (géré depuis CocktailOS) : visible mais clairement indisponible --
   jamais cachée, pour ne pas laisser croire que la couleur n'existe pas. */
.lmp-studio__swatch-btn.is-indisponible {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

.lmp-studio__swatch-btn.is-indisponible:hover {
	transform: none;
}

.lmp-studio__swatch-dot {
	width: 31px;
	height: 31px;
	border-radius: 50%;
	border: 1px solid rgba(61, 43, 31, 0.15);
	display: block;
}

/* ==========================================================
   Corps du studio : outils | canevas | panneau
   ========================================================== */

.lmp-studio__body {
	display: grid;
	/* 320px -> 292px (2026-09-09) : quelques pixels de moins pour le panneau
	   de droite (recherche/catégories/couleurs, qui n'a jamais eu besoin de
	   toute cette largeur) donnés à la colonne centrale -- le cadre photo,
	   en 100% de cette colonne à ratio fixe (voir .lmp-studio__frame-viewport),
	   grandit d'autant. Combiné aux rangées de boutons compactées au-dessus
	   (voir .lmp-studio__section-btn/.lmp-studio__piece-select--overlay),
	   répond à la demande explicite de Félix : moins de place pour les
	   onglets, plus de place pour le vêtement. */
	grid-template-columns: 92px minmax(0, 1fr) 292px;
	gap: 1.25rem;
	align-items: start;
}

@media ( max-width: 860px ) {
	.lmp-studio__body {
		grid-template-columns: 1fr;
	}

	.lmp-studio__toolbar {
		flex-direction: row;
	}
}

/* Pièce (Ensemble des Minis : Crewneck/Pantalon) SOUS le configurateur, en
   pastilles sur une ligne -- déplacé hors de la colonne de gauche le
   2026-09-10 (demande de Félix). Côté (Face/Dos) et Zone (Poitrine/Bras...)
   ont déménagé DANS la carte du mockup le même jour (voir
   .lmp-studio__canvas-header/.lmp-studio__section-select) -- ce wrapper ne
   porte donc plus qu'un seul groupe, gardé pour la cohérence de marges avec
   le reste de la mise en page si Félix ajoute un jour un autre groupe ici. */
.lmp-studio__selectors-below {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	max-width: 100%;
	margin: 1.25rem 0;
}

.lmp-studio__toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-studio-hairline);
	border-radius: 20px;
	padding: 0.75rem;
	box-shadow: var(--lmp-studio-shadow-sm);
}

.lmp-studio__tool-btn {
	font-family: var(--font-heading);
	padding: 0.8rem 0.4rem;
	border-radius: 14px;
	border: 1.5px solid var(--lmp-studio-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-studio-muted-strong);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--lmp-studio-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lmp-studio__tool-btn:hover:not(:disabled):not(.is-active) {
	border-color: var(--lmp-lavande-clair);
	color: var(--lmp-brun);
}

.lmp-studio__tool-btn.is-active {
	border-color: transparent;
	background: var(--lmp-brun);
	color: var(--lmp-blanc);
	box-shadow: var(--lmp-studio-shadow-dark);
}

.lmp-studio__tool-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
}

.lmp-studio__toolbar-divider {
	height: 1px;
	background: var(--lmp-studio-hairline);
	margin: 0.35rem 0.15rem;
}

/* L'extra Mascotte n'est pas un outil de zone (Texte/Visuel) : accent
   brun cuir + prix affiché en permanence, pour signaler un supplément. */
.lmp-studio__tool-btn--extra {
	position: relative;
	border-color: var(--lmp-beige);
	background: var(--lmp-studio-wash-cuir);
	color: var(--lmp-brun-cuir);
}

.lmp-studio__tool-btn--extra:hover:not(:disabled):not(.is-active) {
	border-color: var(--lmp-brun-cuir);
	background: var(--lmp-studio-wash-cuir-strong);
	color: var(--lmp-brun-cuir);
}

.lmp-studio__tool-btn--extra.is-active {
	border-color: transparent;
	background: var(--lmp-brun-cuir);
	color: var(--lmp-blanc);
	box-shadow: var(--lmp-studio-shadow-gold);
}

.lmp-studio__tool-price {
	position: absolute;
	top: -7px;
	right: -6px;
	background: var(--lmp-jaune);
	color: var(--lmp-brun);
	font-family: var(--font-heading);
	font-size: 0.58rem;
	font-weight: 700;
	padding: 0.12rem 0.32rem;
	border-radius: 999px;
	box-shadow: 0 2px 5px -1px rgba(61, 43, 31, 0.35);
	white-space: nowrap;
}

/* Fond commun aux 6 vêtements (fourni par Christine) -- remplace le dégradé
   crème provisoire. Prévu pour recevoir bientôt les photos vêtement en PNG
   découpé/transparent (au lieu des photos actuelles avec fond déjà cuit dans
   l'image) : à ce moment-là ce fond redevient visible AUTOUR du vêtement au
   lieu d'être caché dessous. */
.lmp-studio__canvas {
	background-color: var(--lmp-creme);
	background-image: url( '/wp-content/uploads/2026/09/fond-configurateur.jpg' );
	background-size: cover;
	background-position: center;
	border: 1px solid var(--lmp-studio-hairline);
	border-radius: 20px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* 1rem -> 0.6rem (2026-09-09) : moins d'espace perdu entre le sélecteur
	   de zone (seule rangée restante au-dessus, voir plus bas) et la photo. */
	gap: 0.6rem;
	min-height: 420px;
}

.lmp-studio__canvas-empty {
	opacity: 0.65;
	font-weight: 600;
}

/* En-tête de la carte du mockup : onglets de VUE (Face/Dos/Vue d'ensemble),
   au-dessus de la photo -- design confirmé par Félix le 2026-09-10 (variante
   "1b" de Onglets configurateur.dc.html). Filet de séparation avec la photo
   en dessous, même patron que .lmp-studio__section-select (zones) plus bas. */
.lmp-studio__canvas-header {
	display: flex;
	align-items: center;
	width: 100%;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--lmp-studio-hairline);
}

.lmp-studio__view-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.6rem;
	max-width: 100%;
	overflow-x: auto;
}

/* Onglets SOULIGNÉS (pas en pastilles, contrairement aux zones juste en
   dessous de la photo) -- distingue visuellement au premier coup d'œil les
   deux groupes de contrôles, même s'ils pilotent tous deux un état "actif". */
.lmp-studio__view-tab {
	font-family: var(--font-heading);
	padding: 0.5rem 0.1rem 0.65rem;
	border: none;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--lmp-studio-muted);
	font-size: 0.92rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.lmp-studio__view-tab:hover:not(.is-active) {
	color: var(--lmp-brun);
}

.lmp-studio__view-tab.is-active {
	border-bottom-color: var(--lmp-lavande);
	color: var(--lmp-brun);
}

/* Fenêtre fixe (taille/ratio/coins arrondis, masque le débordement) --
   .lmp-studio__frame vit DEDANS et se zoome/déplace par transform (voir plus
   bas et buildCanvas()/zoomTransformFor() en JS) : "Vue d'ensemble" vs
   "Poitrine"/"Bras..." (2026-09-09) sans dupliquer ni retoucher le contenu
   (img + zones de texte/visuel déjà positionnées en % DANS .lmp-studio__frame
   -- un enfant positionné en % reste correct sous n'importe quel transform du
   parent, aucune des deux logiques n'a eu besoin de changer). */
.lmp-studio__frame-viewport {
	position: relative;
	width: 100%;
	margin: 0 auto;
	border-radius: 16px;
	overflow: hidden;
	background: transparent;
	/* Pas de max-width fixe (ex-420px) : avec les PNG découpés/transparents,
	   le cadre doit remplir .lmp-studio__canvas pour que le fond photo
	   (fond-configurateur.jpg) reste visible en pleine largeur autour du
	   vêtement, plutôt qu'un petit carré centré.
	   Ratio fixe PLUS LARGE que le ratio naturel des photos (~3:2 = 1.5) --
	   objectif : rogner UNIQUEMENT en hauteur (le bandeau de fond vide
	   au-dessus du col) sans jamais toucher aux côtés, sinon object-fit:
	   cover rogne plutôt en largeur et coupe le bout des manches (tendues
	   presque jusqu'aux bords de la photo). Un ratio 4:3 (1.33, plus étroit
	   que 1.5) faisait exactement ça -- corrigé en 16:9 (1.78, plus large),
	   qui ne rogne que le haut/bas quel que soit le vêtement tant que la
	   photo source garde le même ratio ~3:2. */
	aspect-ratio: 16 / 9;
}

.lmp-studio__frame {
	position: relative;
	width: 100%;
	height: 100%;
	background: transparent;
	transition: transform 0.35s ease;
}

.lmp-studio__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 75%;
	filter: drop-shadow( 0 14px 20px rgba( 61, 43, 31, 0.15 ) );
}

/* Remplace .lmp-studio__photo quand aucune photo n'existe encore pour le
   produit (ex. Ensemble des Minis) -- les zones d'impression restent
   affichées par-dessus (voir buildCanvas), la personnalisation continue de
   fonctionner sans aperçu visuel. */
.lmp-studio__photo-a-venir {
	margin: 0;
	padding: 3rem 1.5rem;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	opacity: 0.65;
	font-weight: 600;
}

/* Sélecteur de PIÈCE (Crewneck/Pantalon, Ensemble seulement) et sélecteur de
   CÔTÉ (Face/Dos/Vue d'ensemble) -- déplacés dans la colonne d'outils de
   gauche (.lmp-studio__toolbar) le 2026-09-09, demande de Félix ("je
   mettrais ces onglets à gauche, en haut du choix Visuel/Texte/Pistache")
   pour dégager complètement le cadre photo. Empilés en colonne (pas en
   rangée) pour tenir dans la largeur étroite de cette colonne, comme
   .lmp-studio__tool-btn juste en dessous. Bordure pointillée : sépare
   visuellement ce groupe du suivant (pièce -> côté -> zone, voir
   buildLeftToolbar en JS) sans avoir besoin d'un libellé de section. */
/* Pastilles sur UNE SEULE LIGNE (pas empilées en colonne) -- ces sélecteurs
   ne vivent plus dans la colonne étroite de gauche depuis le 2026-09-10
   (déplacés sous le configurateur en pleine largeur, voir .lmp-studio__
   selectors-below et render() en JS) : la colonne justifiait l'empilement
   vertical d'origine (2026-09-09), plus nécessaire ici. flex-wrap: nowrap +
   overflow-x: auto plutôt que wrap : demande explicite de Félix ("une seule
   ligne") -- défile horizontalement au besoin sur un écroit étroit plutôt
   que de retomber sur plusieurs lignes. */
.lmp-studio__piece-select {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	margin-bottom: 0.6rem;
	padding-bottom: 0.6rem;
	border-bottom: 1.5px dashed var(--lmp-studio-hairline);
}

.lmp-studio__piece-select-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.4rem;
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 2px;
}

/* "Vue d'ensemble" (bouton Face/Dos) : face et dos empilées, lecture seule
   -- voir buildStackedSidesPreview()/buildStaticSideFrame() en JS. Chaque
   .lmp-studio__side-static reprend .lmp-studio__frame-viewport/__frame tels
   quels (même rognage 16:9/fond) pour rester visuellement identique aux
   cadres Face/Dos individuels. */
.lmp-studio__sides-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.lmp-studio__side-static {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Cliquable dans le studio (jamais sur l'aperçu panier/commande en lecture
   seule) -- 2026-09-10, voir buildStaticSideFrame() en JS : cliquer une
   photo empilée de la Vue d'ensemble bascule directement sur cette vue
   pour ajouter/enlever une image ou un texte. */
.lmp-studio__side-static.is-clickable {
	cursor: pointer;
	border-radius: 16px;
	transition: box-shadow 0.15s ease;
}

.lmp-studio__side-static.is-clickable:hover,
.lmp-studio__side-static.is-clickable:focus-visible {
	box-shadow: var(--lmp-studio-shadow-md);
	outline: none;
}

.lmp-studio__side-static.is-clickable:hover .lmp-studio__frame-viewport,
.lmp-studio__side-static.is-clickable:focus-visible .lmp-studio__frame-viewport {
	outline: 2px solid var(--lmp-lavande);
	outline-offset: 2px;
}

.lmp-studio__side-static-label {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--lmp-studio-muted-strong);
	text-align: center;
}

.lmp-studio__side-static.is-clickable .lmp-studio__side-static-label::after {
	content: '— cliquer pour modifier';
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	opacity: 0.7;
	margin-left: 0.35em;
}

/* Sélecteur de ZONE (Poitrine/Bras.../etc.), en pastilles juste SOUS la
   photo, DANS la carte du mockup -- design confirmé par Félix le 2026-09-10
   (variante "1b" de Onglets configurateur.dc.html : "les zones en pastilles
   juste sous la photo, à l'intérieur de la même carte"), après deux
   emplacements jugés "pas bons" : les rectangles pointillés superposés à
   l'image (2026-09-07, trop envahissants) puis une rangée pleine largeur
   dérivant sous tout le configurateur (2026-09-09/10). Label "Zone" +
   pastilles sur une seule ligne défilante, séparés du cadre photo par un
   filet (même hairline que les autres séparateurs de cette carte). */
.lmp-studio__section-select {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	width: 100%;
	max-width: 100%;
	padding-top: 0.9rem;
	border-top: 1px solid var(--lmp-studio-hairline);
}

.lmp-studio__section-select-label {
	flex-shrink: 0;
}

/* Rappel droite/gauche sous les pastilles de zone (2026-09-21) : les libellés
   suivent l'enfant qui porte le vêtement, pas l'écran -- voir buildSideHint()
   dans configurateur.js. Pleine largeur, sous la rangée de pastilles. */
.lmp-studio__side-hint {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--lmp-brun);
	opacity: 0.85;
}

.lmp-studio__side-hint-icon {
	flex: 0 0 auto;
	overflow: visible;
}

.lmp-studio__side-hint-icon .is-body {
	fill: var(--lmp-lavande-clair, #e6dcf0);
	stroke: var(--lmp-lavande, #9b7ebd);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

.lmp-studio__side-hint-icon .is-letter {
	font: 700 11px/1 var(--font-heading, sans-serif);
	fill: var(--lmp-brun, #3d2b1f);
}

.lmp-studio__section-select-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.4rem;
	min-width: 0;
	overflow-x: auto;
	padding-bottom: 2px;
}

.lmp-studio__section-btn {
	font-family: var(--font-heading);
	/* Agrandi le 2026-09-10 (Marie-Christine : "le plus gros c'était sur
	   les pastilles Face/Dos/.../Bras gauche" -- PAS les onglets vêtement
	   en haut, voir .lmp-studio__tab plus haut resté à sa taille d'origine). */
	padding: 0.65rem 1.1rem;
	border-radius: 999px;
	border: 1.5px solid var(--lmp-studio-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-studio-muted-strong);
	font-size: 0.92rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--lmp-studio-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	/* Une seule ligne de pastilles (voir .lmp-studio__section-select/
	   __piece-select-buttons ci-dessus) : jamais rétrécies ni le texte
	   coupé sur deux lignes -- le conteneur défile plutôt. */
	flex-shrink: 0;
	white-space: nowrap;
}

.lmp-studio__section-btn:hover:not(.is-active) {
	border-color: var(--lmp-lavande-clair);
	color: var(--lmp-brun);
}

.lmp-studio__section-btn.is-active {
	border-color: transparent;
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
	box-shadow: var(--lmp-studio-shadow-dark);
}

/* Petit point plutôt qu'une bordure de couleur : signale discrètement
   qu'une section porte déjà du contenu sans se confondre avec .is-active. */
.lmp-studio__section-btn.has-content::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 0.4rem;
	border-radius: 50%;
	background: var(--lmp-sauge);
	vertical-align: middle;
}

.lmp-studio__section-btn.is-active.has-content::after {
	background: var(--lmp-blanc);
}

/* Contour de la zone active sur la photo : invisible par défaut, ne
   s'affiche qu'au survol du cadre ou pendant un glisser actif (classe
   .is-dragging posée par makeContentDraggable) — juste assez de repère
   pour sentir la limite du glisser sans encombrer l'aperçu du vêtement en
   permanence comme les anciens rectangles pointillés toujours visibles. */
.lmp-studio__zone-outline {
	position: absolute;
	border: 2px dashed rgba( 155, 126, 189, 0.55 );
	border-radius: 12px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.lmp-studio__frame:hover .lmp-studio__zone-outline,
.lmp-studio__frame.is-dragging .lmp-studio__zone-outline {
	opacity: 1;
}

.lmp-studio__content-clipart {
	position: absolute;
	transform: translate( -50%, -50% );
	pointer-events: none;
}

.lmp-studio__content-text {
	position: absolute;
	transform: translate( -50%, -50% );
	/* pre (pas pre-wrap/pre-line) : respecte les \n tapés dans le textarea
	   (retour à la ligne, voir buildTextPanel()) sans jamais laisser le
	   navigateur retourner une ligne trop longue de lui-même -- le calcul
	   de taille de police (fontSizeBounds(), configurateur.js) suppose déjà
	   que chaque ligne tient telle quelle, un retour automatique en plus
	   fausserait ce calcul. */
	white-space: pre;
	font-size: 1.1rem;
	font-weight: 700;
	/* Doit rester égal à TEXT_LINE_HEIGHT_FACTOR dans configurateur.js --
	   fontSizeBounds() calcule la hauteur du bloc multi-lignes avec cette
	   même valeur pour que la taille de police choisie corresponde au
	   rendu réel. */
	line-height: 1.2;
	color: var(--lmp-brun);
	text-align: center;
	pointer-events: none;
}

/* Contenu de la zone actuellement active : seul lui devient glissable à la
   souris/au toucher (voir makeContentDraggable()) — les autres zones
   restent pointer-events:none pour ne pas intercepter les clics destinés
   à sélectionner une autre zone. touch-action:none empêche le geste de
   glissé de déclencher le défilement/zoom natif du navigateur au toucher. */
.lmp-studio__content-clipart.is-draggable,
.lmp-studio__content-text.is-draggable {
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
}

.lmp-studio__content-clipart.is-draggable:active,
.lmp-studio__content-text.is-draggable:active {
	cursor: grabbing;
}

/* Aperçu du texte de Pistache -- affiché DIRECTEMENT à l'ancre
   MASCOT_OVERLAYS (plus de repère/point pulsant autour, retiré le
   2026-09-24 : demande de Félix "enlever le point et mettre seulement le
   texte à son emplacement"). Pas le même traitement que
   .lmp-studio__content-text (zones d'impression) : ici la taille est
   TOUJOURS petite et fixe (jamais de choix de taille pour Pistache), avec
   un retour à la ligne normal plutôt que pre -- le texte n'est jamais
   positionné/dimensionné par la cliente comme un vrai graphique, seulement
   choisi dans une liste ou tapé (message personnalisé, jusqu'à 30
   caractères, voir MAX_PISTACHE_TEXT_LENGTH). */
.lmp-studio__mascot-texte {
	position: absolute;
	transform: translate( -50%, -50% );
	max-width: 34%;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--lmp-brun);
	text-align: center;
	white-space: normal;
	word-break: break-word;
	pointer-events: none;
}

/* ==========================================================
   Panneau de droite : instructions / outils de la zone active
   ========================================================== */

.lmp-studio__panel {
	background: var(--lmp-blanc);
	border: 1px solid var(--lmp-studio-hairline);
	border-radius: 20px;
	padding: 1.25rem;
	min-height: 420px;
	max-height: 520px;
	overflow-y: auto;
	box-shadow: var(--lmp-studio-shadow-sm);
}

.lmp-studio__panel-hint {
	opacity: 0.75;
	font-size: 0.95rem;
	line-height: 1.6;
	margin-top: 0.5rem;
	text-align: center;
}

.lmp-studio__extra-graphics-hint {
	opacity: 1;
	font-weight: 600;
	color: var(--lmp-brun-cuir);
	margin: 0 0 0.75rem;
}

/* Règle des graphiques inclus (2026-09-21) : toujours visible ; ambré à la
   limite (le prochain graphique coûte), rouge doux une fois le supplément
   appliqué. */
.lmp-studio__extra-graphics-hint.is-limit {
	color: #8a4b00;
	background: #fff3d6;
	border-radius: 10px;
	padding: 0.4rem 0.7rem;
}

.lmp-studio__extra-graphics-hint.is-over {
	color: #8a2b00;
	background: #ffe6dc;
	border-radius: 10px;
	padding: 0.4rem 0.7rem;
}

.lmp-studio__panel-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px dashed var(--lmp-studio-hairline);
}

.lmp-studio__panel-zone {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0;
	color: var(--lmp-brun);
}

.lmp-studio__panel-eyebrow {
	font-family: var(--font-heading);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lmp-brun-cuir);
	margin: 0 0 0.2rem;
}

.lmp-studio__mascot-locations {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.lmp-studio__mascot-phrases {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.lmp-studio__mascot-phrase-theme {
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lmp-brun-cuir);
	margin: 0.6rem 0 0.1rem;
}

.lmp-studio__mascot-phrases .lmp-studio__mascot-phrase-theme:first-child {
	margin-top: 0;
}

.lmp-studio__mascot-price {
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px dashed var(--lmp-studio-hairline);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.lmp-studio__mascot-price-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lmp-studio-muted-strong);
}

.lmp-studio__mascot-price-amount {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--lmp-brun-cuir);
	background: var(--lmp-jaune);
	padding: 0.3rem 0.6rem;
	border-radius: 10px;
	white-space: nowrap;
}

.lmp-studio__mascot-note {
	font-size: 0.72rem;
	color: var(--lmp-studio-muted);
	margin: 0.5rem 0 0;
	line-height: 1.5;
}

.lmp-studio__panel-clear {
	font-family: var(--font-heading);
	border: 1.5px solid var(--lmp-beige);
	background: var(--lmp-studio-wash-cuir);
	color: var(--lmp-brun-cuir);
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	padding: 0.4rem 0.7rem;
	border-radius: 10px;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.lmp-studio__panel-clear:hover {
	background: var(--lmp-studio-wash-cuir-strong);
}

/* ==========================================================
   Bas de page : bouton de soumission
   ========================================================== */

.lmp-studio__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.lmp-studio__submit {
	min-width: 220px;
}

/* Total courant (2026-09-03, demande de Christine -- voir totalCourant()
   dans configurateur.js). Simple estimation affichée avant l'ajout au
   panier, sans encadré coloré -- l'accent visuel reste sur le bouton. */
.lmp-studio__total-courant {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--lmp-brun);
	margin: 0;
}

/* ==========================================================
   Contrôles réutilisés (texte, police, clipart)
   ========================================================== */

.lmp-configurateur__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
	gap: 0.6rem;
	margin: 0.75rem 0;
}

/* Grille bornée pour la recherche/le parcours complet (polices ET cliparts) :
   "À la une" est une simple valeur du sélecteur de catégorie (voir
   effectiveFontCategory/effectiveClipartCategory dans configurateur.js), donc
   une seule grille au lieu d'une section "à la une" séparée -- tout le
   défilement reste contenu ici plutôt que d'étirer la page entière (demande
   explicite 2026-09-03). */
.lmp-configurateur__browse-scroll {
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 0.25rem;
}

.lmp-configurateur__option {
	font-family: var(--font-heading);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.65rem 0.75rem;
	border: 1.5px solid var(--lmp-studio-hairline);
	border-radius: 12px;
	background: var(--lmp-blanc);
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--lmp-brun);
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.lmp-configurateur__option:hover {
	border-color: var(--lmp-lavande-clair);
}

.lmp-configurateur__option.is-selected {
	border-color: var(--lmp-lavande);
	background: var(--lmp-studio-wash);
	font-weight: 700;
	box-shadow: var(--lmp-studio-shadow-sm);
}

.lmp-configurateur__clipart-option,
.lmp-configurateur__font-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.lmp-configurateur__clipart-emoji {
	font-size: 1.75rem;
	line-height: 1;
}

.lmp-configurateur__clipart-thumb {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
}

.lmp-configurateur__load-more {
	display: block;
	margin: 0.5rem auto 0;
}

.lmp-configurateur__category-select,
.lmp-configurateur__font-search {
	width: 100%;
	padding: 0.6rem 0.8rem;
	font-size: 0.9rem;
	font-family: var(--font-body, inherit);
	color: var(--lmp-brun);
	border: 1.5px solid var(--lmp-studio-hairline);
	border-radius: 12px;
	box-sizing: border-box;
	margin-bottom: 0.7rem;
	background: var(--lmp-blanc);
	transition: border-color 0.15s ease;
}

.lmp-configurateur__category-select:focus,
.lmp-configurateur__font-search:focus {
	outline: none;
	border-color: var(--lmp-lavande);
}

.lmp-configurateur__font-preview {
	font-size: 1.1rem;
}

.lmp-configurateur__font-label {
	font-family: var(--font-body, inherit);
	font-size: 0.75rem;
	opacity: 0.7;
}

/* Puces de sélection (Texte 1/Texte 2/+ Ajouter) -- plusieurs textes/visuels
   par zone (2026-09-09). Même patron pilule que .lmp-studio__size-btn
   ci-dessus, en plus compact pour tenir en ligne au-dessus du champ. */
.lmp-configurateur__item-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
}

.lmp-configurateur__item-chip {
	font-family: var(--font-heading);
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1.5px solid var(--lmp-studio-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-studio-muted-strong);
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lmp-configurateur__item-chip:hover {
	border-color: var(--lmp-lavande-clair);
	color: var(--lmp-brun);
}

.lmp-configurateur__item-chip.is-active {
	border-color: transparent;
	background: var(--lmp-lavande);
	color: var(--lmp-blanc);
}

.lmp-configurateur__item-chip--add {
	background: none;
	border-style: dashed;
	color: var(--lmp-lavande-aa);
}

.lmp-configurateur__item-chip--add:hover {
	border-style: dashed;
	background: var(--lmp-studio-wash);
}

.lmp-configurateur__text {
	margin: 0 0 1rem;
}

.lmp-configurateur__text-input {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lmp-brun);
	border: 1.5px solid var(--lmp-studio-hairline);
	border-radius: 12px;
	box-sizing: border-box;
	background: var(--lmp-creme);
	transition: border-color 0.15s ease, background 0.15s ease;
	/* Textarea depuis le 2026-09-23 (retour à la ligne, voir
	   buildTextPanel()) -- resize vertical seulement (jamais horizontal,
	   casserait la largeur du panneau) ; le champ "prénom manche" (1 ligne,
	   rows=1) n'a pas besoin d'être redimensionnable. */
	resize: vertical;
}

.lmp-configurateur__text-input[rows='1'] {
	resize: none;
}

.lmp-configurateur__text-input:focus {
	outline: none;
	border-color: var(--lmp-lavande);
	background: var(--lmp-blanc);
}

.lmp-configurateur__text-counter {
	font-size: 0.8rem;
	opacity: 0.6;
	text-align: right;
	margin: 0.25rem 0 0;
}

.lmp-configurateur__text-limit-warning {
	font-size: 0.8rem;
	color: var(--lmp-brun-cuir, #8a6d3b);
	background: #fdf3e0;
	border-radius: 8px;
	padding: 0.4rem 0.6rem;
	margin: 0.4rem 0 0;
}

.lmp-configurateur__btn {
	font-family: var(--font-heading);
	padding: 0.75rem 1.6rem;
	border-radius: 14px;
	border: none;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.lmp-configurateur__btn:hover:not(:disabled) {
	transform: translateY( -1px );
}

.lmp-configurateur__btn--primary {
	background: linear-gradient( 155deg, var(--lmp-lavande-clair), var(--lmp-lavande) );
	color: var(--lmp-blanc);
	box-shadow: var(--lmp-studio-shadow-cta);
}

.lmp-configurateur__btn--primary:disabled {
	background: #aab0bd;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.lmp-configurateur__btn--secondary {
	background: var(--lmp-creme);
	color: var(--lmp-brun);
	border: 1.5px solid var(--lmp-studio-hairline);
}

/* ==========================================================
   Grosseur / couleur / position — contrôles ajoutés au panneau
   texte et visuel (taille manuelle avec repli auto-fit, couleur du
   texte, position fine par sliders en complément du glisser-déposer).
   ========================================================== */

.lmp-configurateur__field-row {
	margin: 0 0 1rem;
}

.lmp-configurateur__field-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--lmp-studio-muted);
	margin-bottom: 0.4rem;
}

.lmp-configurateur__field-label span:last-child {
	font-family: var(--font-body, inherit);
	text-transform: none;
	letter-spacing: normal;
	font-weight: 600;
	color: var(--lmp-brun);
	opacity: 0.7;
}

.lmp-configurateur__range {
	width: 100%;
	accent-color: var(--lmp-lavande);
	cursor: pointer;
}

.lmp-configurateur__range-btn-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lmp-configurateur__range-step {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1.5px solid var(--lmp-studio-hairline);
	background: var(--lmp-blanc);
	color: var(--lmp-brun);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.lmp-configurateur__range-step:hover {
	border-color: var(--lmp-lavande-clair);
}

.lmp-configurateur__position-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.lmp-configurateur__color-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.lmp-configurateur__color-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 0 0 1.5px var(--lmp-studio-hairline);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lmp-configurateur__color-swatch:hover {
	transform: translateY( -1px );
}

.lmp-configurateur__color-swatch.is-selected {
	box-shadow: 0 0 0 2px var(--lmp-blanc), 0 0 0 3.5px var(--lmp-lavande);
}

/* Sélecteur de couleur libre (<input type="color">) : même gabarit rond
   que les pastilles rapides pour s'intégrer visuellement à la même
   rangée, pas un simple rectangle natif du navigateur.

   Anneau multicolore (2026-09-23) : repérage difficile signalé par Christine --
   à taille égale et couleur pleine, cette pastille se fondait dans les
   pastilles rapides juste à côté, sans rien qui dise "il y a plus de choix
   ici". L'anneau (dégradé conique des couleurs de marque déjà utilisées
   ailleurs dans le configurateur, pas de teintes inventées) sert d'indice
   visuel permanent, discret et cohérent -- pas de tooltip custom ni de
   texte à côté, qui auraient demandé plus de DOM/JS pour peu de gain. */
.lmp-configurateur__color-picker-wrap {
	display: inline-flex;
	padding: 2.5px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		var(--lmp-lavande),
		var(--lmp-rose),
		var(--lmp-jaune),
		var(--lmp-sauge),
		var(--lmp-lavande)
	);
	box-shadow: 0 0 0 1.5px var(--lmp-studio-hairline);
	transition: transform 0.15s ease;
}

.lmp-configurateur__color-picker-wrap:hover {
	transform: translateY( -1px );
}

.lmp-configurateur__color-picker {
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 0 1.5px var(--lmp-blanc);
	background: none;
	overflow: hidden;
	display: block;
}

.lmp-configurateur__color-picker::-webkit-color-swatch-wrapper {
	padding: 0;
}

.lmp-configurateur__color-picker::-webkit-color-swatch {
	border: none;
	border-radius: 50%;
}

.lmp-configurateur__color-picker::-moz-color-swatch {
	border: none;
	border-radius: 50%;
}

/* Pastille de couleur de texte peu contrastée avec le tissu (2026-09-21) : trait
   diagonal, pas d'interdiction -- voir buildTextColorControl(). */
.lmp-configurateur__color-swatch {
	position: relative;
}

.lmp-configurateur__color-swatch.is-low-contrast::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient( 135deg, transparent 46%, rgba( 200, 60, 40, 0.9 ) 46%, rgba( 200, 60, 40, 0.9 ) 54%, transparent 54% );
	pointer-events: none;
}

.lmp-configurateur__color-warning {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	line-height: 1.35;
	color: #8a2b00;
}


/* Mode édition d'un article du panier (2026-09-25) : bandeau en haut du studio
   + message "article introuvable" au-dessus du configurateur vierge. */
.lmp-studio__edit-banner,
.lmp-studio__edit-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--lmp-creme-dark, #F0E8DD);
	color: var(--lmp-brun, #3D2B1F);
	font-size: 14px;
	line-height: 1.5;
}
.lmp-studio__edit-banner p {
	margin: 0;
}
.lmp-studio__edit-banner-title {
	font-weight: 700;
}
.lmp-studio__edit-banner-warn {
	margin-top: 6px !important;
	color: #8a4b00;
}
.lmp-studio__edit-notice a {
	margin-left: 6px;
	color: var(--lmp-lavande-aa, #815CAC);
	font-weight: 600;
}

.lmp-studio__edit-banner-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 6px;
}
.lmp-studio__edit-banner-row .lmp-studio__edit-banner-warn {
	margin: 0 !important;
	flex: 1 1 320px;
}
.lmp-studio__edit-banner-row.is-resolved .lmp-studio__edit-banner-warn {
	color: #4a6b3a;
}
.lmp-studio__edit-banner-keep {
	padding: 6px 14px;
	border: 1px solid var(--lmp-lavande-aa, #815CAC);
	border-radius: 999px;
	background: #fff;
	color: var(--lmp-lavande-aa, #815CAC);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}