/* MISTER & CO. — Personnalisation
   Chargé UNIQUEMENT sur la page dédiée (voir class-mp-page.php).
   Toutes les classes sont préfixées .mp-perso-* — aucune ne partage un nom
   avec le configurateur existant (.mc-cfg-*), par choix (voir plan §1.2).
   Palette et typographies reprises visuellement du reste du site
   (noir #0A0A0A / #111111, or #C8A45D, blanc cassé #F8F8F6,
   Playfair Display en titres, Manrope en corps de texte) sans copier une
   seule règle CSS existante. */

.mp-perso-page {
	background: #0A0A0A;
	color: #F8F8F6;
	padding: 34px clamp(24px, 3vw, 64px) 120px;
	font-family: 'Manrope', 'Helvetica Neue', sans-serif;
}

/* Neutralise le conteneur "boxed" par défaut d'Astra (.ast-container,
   max-width: 1240px) qui enveloppe cette page — trouvé par inspection directe
   du DOM (2026-07-31), c'est lui, pas notre propre CSS, qui limitait la
   largeur réelle à ~57% du viewport peu importe .mp-perso-shell. Ciblé via la
   classe de body générée par WordPress pour CE gabarit précis uniquement —
   n'affecte aucune autre page du site. */
body.page-template-page-personnalisation .ast-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Largeur alignée sur le reste du site (mesurée sur la fiche produit réelle :
   ~93-97% du viewport, gouttières ~28-64px) au lieu d'un conteneur étroit et
   centré — voir demande du 2026-07-31. */
.mp-perso-shell { max-width: 1900px; margin: 0 auto; }

.mp-perso-intro { max-width: 1040px; margin: 0 auto 48px; text-align: center; }
.mp-perso-eyebrow {
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #C8A45D;
	margin: 0 0 14px;
}
.mp-perso-title {
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(26px, 2.5vw, 38px);
	margin: 0 0 18px;
	color: #F8F8F6;
	white-space: nowrap;
}
.mp-perso-lede { font-size: 15.5px; line-height: 1.75; color: #b8b8b8; margin: 0 0 16px; }
/* Positionné maintenant sous l'aperçu/téléversement (colonne gauche), plus
   dans l'en-tête — voir demande du 2026-07-31 (callout "Message en bas"). */
.mp-perso-benefit {
	font-size: 13px; line-height: 1.7; color: #e8c164;
	background: rgba(200,164,93,.08); border-left: 2px solid #C8A45D;
	padding: 14px 18px; margin: 18px 0 0; text-align: center;
}

.mp-perso-trust-row {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px;
}
.mp-perso-trust-item {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
	font-size: 10.5px; line-height: 1.35; color: #9a9a9a;
}
.mp-perso-trust-icon {
	width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(200,164,93,.4);
	color: #C8A45D; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.mp-perso-trust-icon svg { width: 16px; height: 16px; }

.mp-perso-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.mp-perso-left { position: sticky; top: 70px; }
.mp-perso-right { padding-top: 0; }

/* ---- Upload / aperçu ---- */
.mp-perso-preview-wrap {
	border-radius: 4px; overflow: hidden; background: #050504;
	border: 1px solid rgba(200,164,93,.22); min-height: 420px;
	display: flex; align-items: center; justify-content: center;
}
.mp-perso-dropzone {
	width: 100%; padding: 60px 30px; text-align: center;
	border: 1px dashed rgba(200,164,93,.35); margin: 20px; border-radius: 3px;
	transition: border-color .3s ease, background .3s ease;
}
.mp-perso-dropzone.mp-drag-over { border-color: #C8A45D; background: rgba(200,164,93,.06); }
.mp-perso-upload-btn {
	background: #C8A45D; color: #111111; border: none; border-radius: 2px;
	padding: 16px 34px; font-family: 'Montserrat', sans-serif; font-weight: 700;
	font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
	cursor: pointer; transition: background .3s ease;
}
.mp-perso-upload-btn:hover:not(:disabled) { background: #F3D9A4; }
.mp-perso-upload-btn:disabled { opacity: .6; cursor: wait; }
.mp-perso-upload-progress {
	width: 100%; max-width: 260px; height: 4px; border-radius: 2px; margin: 16px auto 0;
	background: rgba(255,255,255,.08); overflow: hidden;
}
.mp-perso-upload-progress-bar {
	height: 100%; width: 0%; background: linear-gradient(90deg, #C8A45D, #F3D9A4);
	transition: width .2s ease;
}
/* Étape "traitement côté serveur" : la barre est déjà à 100 % mais le
   travail n'est pas fini — un pouls visuel évite qu'elle ait l'air figée. */
.mp-perso-upload-progress-bar.mp-perso-processing {
	animation: mp-progress-pulse 1.1s ease-in-out infinite;
}
@keyframes mp-progress-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.mp-perso-dropzone-hint { font-size: 12px; color: #8a8a8a; margin: 16px 0 0; }

.mp-perso-crop-stage { width: 100%; padding: 20px; }
#mp-crop-canvas { width: 100%; height: auto; display: block; border-radius: 2px; cursor: grab; touch-action: none; }
#mp-crop-canvas:active { cursor: grabbing; }
.mp-perso-crop-controls {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 16px;
}
.mp-perso-zoom-label { font-size: 12px; color: #9a9a9a; display: flex; align-items: center; gap: 8px; }
.mp-perso-link-btn {
	background: none; border: none; color: #C8A45D; font-size: 12.5px;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0;
}
.mp-perso-link-btn:hover { color: #F3D9A4; background-color: transparent !important; }

.mp-perso-quality-note {
	margin-top: 18px; font-size: 12.5px; line-height: 1.7; color: #ffffff;
	background: #131211; border: 1px solid #2a2a2a; border-radius: 2px; padding: 14px 16px;
	text-align: center;
}

/* ---- Étapes ---- */
.mp-perso-step { padding: 28px 0; border-top: 1px solid rgba(255,255,255,.07); }
.mp-perso-step:first-of-type { border-top: none; padding-top: 0; }
.mp-perso-step-title {
	display: flex; align-items: center; gap: 12px;
	font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px;
	color: #F8F8F6; margin: 0 0 18px;
	text-transform: uppercase; letter-spacing: .02em;
}
.mp-perso-step-num {
	width: 26px; height: 26px; border-radius: 50%; border: 1px solid #C8A45D;
	color: #C8A45D; font-size: 12px; display: flex; align-items: center; justify-content: center;
	font-family: 'Montserrat', sans-serif;
}

.mp-perso-family-tabs, .mp-perso-size-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mp-perso-family-tab, .mp-perso-size-tab {
	background: none; border: 1px solid #2a2a2a; color: #b8b8b8;
	padding: 9px 16px; font-size: 12.5px; border-radius: 2px; cursor: pointer;
	transition: border-color .25s ease, color .25s ease;
}
.mp-perso-family-tab.active, .mp-perso-size-tab.active { border-color: #C8A45D; color: #F3D9A4; background-color: rgba(200,164,93,.08) !important; }
/* Même correctif que .mp-perso-choice-card/.mp-perso-format-card : sans
   background-color explicite ici, la règle globale d'Astra
   "button:hover { background-color: var(--ast-global-color-1) }" (#C9C9C9)
   s'appliquait à ces onglets aussi. */
.mp-perso-family-tab:hover, .mp-perso-size-tab:hover { border-color: rgba(200,164,93,.5); color: #F3D9A4; background-color: transparent !important; }
.mp-perso-size-tab-empty { opacity: .35; cursor: not-allowed; }

.mp-perso-format-grid { display: grid; grid-template-columns: repeat(auto-fill, 108px); justify-content: start; gap: 8px; margin-bottom: 16px; }
.mp-perso-format-card {
	position: relative;
	background: #131211; border: 1px solid #2a2a2a; border-radius: 3px;
	padding: 14px 12px; text-align: left; cursor: pointer; color: inherit;
	display: flex; flex-direction: column; gap: 4px; transition: all .25s ease;
	-webkit-tap-highlight-color: transparent;
}
.mp-perso-format-card:focus:not(:focus-visible) { outline: none; }
/* Cause réelle trouvée par test de survol réel le 2026-07-31 : Astra
   applique une règle globale "button:hover { background-color:
   var(--ast-global-color-1) }" (#C9C9C9, gris pâle) à TOUS les boutons du
   site, y compris ces cartes. "Impression plat normal HD" y échappait
   seulement parce que sa classe .active (deux classes = spécificité plus
   élevée) l'emportait déjà sur la couleur de fond — pas parce qu'elle avait
   un correctif. Rétablit explicitement notre propre fond sur :hover/:focus
   pour neutraliser cette règle du thème, sur toutes les cartes. */
.mp-perso-format-card:hover, .mp-perso-format-card:focus { background-color: #131211 !important; border-color: rgba(200,164,93,.5); }
.mp-perso-format-card.active,
.mp-perso-format-card.active:hover,
.mp-perso-format-card.active:focus { background-color: rgba(200,164,93,.1) !important; border-color: #C8A45D; }
.mp-perso-format-card.active { border-color: #C8A45D; background: rgba(200,164,93,.1); box-shadow: inset 0 0 0 1px rgba(200,164,93,.35); }
.mp-perso-format-card.active::after {
	content: '✓'; position: absolute; top: 8px; right: 10px; color: #C8A45D; font-size: 13px; font-weight: 700;
}
.mp-perso-format-dims { font-family: 'Playfair Display', serif; font-size: 15px; color: #F8F8F6; }
.mp-perso-format-price { font-size: 11.5px; color: #C8A45D; }

/* ---- Bouton "Guide des dimensions" — pleine largeur, style CTA doré ---- */
.mp-perso-guide-link {
	display: flex; align-items: center; gap: 12px; width: 100%;
	background: #C8A45D; border: 1px solid #C8A45D; border-radius: 4px;
	padding: 13px 22px; margin-top: 4px; cursor: pointer; transition: background .25s ease;
}
.mp-perso-guide-link:hover { background: #F3D9A4; border-color: #F3D9A4; }
.mp-perso-guide-icon {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #0A0A0A;
	color: #0A0A0A; display: flex; align-items: center; justify-content: center;
}
.mp-perso-guide-icon svg { width: 15px; height: 15px; }
.mp-perso-guide-title {
	flex: 1 1 auto; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 700;
	font-size: 14px; color: #0A0A0A; text-transform: uppercase; letter-spacing: .04em;
}
.mp-perso-guide-arrow { flex: 0 0 auto; color: #0A0A0A; font-size: 17px; transition: transform .25s ease; }
.mp-perso-guide-link:hover .mp-perso-guide-arrow { transform: translateX(3px); }

/* ---- Cartes Présentation / Finition ---- */
.mp-perso-choice-row { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; align-items: stretch; }
.mp-perso-choice-row-3 { grid-template-columns: repeat(3, 1fr); }
/* "Toile seule" (base, toujours incluse) + connecteur "+" + "Cadre de bois"
   (option à cocher) — même relation visuelle additive que la fiche produit
   réelle, pas un choix exclusif entre deux cartes. */
#mp-presentation-choices { grid-template-columns: 1fr auto 1fr; }
.mp-perso-choice-connector {
	align-self: center; width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid rgba(200,164,93,.4); color: #C8A45D;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.mp-perso-choice-card {
	position: relative;
	background: #131211; border: 1px solid #2a2a2a; border-radius: 3px;
	padding: 18px; text-align: left; cursor: pointer; color: inherit;
	display: flex; flex-direction: column; gap: 10px; transition: all .25s ease;
	height: 100%;
	/* Neutralise le halo tactile gris par défaut des navigateurs mobiles au
	   clic/tap — invisible en test desktop, mais bien réel sur écran tactile
	   (signalé le 2026-07-31 : "tout le bloc devient gris"). */
	-webkit-tap-highlight-color: transparent;
}
/* Vraie cause du "gris pâle" trouvée le 2026-07-31 par test de survol réel :
   Astra applique globalement "button:hover { background-color:
   var(--ast-global-color-1) }" (#C9C9C9) à tous les boutons du site. Seule
   la carte .active y échappait (deux classes = spécificité plus élevée pour
   sa propre couleur de fond), pas parce qu'un correctif existait déjà. Fond
   rétabli explicitement ici sur :hover ET :focus pour neutraliser cette
   règle du thème sur toutes les cartes, actives ou non. */
.mp-perso-choice-card:hover, .mp-perso-choice-card:focus { background-color: #131211 !important; border-color: rgba(200,164,93,.5); }
.mp-perso-choice-card.active,
.mp-perso-choice-card.active:hover,
.mp-perso-choice-card.active:focus { border-color: #C8A45D; background-color: rgba(200,164,93,.08) !important; }
.mp-perso-choice-card.mp-perso-choice-locked { cursor: default; }
.mp-perso-choice-card.mp-perso-choice-locked:hover { border-color: #C8A45D; }
.mp-perso-choice-card:focus:not(:focus-visible) { outline: none; }

.mp-perso-choice-check {
	position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border-radius: 50%;
	border: 1px solid #444; color: transparent; font-size: 11px; display: flex; align-items: center; justify-content: center;
	transition: all .25s ease;
}
.mp-perso-choice-card.active .mp-perso-choice-check { border-color: #C8A45D; background: #C8A45D; color: #0A0A0A; }
.mp-perso-choice-check-tl { left: 14px; right: auto; }
.mp-perso-choice-check-locked { border-color: #C8A45D; background: #C8A45D; color: #0A0A0A; }

#mp-presentation-choices .mp-perso-choice-card { padding-left: 40px; }
/* Le padding-left de 40px (place pour la coche) décale le centrage du prix
   de 22px vers la droite par rapport au rectangle visuel — corrigé pour que
   le badge soit vraiment au centre de la carte, pas de sa zone de contenu
   — demande du 2026-08-01. */
#mp-presentation-choices .mp-perso-choice-pill { margin-left: -22.5px; }
/* Icônes "Toile seule"/"Cadre de bois" — reprises de la fiche produit réelle
   (mêmes SVG, même agencement) où elles existaient déjà mais pas ici —
   demande du 2026-08-01. */
.mp-perso-choice-hero { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; }
.mp-perso-choice-hero-icon {
	width: 46px; height: 46px; flex-shrink: 0; color: #C8A45D;
	display: flex; align-items: center; justify-content: center;
}
.mp-perso-choice-hero-icon svg { width: 24px; height: 24px; }
.mp-perso-choice-hero-content { display: flex; flex-direction: column; gap: 10px; }
.mp-perso-choice-hero-content h3,
.mp-perso-choice-hero-content .mp-perso-example-link { margin: 0; }
.mp-perso-choice-card h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 13.5px; color: #F8F8F6; margin: 0; line-height: 1.3; padding-right: 22px; text-align: left; text-transform: uppercase; letter-spacing: .01em; }
#mp-presentation-choices .mp-perso-choice-card h3 { padding-right: 0; }
.mp-perso-choice-subtitle { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 11px; text-transform: none; color: #9a9a9a; letter-spacing: 0; }
.mp-perso-choice-eyebrow {
	display: block; font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: #C8A45D; margin-bottom: 2px;
}
.mp-perso-choice-card p { font-size: 12px; line-height: 1.5; color: #a8a8a8; margin: 0; text-align: left; text-transform: none; }

.mp-perso-example-link {
	font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	color: #C8A45D; text-decoration: underline; text-underline-offset: 3px; margin-top: -4px;
}
.mp-perso-example-link:hover { color: #F3D9A4; }
.mp-perso-example-arrow { text-decoration: none; display: inline-block; }

.mp-perso-choice-divider { display: block; height: 1px; background: rgba(255,255,255,.09); margin: 2px 0; }

/* Alignement des 3 cartes de finition — demande du 2026-08-01. Le titre et
   la description ont des longueurs différentes selon la carte (la 3e,
   "vraie peinture", est la plus longue), ce qui décalait le lien "voir un
   exemple" et le prix vers le bas dans les cartes plus courtes, avec un
   grand espace vide au-dessus du prix (poussé tout en bas via margin-top:
   auto). Fixe une hauteur minimale sur le titre et la description — basée
   sur la carte la plus longue, qui ne bouge donc pas — pour que le lien et
   le prix soient à la même hauteur sur les 3 cartes, et retire le
   margin-top:auto du prix pour qu'il colle juste sous le lien au lieu de
   flotter en bas de la carte. Scopé uniquement aux cartes de finition — les
   cartes "Toile seule"/"Cadre de bois" ont une structure différente et
   restent inchangées. */
#mp-finition-choices .mp-perso-choice-card h3 { min-height: 70.5px; }
#mp-finition-choices .mp-perso-choice-card p { min-height: 90px; }
#mp-finition-choices .mp-perso-choice-pill { margin-top: 0; }

.mp-perso-choice-logistics-head { display: flex; align-items: flex-start; gap: 10px; }
.mp-perso-choice-logistics-icon {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(200,164,93,.45);
	color: #C8A45D; display: flex; align-items: center; justify-content: center;
}
.mp-perso-choice-logistics-icon svg { width: 17px; height: 17px; }
.mp-perso-choice-logistics-label { display: block; text-align: left; font-size: 10px; color: #C8A45D; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; margin-bottom: 3px; }
.mp-perso-choice-logistics p { font-size: 12px; color: #a8a8a8; line-height: 1.5; margin: 0 0 3px; text-align: left; text-transform: none; }
.mp-perso-choice-or { font-style: italic; color: #7a7a7a; margin: 2px 0 !important; }
.mp-perso-choice-warn { color: #d97a7a !important; }

.mp-perso-choice-pill {
	align-self: center; margin-top: auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px;
	background: linear-gradient(135deg, #e9c888, #C8A45D); border-radius: 5px; padding: 5px 10px;
	width: 104px; white-space: nowrap;
	/* La carte "Toile seule" est un <div> (verrouillée, non cliquable) alors
	   que les 4 autres badges sont dans un <button> — le bouton du
	   navigateur impose un line-height différent (16px) que le div hérite
	   normalement du body (25.6px ici), rendant ce seul badge visiblement
	   plus haut que les 4 autres — signalé le 2026-08-01. Fixé explicitement
	   pour ne plus dépendre de l'élément parent. */
	line-height: 16px;
}
.mp-perso-choice-price-label { font-size: 8.5px; color: rgba(10,10,10,.65); text-transform: uppercase; letter-spacing: .05em; }
.mp-perso-choice-pill-value { font-size: 15px; color: #0A0A0A; font-weight: 600; font-family: 'Cormorant Garamond', 'Playfair Display', serif; }

/* ---- Résumé / consentements / panier ---- */
.mp-perso-summary { background: #131211; border: 1px solid #2a2a2a; border-radius: 1px; padding: 20px 22px; margin-bottom: 22px; }
.mp-perso-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.mp-perso-summary-row span:first-child { color: #9a9a9a; }
.mp-perso-summary-row span:last-child { color: #F8F8F6; text-align: right; }
.mp-perso-summary-total { border-bottom: none; padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(200,164,93,.3); }
.mp-perso-summary-total span { font-size: 16px; font-weight: 700; }
.mp-perso-summary-total span:last-child { color: #F8F8F6; font-family: 'Playfair Display', serif; }

.mp-perso-consent-row {
	display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px;
	line-height: 1.6; color: #b8b8b8; margin-bottom: 14px; cursor: pointer;
}
.mp-perso-consent-row input { margin-top: 3px; accent-color: #C8A45D; }

.mp-perso-legal-note { font-size: 11.5px; line-height: 1.7; color: #7a7a7a; margin: 4px 0 24px; }

.mp-perso-add-to-cart {
	width: 100%; background: #C8A45D; color: #111111; border: none; border-radius: 2px;
	padding: 17px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
	letter-spacing: .08em; text-transform: uppercase; cursor: pointer; position: relative;
	transition: background .3s ease;
}
.mp-perso-add-to-cart:hover:not(:disabled) { background: #F3D9A4; }
.mp-perso-add-to-cart:disabled { background: #2a2a2a; color: #666; cursor: not-allowed; }
.mp-perso-add-to-cart.mp-loading { color: transparent; }
.mp-perso-add-to-cart.mp-loading::after {
	content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
	margin: -9px 0 0 -9px; border: 2px solid rgba(0,0,0,.25); border-top-color: #111111;
	border-radius: 50%; animation: mp-spin .7s linear infinite;
}
@keyframes mp-spin { to { transform: rotate(360deg); } }

.mp-perso-cart-error {
	margin-top: 14px; padding: 12px 14px; background: rgba(200,60,60,.08);
	border-left: 2px solid #c85050; color: #e8a0a0; font-size: 12.5px; line-height: 1.6;
}
.mp-perso-below-btn { font-size: 11.5px; color: #7a7a7a; line-height: 1.7; margin-top: 18px; }

/* ---- Modale "Guide des dimensions" ---- */
.mp-perso-modal-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.mp-perso-modal-overlay.open { opacity: 1; pointer-events: auto; }
body.mp-perso-modal-lock { overflow: hidden; }
.mp-perso-modal {
	background: #0F0E0D; border: 1px solid rgba(200,164,93,.25); border-radius: 4px;
	width: 90vw; max-width: 1100px; max-height: 88vh; overflow: auto;
	padding: 32px 30px; position: relative; transform: scale(.97); transition: transform .3s ease;
}
.mp-perso-modal-overlay.open .mp-perso-modal { transform: scale(1); }
/* Guide des dimensions : occupe presque toute la page pour une lecture plus grande. */
#mp-guide-modal { width: 96vw; max-width: 1700px; height: 92vh; max-height: 92vh; }
#mp-guide-modal .mp-perso-modal-guide-grid { max-height: 62vh; }
.mp-perso-modal-close {
	position: absolute; top: 18px; right: 20px; background: none; border: none;
	color: #b8b8b8; font-size: 28px; line-height: 1; cursor: pointer;
}
.mp-perso-modal-close:hover { color: #F3D9A4; background-color: transparent !important; }
.mp-perso-modal-eyebrow { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #C8A45D; margin: 0 0 8px; }
.mp-perso-modal-title { font-family: 'Playfair Display', serif; font-size: 22px; color: #F8F8F6; margin: 0 0 22px; }
.mp-perso-modal-body { display: flex; gap: 26px; }
.mp-perso-modal-scene-col { flex: 1 1 65%; display: flex; flex-direction: column; gap: 10px; }
.mp-perso-modal-room {
	position: relative; aspect-ratio: 2136/1314; border-radius: 3px; overflow: hidden;
	background: #050504;
}
.mp-perso-modal-room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-perso-modal-art {
	position: absolute; box-shadow: 0 10px 30px rgba(0,0,0,.5); background-color: #1a1a1a;
	cursor: grab; touch-action: none;
}
.mp-perso-modal-art.dragging { cursor: grabbing; }
.mp-perso-modal-hint { font-size: 11.5px; color: #7a7a7a; line-height: 1.5; margin: 0; text-align: center; }
.mp-perso-modal-side { flex: 1 1 35%; }
.mp-perso-modal-dims { display: block; font-family: 'Playfair Display', serif; font-size: 18px; color: #F3D9A4; margin-bottom: 14px; }
.mp-perso-modal-picker-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; margin: 0 0 10px; }
.mp-perso-modal-guide-tabs { margin-bottom: 12px; }
.mp-perso-modal-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.mp-perso-modal-guide-grid .mp-perso-format-card { padding: 9px 8px; }
.mp-perso-modal-guide-grid .mp-perso-format-dims { font-size: 12px; }

/* ---- Lightbox "voir un exemple" ---- */
.mp-perso-example-modal {
	background: #0F0E0D; border: 1px solid rgba(200,164,93,.25); border-radius: 4px;
	max-width: 90vw; max-height: 88vh; padding: 16px; position: relative;
	display: flex; align-items: center; justify-content: center;
}
.mp-perso-example-img { max-width: 100%; max-height: 80vh; display: block; border-radius: 2px; }

/* ---- Popup "fichier trop volumineux" ---- */
.mp-perso-filesize-modal { width: 90vw; max-width: 480px; padding: 30px 28px; }
.mp-perso-filesize-modal-text { font-size: 14px; line-height: 1.7; color: #d8d8d8; margin: 0; }

@media (max-width: 1024px) {
	.mp-perso-layout { grid-template-columns: 1fr; gap: 40px; }
	.mp-perso-left { position: static; }
	.mp-perso-modal-body { flex-direction: column; }
	.mp-perso-title { white-space: normal; }
}
@media (max-width: 640px) {
	.mp-perso-page { padding: 40px 18px 90px; }
	.mp-perso-choice-row, .mp-perso-choice-row-3, #mp-presentation-choices { grid-template-columns: 1fr; }
	.mp-perso-choice-connector { justify-self: center; margin: -4px 0; }
	.mp-perso-format-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.mp-perso-trust-row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.mp-perso-family-tab, .mp-perso-size-tab, .mp-perso-format-card, .mp-perso-choice-card,
	.mp-perso-add-to-cart, .mp-perso-modal, .mp-perso-modal-overlay { transition: none; }
}