/* ========================================
   LOU GARŪ : configurateur produit (pop-up)
   Cadrage libre : zoom, déplacement, étirement du visuel derrière un cadre fixe.
   Rendu validé : docs/superpowers/specs/maquettes/2026-10-08-configurateur-cadrage-v10.html
   Remplace lg-customizer-redesign.css et le CSS en ligne de single-product.php (2026-10-08).
   ======================================== */

#lg-customizer-overlay {
  --lg-cfg-accent: #a1907d;
  --lg-cfg-accent-fonce: #7a6a58;
  --lg-cfg-encre: #1f1f1f;
  --lg-cfg-gris: #6b6b6b;
  --lg-cfg-ligne: #ebe7e2;
  --lg-cfg-doux: #f7f4f1;
  --lg-cfg-scene: #5f5f5f;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-primary, 'Inter', Helvetica, Arial, sans-serif);
  color: var(--lg-cfg-encre);
}
#lg-customizer-overlay *, #lg-customizer-overlay *::before, #lg-customizer-overlay *::after { box-sizing: border-box; }

/* Le bandeau promo (lg-promo-manager, position fixe, z-index 99999) recouvrait
   le haut du configurateur : masqué tant que celui-ci est ouvert. */
body:has(#lg-customizer-overlay.lg-open) .lg-promo-banner { display: none !important; }

#lg-customizer-overlay .lg-config {
  position: fixed;
  inset: 16px;
  display: flex;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* ---------- aperçu ---------- */
#lg-customizer-overlay .lg-config-apercu-zone { flex: 1; min-width: 0; padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Barre au-dessus de l'aperçu : historique, nom du papier peint (téléphone), zoom
   (ordinateur), croix (téléphone). Rien ne passe plus sur le décor. */
#lg-customizer-overlay .lg-config-barre { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 40px; }
#lg-customizer-overlay .lg-config-barre-titre {
  display: none; flex: 1; min-width: 0; margin: 0; text-align: center; color: var(--lg-cfg-encre);
  font: 600 15px/1.25 var(--font-primary, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#lg-customizer-overlay .lg-config-barre-titre small {
  display: block; margin-top: 1px; font: 400 12px/1.3 var(--font-primary, sans-serif); color: var(--lg-cfg-gris);
  overflow: hidden; text-overflow: ellipsis;
}
#lg-customizer-overlay .lg-config-apercu {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--lg-cfg-scene);
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
#lg-customizer-overlay .lg-config-apercu.is-glisse { cursor: grabbing; }
#lg-customizer-overlay .lg-config-apercu.lg-adapter-actif { cursor: default; }
#lg-customizer-overlay .lg-config-photo { position: absolute; pointer-events: none; }
#lg-customizer-overlay .lg-config-photo img {
  position: absolute;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  pointer-events: none;
  -webkit-user-drag: none;
}
#lg-customizer-overlay .lg-config-cadre {
  position: absolute;
  outline: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(30, 30, 30, 0.62);
  pointer-events: none;
  z-index: 2;
}

/* Lés de 50 cm */
#lg-customizer-overlay .lg-le-trait { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(255, 255, 255, 0.8); }
#lg-customizer-overlay .lg-le-largeur {
  position: absolute; bottom: 6px; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6); color: #fff; padding: 2px 7px; border-radius: 999px;
  font: 600 11px/1.3 var(--font-primary, sans-serif); white-space: nowrap;
}

/* Cotes façon plan d'architecte, à l'extérieur du cadre, symétriques en haut et à gauche */
#lg-customizer-overlay .lg-cote { position: absolute; pointer-events: none; --o: 36px; }
#lg-customizer-overlay .lg-cote--l { left: 0; right: 0; top: calc(-1 * var(--o)); border-top: 1.5px solid rgba(255, 255, 255, 0.9); }
#lg-customizer-overlay .lg-cote--h { top: 0; bottom: 0; left: calc(-1 * var(--o)); border-left: 1.5px solid rgba(255, 255, 255, 0.9); }
#lg-customizer-overlay .lg-cote--l::before, #lg-customizer-overlay .lg-cote--l::after {
  content: ''; position: absolute; top: -6px; width: 1.5px; height: 11px; background: rgba(255, 255, 255, 0.9);
}
#lg-customizer-overlay .lg-cote--l::before { left: -1px; }
#lg-customizer-overlay .lg-cote--l::after { right: -1px; }
#lg-customizer-overlay .lg-cote--h::before, #lg-customizer-overlay .lg-cote--h::after {
  content: ''; position: absolute; left: -6px; height: 1.5px; width: 11px; background: rgba(255, 255, 255, 0.9);
}
#lg-customizer-overlay .lg-cote--h::before { top: -1px; }
#lg-customizer-overlay .lg-cote--h::after { bottom: -1px; }
#lg-customizer-overlay .lg-cote span {
  position: absolute; display: flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 11px; background: #fff; color: var(--lg-cfg-encre); border-radius: 999px;
  font: 600 13px/1 var(--font-primary, sans-serif); white-space: nowrap; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
#lg-customizer-overlay .lg-cote--l span { left: 50%; top: 0; transform: translate(-50%, -50%); }
#lg-customizer-overlay .lg-cote--h span { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); }
/* Cote compacte « 300 × 250 cm » au-dessus du cadre : téléphone seulement (voir plus bas) */
#lg-customizer-overlay .lg-cote-mur { display: none; position: absolute; left: 50%; top: -22px; transform: translate(-50%, -50%); pointer-events: none; }
#lg-customizer-overlay .lg-cote-mur span {
  display: block; height: 22px; line-height: 22px; padding: 0 10px; background: #fff; color: var(--lg-cfg-encre); border-radius: 999px;
  font: 600 12px/22px var(--font-primary, sans-serif); white-space: nowrap; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

/* Croix de fermeture de la barre : téléphone seulement, l'en-tête y est masqué */
#lg-customizer-overlay .lg-config-fermer-apercu {
  display: none; flex-shrink: 0; width: 38px; height: 38px; padding: 0; border: 0;
  border-radius: 10px; background: var(--lg-cfg-doux); color: var(--lg-cfg-encre); cursor: pointer;
  align-items: center; justify-content: center;
}
#lg-customizer-overlay .lg-config-fermer-apercu:hover { background: #efe9e3; }
#lg-customizer-overlay .lg-config-fermer-apercu svg { width: 20px; height: 20px; }

/* Poignées d'étirement : languettes sur les 4 bords, toujours visibles depuis le
   2026-10-19 (plus de case à cocher), sauf en mode « adapter » */
#lg-customizer-overlay .lg-poignee {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: flex; align-items: center; justify-content: center;
  cursor: ns-resize; touch-action: none; z-index: 11;
}
#lg-customizer-overlay .lg-poignee--x { cursor: ew-resize; }
#lg-customizer-overlay .lg-poignee i {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  width: 46px; height: 14px; border-radius: 7px; background: #fff; border: 2px solid var(--lg-cfg-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); transition: transform 0.15s, background 0.15s;
}
#lg-customizer-overlay .lg-poignee i::before, #lg-customizer-overlay .lg-poignee i::after, #lg-customizer-overlay .lg-poignee i b {
  content: ''; display: block; width: 2px; height: 6px; border-radius: 1px; background: var(--lg-cfg-accent);
}
#lg-customizer-overlay .lg-poignee--x i { width: 14px; height: 46px; flex-direction: column; }
#lg-customizer-overlay .lg-poignee--x i::before, #lg-customizer-overlay .lg-poignee--x i::after, #lg-customizer-overlay .lg-poignee--x i b { width: 6px; height: 2px; }
#lg-customizer-overlay .lg-poignee:hover i, #lg-customizer-overlay .lg-poignee.is-active i { background: #f6f0ea; transform: scale(1.15); }
#lg-customizer-overlay .lg-adapter-actif .lg-poignee { display: none; }
/* Deux pulsations à l'apparition (ouverture du pop-up) pour attirer l'œil */
#lg-customizer-overlay .lg-poignee i { animation: lgCfgPulse 0.9s ease-out 2; }
@keyframes lgCfgPulse {
  0% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(255, 255, 255, 0.9); }
  100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 0 14px rgba(255, 255, 255, 0); }
}


/* z-index sous les languettes (11) : sur mobile, la languette du bas passe devant */
#lg-customizer-overlay .lg-config-aide {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.66); color: #fff; font: 500 13px/1.3 var(--font-primary, sans-serif);
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: opacity 0.5s; pointer-events: none; z-index: 10;
}
#lg-customizer-overlay .lg-aide-court { display: none; }
#lg-customizer-overlay .lg-config-aide.is-cache,
#lg-customizer-overlay .lg-config:has(.lg-guide:not([hidden])) .lg-config-aide { opacity: 0; }
#lg-customizer-overlay .lg-config-erreur {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  text-align: center; color: #fff; font: 500 15px/1.5 var(--font-primary, sans-serif); background: var(--lg-cfg-scene); z-index: 13;
}
#lg-customizer-overlay .lg-config-erreur[hidden] { display: none; }
#lg-customizer-overlay .lg-config-zoom { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* Historique des essais : flèches annuler / refaire + Réinitialiser, à gauche de la barre */
#lg-customizer-overlay .lg-config-historique {
  display: flex; gap: 2px; padding: 2px; flex-shrink: 0; background: var(--lg-cfg-doux); border-radius: 12px;
}
#lg-customizer-overlay .lg-config-historique button {
  height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent;
  color: var(--lg-cfg-encre); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; font: 500 13px var(--font-primary, sans-serif);
}
#lg-customizer-overlay .lg-config-historique button:hover:not(:disabled) { background: #ebe3da; }
#lg-customizer-overlay .lg-config-historique button:disabled { color: #c4bdb6; cursor: default; }
#lg-customizer-overlay .lg-config-historique svg { width: 18px; height: 18px; flex-shrink: 0; }
#lg-customizer-overlay .lg-config-zoom button {
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--lg-cfg-doux);
  font-size: 20px; font-weight: 600; line-height: 1; color: var(--lg-cfg-encre); cursor: pointer; padding: 0;
}
#lg-customizer-overlay .lg-config-zoom button:hover { background: #efe9e3; }

/* ---------- colonne ---------- */
#lg-customizer-overlay .lg-config-colonne { width: 400px; flex-shrink: 0; border-left: 1px solid var(--lg-cfg-ligne); display: flex; flex-direction: column; min-height: 0; }
#lg-customizer-overlay .lg-config-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px 12px; }
#lg-customizer-overlay .lg-config-entete h2 { margin: 0; font: 600 18px/1.3 var(--font-primary, sans-serif); color: var(--lg-cfg-encre); }
#lg-customizer-overlay .lg-config-entete h2 small { display: block; font: 400 12px/1.4 var(--font-primary, sans-serif); color: var(--lg-cfg-gris); margin-top: 2px; }
#lg-customizer-overlay #lg-close-customizer {
  position: static; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--lg-cfg-doux);
  color: #444; font: 500 14px var(--font-primary, sans-serif); cursor: pointer; flex-shrink: 0;
}
#lg-customizer-overlay #lg-close-customizer:hover { background: #efe9e3; }

#lg-customizer-overlay .lg-config-defile {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 22px 18px; display: flex; flex-direction: column; gap: 16px;
}
/* Les blocs gardent leur hauteur naturelle : sinon, quand le bloc d'étirement s'ouvre,
   le navigateur écrase les options (overflow: hidden) et le texte touche la bordure. */
#lg-customizer-overlay .lg-config-defile > * { flex-shrink: 0; }
#lg-customizer-overlay .lg-config-defile::-webkit-scrollbar { width: 6px; }
#lg-customizer-overlay .lg-config-defile::-webkit-scrollbar-thumb { background: rgba(161, 144, 125, 0.3); border-radius: 3px; }

#lg-customizer-overlay .lg-config-libelle {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font: 600 13px/1.3 var(--font-primary, sans-serif); margin: 0 0 6px; color: var(--lg-cfg-encre);
}
#lg-customizer-overlay .lg-config-libelle small { font-weight: 400; color: var(--lg-cfg-gris); font-size: 13px; }
#lg-customizer-overlay .lg-config-lien { border: 0; background: none; color: var(--lg-cfg-accent-fonce); font: 500 13px var(--font-primary, sans-serif); cursor: pointer; padding: 0; }
#lg-customizer-overlay .lg-config-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#lg-customizer-overlay .lg-config-dims input,
#lg-customizer-overlay #lg-variation-select {
  width: 100%; height: 46px; border: 1px solid #ddd; border-radius: 8px; padding: 0 12px;
  font: 500 16px var(--font-primary, sans-serif); color: var(--lg-cfg-encre); background: #fff; margin: 0;
}
#lg-customizer-overlay .lg-config-dims input:focus,
#lg-customizer-overlay #lg-variation-select:focus { outline: none; border-color: var(--lg-cfg-accent); box-shadow: 0 0 0 3px rgba(161, 144, 125, 0.15); }

#lg-customizer-overlay .lg-config-carte { border: 1px solid var(--lg-cfg-ligne); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
#lg-customizer-overlay .lg-config-carte-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 14px/1.3 var(--font-primary, sans-serif); color: var(--lg-cfg-encre); }
/* Mode « adapter » : réglages grisés, mais « Comment ça marche ? » reste cliquable */
#lg-customizer-overlay .lg-config-carte.is-desactive > :not(.lg-config-carte-titre) { opacity: 0.45; pointer-events: none; }
#lg-customizer-overlay .lg-config-curseur { display: flex; align-items: center; gap: 10px; }
#lg-customizer-overlay .lg-config-curseur button {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--lg-cfg-ligne); background: var(--lg-cfg-doux);
  font-size: 18px; line-height: 1; color: var(--lg-cfg-encre); cursor: pointer; flex-shrink: 0; padding: 0;
}
#lg-customizer-overlay .lg-config-curseur button:hover { background: #efe9e3; }
#lg-customizer-overlay input[type="range"] { flex: 1; min-width: 0; width: 100%; accent-color: var(--lg-cfg-accent); height: 26px; margin: 0; padding: 0; border: 0; background: none; }
#lg-customizer-overlay .lg-config-etirement { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--lg-cfg-doux); border-radius: 10px; }
#lg-customizer-overlay .lg-config-etirement p { margin: 0; font-size: 12px; color: var(--lg-cfg-gris); line-height: 1.45; }

#lg-customizer-overlay .lg-config-outils { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#lg-customizer-overlay .lg-config-outils button {
  height: 44px; border: 0; border-radius: 10px; background: var(--lg-cfg-doux); color: #444;
  font: 500 13px var(--font-primary, sans-serif); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px;
}
#lg-customizer-overlay .lg-config-outils button:hover { background: #efe9e3; }
#lg-customizer-overlay .lg-config-outils button.active { background: #ece4dc; color: var(--lg-cfg-accent-fonce); }
#lg-customizer-overlay .lg-config-outils svg { width: 18px; height: 18px; flex-shrink: 0; }


#lg-customizer-overlay #lg-alert { display: none; color: #b95a4d; font-size: 14px; font-weight: 500; padding: 10px 12px; background: rgba(185, 90, 77, 0.08); border-radius: 8px; }
#lg-customizer-overlay #lg-alert:not(:empty) { display: block; }

/* ---------- pied fixe : prix + bouton + engagements toujours visibles ---------- */
#lg-customizer-overlay .lg-config-pied { flex-shrink: 0; padding: 14px 22px 18px; border-top: 1px solid var(--lg-cfg-ligne); display: flex; flex-direction: column; gap: 12px; background: #fff; }
#lg-customizer-overlay #lg-price { background: var(--lg-cfg-doux); border-radius: 12px; padding: 12px 16px; text-align: left; }
#lg-customizer-overlay .lg-prix-actuel { display: block; font: 700 24px/1.2 var(--font-primary, sans-serif); color: var(--lg-cfg-encre); white-space: nowrap; }
#lg-customizer-overlay .lg-prix-promo { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
#lg-customizer-overlay .lg-prix-promo s { font: 500 14px var(--font-primary, sans-serif); color: #a59a90; }
#lg-customizer-overlay .lg-prix-pct { font: 600 12px var(--font-primary, sans-serif); color: var(--lg-cfg-accent-fonce); background: #ece4dc; border-radius: 999px; padding: 2px 8px; }
#lg-customizer-overlay .lg-prix-nom { font: 500 12px var(--font-primary, sans-serif); color: var(--lg-cfg-accent-fonce); }
#lg-customizer-overlay .lg-prix-4x { display: block; color: var(--lg-cfg-accent-fonce); font: 500 13px var(--font-primary, sans-serif); margin-top: 4px; }
#lg-customizer-overlay .lg-config-4x-mobile { display: none; }
#lg-customizer-overlay #lg-add-to-cart {
  width: 100%; height: 52px; border: 0; border-radius: 10px; background: var(--lg-cfg-accent); color: #fff;
  font: 600 16px var(--font-primary, sans-serif); cursor: pointer; box-shadow: 0 4px 12px rgba(143, 125, 106, 0.35); transition: all 0.25s; padding: 0 20px;
}
#lg-customizer-overlay #lg-add-to-cart:hover { background: var(--lg-cfg-accent-fonce); transform: translateY(-1px); }
#lg-customizer-overlay #lg-add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Engagements (balisage de lg_engagements_html()) : 3 colonnes compactes dans le pied */
#lg-customizer-overlay .lg-engagements--config { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#lg-customizer-overlay .lg-engagements--config li { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0; border: 0; }
#lg-customizer-overlay .lg-engagements--config strong { font-size: 12px; }
#lg-customizer-overlay .lg-engagements--config .lg-engagements-detail { font-size: 11.5px; }
#lg-customizer-overlay .lg-engagements--config-mobile { display: none; }

/* ---------- écran « Votre papier peint » : validation avant le panier ---------- */
#lg-customizer-overlay .lg-valid { position: absolute; inset: 0; z-index: 40; display: flex; background: #fff; }
#lg-customizer-overlay .lg-valid[hidden] { display: none; }
#lg-customizer-overlay .lg-valid-apercu {
  position: relative; flex: 1; min-width: 0; margin: 14px; padding: 28px; border-radius: 10px; background: var(--lg-cfg-scene);
  display: flex; align-items: center; justify-content: center;
}
#lg-customizer-overlay .lg-valid-apercu img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}
#lg-customizer-overlay .lg-valid-apercu img:not([src]) { display: none; }
#lg-customizer-overlay .lg-valid-chargement,
#lg-customizer-overlay .lg-valid-chargement-erreur { margin: 0; max-width: 360px; text-align: center; color: #fff; font: 500 15px/1.5 var(--font-primary, sans-serif); }
#lg-customizer-overlay .lg-valid-chargement { display: none; }
#lg-customizer-overlay .lg-valid.is-chargement .lg-valid-chargement { display: block; animation: lgValidPulse 1.2s ease-in-out infinite alternate; }
#lg-customizer-overlay .lg-valid-chargement-erreur[hidden] { display: none; }
@keyframes lgValidPulse { from { opacity: 0.55; } to { opacity: 1; } }

#lg-customizer-overlay .lg-valid-colonne { width: 400px; flex-shrink: 0; border-left: 1px solid var(--lg-cfg-ligne); display: flex; flex-direction: column; min-height: 0; }
#lg-customizer-overlay .lg-valid-defile { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 16px; }
#lg-customizer-overlay .lg-valid-defile > * { flex-shrink: 0; }
#lg-customizer-overlay .lg-valid h2 { margin: 0; font: 600 20px/1.3 var(--font-primary, sans-serif); color: var(--lg-cfg-encre); }
#lg-customizer-overlay .lg-valid h2 small { display: block; margin-top: 3px; font: 400 13px/1.4 var(--font-primary, sans-serif); color: var(--lg-cfg-gris); }
#lg-customizer-overlay .lg-valid-resume { margin: 0; border: 1px solid var(--lg-cfg-ligne); border-radius: 12px; }
#lg-customizer-overlay .lg-valid-resume > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 14px; font-size: 14px; }
#lg-customizer-overlay .lg-valid-resume > div + div { border-top: 1px solid var(--lg-cfg-ligne); }
#lg-customizer-overlay .lg-valid-resume dt { color: var(--lg-cfg-gris); font-weight: 400; }
#lg-customizer-overlay .lg-valid-resume dd { margin: 0; font-weight: 600; text-align: right; color: var(--lg-cfg-encre); }
/* Question obligatoire des marges : jaune tant qu'elle attend une réponse, verte ensuite. */
#lg-customizer-overlay .lg-valid-marges { padding: 14px; border-radius: 12px; background: #fdf3dc; border: 1px solid #f0d58f; color: #6b4a00; font-size: 13.5px; line-height: 1.5; }
#lg-customizer-overlay .lg-valid-marges.is-ok { background: #eef5ec; border-color: #cfe3ca; color: #2f5a2a; }
#lg-customizer-overlay .lg-valid-marges-question { margin: 0 0 2px; font-weight: 700; font-size: 15px; color: var(--lg-cfg-encre); }
#lg-customizer-overlay .lg-valid-marges-texte { margin: 0 0 12px; }
#lg-customizer-overlay .lg-valid-marges-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#lg-customizer-overlay .lg-valid-choix {
  min-height: 44px; padding: 8px 10px; border: 1.5px solid #d9c9b4; border-radius: 10px; background: #fff;
  color: var(--lg-cfg-encre); font: 600 13.5px/1.25 var(--font-primary, sans-serif); cursor: pointer;
}
#lg-customizer-overlay .lg-valid-choix:hover { border-color: var(--lg-cfg-accent); }
#lg-customizer-overlay .lg-valid-choix.is-choisi { background: var(--lg-cfg-accent); border-color: var(--lg-cfg-accent); color: #fff; }
#lg-customizer-overlay .lg-valid-requis { margin: -4px 0 0; font-size: 12.5px; color: #8a5a00; text-align: center; }
#lg-customizer-overlay .lg-valid-requis[hidden] { display: none; }
#lg-customizer-overlay .lg-valid-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--lg-cfg-gris); }

#lg-customizer-overlay .lg-valid-pied { flex-shrink: 0; padding: 14px 22px 18px; border-top: 1px solid var(--lg-cfg-ligne); display: flex; flex-direction: column; gap: 12px; background: #fff; }
#lg-customizer-overlay .lg-valid-prix { background: var(--lg-cfg-doux); border-radius: 12px; padding: 12px 16px; }
#lg-customizer-overlay .lg-valid-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
#lg-customizer-overlay .lg-valid-actions button { height: 52px; border: 0; border-radius: 10px; font: 600 15px var(--font-primary, sans-serif); cursor: pointer; padding: 0 18px; }
#lg-customizer-overlay #lg-valid-modifier { background: var(--lg-cfg-doux); color: #444; }
#lg-customizer-overlay #lg-valid-modifier:hover { background: #efe9e3; }
#lg-customizer-overlay #lg-valid-ok { background: var(--lg-cfg-accent); color: #fff; box-shadow: 0 4px 12px rgba(143, 125, 106, 0.35); }
#lg-customizer-overlay #lg-valid-ok:hover:not(:disabled) { background: var(--lg-cfg-accent-fonce); }
#lg-customizer-overlay .lg-valid-actions button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- bulles d'aide (js/lg-config-guide.js) ---------- */
#lg-customizer-overlay .lg-guide {
  position: absolute; z-index: 30; background: #fff; color: var(--lg-cfg-encre); border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); font: 400 14px/1.45 var(--font-primary, sans-serif);
}
#lg-customizer-overlay .lg-guide[hidden] { display: none; }
#lg-customizer-overlay .lg-guide-etape { display: block; font-size: 11px; color: var(--lg-cfg-gris); margin-bottom: 2px; }
#lg-customizer-overlay .lg-guide-titre { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
#lg-customizer-overlay .lg-guide-texte { margin: 0 0 12px; font-size: 13.5px; color: #444; }
#lg-customizer-overlay .lg-guide-actions { display: flex; justify-content: flex-end; gap: 8px; }
#lg-customizer-overlay .lg-guide-actions button { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; font: 500 13px var(--font-primary, sans-serif); cursor: pointer; }
#lg-customizer-overlay .lg-guide-actions button[hidden] { display: none; }
#lg-customizer-overlay .lg-guide-passer { background: var(--lg-cfg-doux); color: #444; }
#lg-customizer-overlay .lg-guide-suivant { background: var(--lg-cfg-accent); color: #fff; }
#lg-customizer-overlay .lg-guide-suivant:hover { background: var(--lg-cfg-accent-fonce); }
#lg-customizer-overlay .lg-guide-fleche { position: absolute; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); }
#lg-customizer-overlay .lg-guide[data-fleche="haut"] .lg-guide-fleche { top: -7px; }
#lg-customizer-overlay .lg-guide[data-fleche="bas"] .lg-guide-fleche { bottom: -7px; }
#lg-customizer-overlay .lg-guide[data-fleche="aucune"] .lg-guide-fleche { display: none; }
/* Élément commenté par la bulle */
#lg-customizer-overlay .lg-guide-cible { outline: 3px solid var(--lg-cfg-accent); outline-offset: 3px; border-radius: 10px; }
#lg-customizer-overlay .lg-config-apercu.lg-guide-cible { outline: none; } /* la bulle est posée dessus */
#lg-customizer-overlay .lg-poignee.lg-guide-cible { outline: none; }
#lg-customizer-overlay .lg-poignee.lg-guide-cible i { animation: lgCfgPulse 1s ease-out infinite; }

/* ---------- mobile et tablette ---------- */
@media (max-width: 1024px) {
  #lg-customizer-overlay .lg-config { inset: 0; border-radius: 0; flex-direction: column; }
  /* + hauteur de la barre au-dessus de l'aperçu (la colonne a de la place sur tablette) */
  #lg-customizer-overlay .lg-config-apercu-zone { flex: none; height: calc(42vh + 50px); height: calc(42dvh + 50px); padding: 8px; }
  #lg-customizer-overlay .lg-config-colonne { width: auto; flex: 1; border-left: 0; border-top: 1px solid var(--lg-cfg-ligne); }
  #lg-customizer-overlay .lg-config-entete { padding: 10px 16px 6px; }
  #lg-customizer-overlay .lg-config-entete h2 { font-size: 16px; }
  #lg-customizer-overlay .lg-config-defile { padding: 6px 16px 14px; gap: 14px; }
  #lg-customizer-overlay .lg-config-zoom { display: none; }
  #lg-customizer-overlay .lg-config-historique button { height: 34px; min-width: 36px; padding: 0 6px; }
  #lg-customizer-overlay .lg-cote { --o: 28px; }
  #lg-customizer-overlay .lg-cote span { height: 22px; font-size: 12px; padding: 0 9px; }
  #lg-customizer-overlay .lg-config-aide { font-size: 12px; white-space: normal; width: max-content; max-width: calc(100% - 24px); text-align: center; }
  #lg-customizer-overlay .lg-config-defile { overscroll-behavior: contain; }
  /* Pas de flou coûteux sur mobile */
  #lg-customizer-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Barre du bas : prix + promo sur 2 lignes | bouton centré, puis 4× PayPal */
  #lg-customizer-overlay .lg-config-pied {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06);
  }
  #lg-customizer-overlay #lg-price { grid-column: 1; grid-row: 1; min-width: 0; padding: 0; background: none; border-radius: 0; }
  #lg-customizer-overlay .lg-prix-actuel { font-size: 19px; line-height: 1.15; }
  #lg-customizer-overlay .lg-prix-promo { flex-wrap: nowrap; gap: 6px; white-space: nowrap; overflow: hidden; }
  #lg-customizer-overlay .lg-prix-promo s { font-size: 12px; }
  #lg-customizer-overlay .lg-prix-pct { font-size: 11px; padding: 1px 6px; }
  #lg-customizer-overlay .lg-prix-nom { font-size: 11.5px; }
  #lg-customizer-overlay #lg-price .lg-prix-4x { display: none; }
  #lg-customizer-overlay #lg-add-to-cart { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: auto; height: 50px; font-size: 15px; white-space: nowrap; }
  #lg-customizer-overlay .lg-config-4x-mobile { display: block; grid-column: 1; grid-row: 2; text-align: left; font: 500 12px var(--font-primary, sans-serif); color: var(--lg-cfg-accent-fonce); }
  #lg-customizer-overlay .lg-config-pied .lg-engagements--config { display: none; }
  #lg-customizer-overlay .lg-engagements--config-mobile { display: grid; margin: 0; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #lg-customizer-overlay .lg-engagements--config-mobile li { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0; border: 0; }
}

/* Écran de validation, mobile et tablette : l'aperçu en haut, le résumé dessous, boutons fixes en bas */
@media (max-width: 1024px) {
  #lg-customizer-overlay .lg-valid { flex-direction: column; }
  #lg-customizer-overlay .lg-valid-apercu { flex: none; height: 40vh; height: 40dvh; margin: 8px; padding: 12px; }
  #lg-customizer-overlay .lg-valid-colonne { width: auto; flex: 1; border-left: 0; }
  #lg-customizer-overlay .lg-valid-defile { padding: 12px 16px 14px; gap: 12px; overscroll-behavior: contain; }
  #lg-customizer-overlay .lg-valid h2 { font-size: 18px; }
  #lg-customizer-overlay .lg-valid-pied { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.06); }
  #lg-customizer-overlay .lg-valid-prix { padding: 0; background: none; border-radius: 0; }
  #lg-customizer-overlay .lg-valid-prix .lg-prix-actuel { font-size: 19px; }
  #lg-customizer-overlay .lg-valid-actions button { height: 50px; font-size: 15px; padding: 0 14px; }
}

/* Téléphone à l'horizontale : aperçu et colonne côte à côte, sinon la colonne n'a plus de hauteur utile */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  #lg-customizer-overlay .lg-config { flex-direction: row; }
  #lg-customizer-overlay .lg-config-apercu-zone { flex: 1; height: auto; }
  #lg-customizer-overlay .lg-config-colonne { flex: none; width: 340px; border-top: 0; border-left: 1px solid var(--lg-cfg-ligne); }
  #lg-customizer-overlay .lg-valid { flex-direction: row; }
  #lg-customizer-overlay .lg-valid-apercu { flex: 1; height: auto; }
  #lg-customizer-overlay .lg-valid-colonne { flex: none; width: 340px; border-left: 1px solid var(--lg-cfg-ligne); }
}

/* Téléphone (debout ou couché) : le cadre prend toute la place disponible.
   Les cotes extérieures (gauche + haut) mangeaient 46 px de chaque côté : elles
   laissent place à une seule cote « 300 × 250 cm » au-dessus du cadre, et il ne
   reste sur les côtés que la largeur des languettes. L'en-tête (titre + Fermer)
   est remplacé par une croix sur l'aperçu. Marges lues par js/lg-cadrage.js.
   Mesuré sur 390 × 844 (mur 300 × 250) : cadre de 282 × 235 à 346 × 288 px. */
@media (max-width: 700px), (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  #lg-customizer-overlay .lg-config-apercu { --lg-cadre-marge-x: 14px; --lg-cadre-marge-y: 36px; }
  #lg-customizer-overlay .lg-cote { display: none; }
  #lg-customizer-overlay .lg-cote-mur { display: block; }
  #lg-customizer-overlay .lg-config-entete { display: none; }
  #lg-customizer-overlay .lg-config-fermer-apercu { display: flex; }
  #lg-customizer-overlay .lg-config-barre-titre { display: block; }
  #lg-customizer-overlay .lg-config-apercu-zone { gap: 6px; }
  #lg-customizer-overlay .lg-config-barre { min-height: 38px; }
  #lg-customizer-overlay .lg-config-defile { padding-top: 14px; }
  /* Icône seule : le libellé mordrait sur le cadre, désormais plus grand */
  #lg-customizer-overlay .lg-config-historique-texte span { display: none; }
  /* Aide sur une ligne, dans la marge du bas, pour ne pas couvrir le décor */
  #lg-customizer-overlay .lg-config-aide { bottom: 6px; white-space: nowrap; padding: 6px 12px; }
  #lg-customizer-overlay .lg-aide-long { display: none; }
  #lg-customizer-overlay .lg-aide-court { display: inline; }
}
/* Téléphone debout : l'aperçu récupère la hauteur de l'en-tête masqué */
@media (max-width: 700px) {
  /* + hauteur de la barre : un mur large garde toute la largeur de l'écran */
  #lg-customizer-overlay .lg-config-apercu-zone { height: calc(46vh + 44px); height: calc(46dvh + 44px); }
}

/* Replier les réglages : téléphone debout seulement. Le chevron est un simple
   trait dans le coin en haut à droite du tiroir blanc, DANS la zone qui défile :
   il part avec le contenu, aucune ligne ne reste figée (demande d'Élie).
   Repliés, une ligne « Afficher les réglages » calée à droite les rouvre. */
#lg-customizer-overlay .lg-config-replier,
#lg-customizer-overlay .lg-config-deplier { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  #lg-customizer-overlay .lg-config-defile { position: relative; padding-top: 14px; }
  #lg-customizer-overlay .lg-config-replier {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 4px; right: 8px; z-index: 2;
    width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: #9a928a; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #lg-customizer-overlay .lg-config-replier svg,
  #lg-customizer-overlay .lg-config-deplier svg { width: 22px; height: 22px; flex-shrink: 0; }
  #lg-customizer-overlay .lg-config.is-replie .lg-config-deplier {
    display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; height: 42px;
    margin: 0; padding: 0 14px; border: 0; background: transparent; color: var(--lg-cfg-accent-fonce); cursor: pointer;
    font: 500 13px var(--font-primary, sans-serif); -webkit-tap-highlight-color: transparent;
  }
  #lg-customizer-overlay .lg-config.is-replie .lg-config-apercu-zone { flex: 1; height: auto; min-height: 0; }
  #lg-customizer-overlay .lg-config.is-replie .lg-config-colonne { flex: none; }
  #lg-customizer-overlay .lg-config.is-replie .lg-config-defile { display: none; }

  /* Barre du haut sur une ligne : nom du papier peint, historique, croix */
  #lg-customizer-overlay .lg-config-barre-titre { order: -1; text-align: left; padding-left: 4px; }
  #lg-customizer-overlay .lg-config-apercu-zone { padding-top: 4px; }

  /* Les réglages forment un « tiroir » posé sous l'aperçu : coins arrondis et
     ombre portée vers le haut, avec la poignée à chevron. On voit ce qui reste
     fixe (l'aperçu) et ce qui défile (les réglages). */
  #lg-customizer-overlay .lg-config-colonne {
    position: relative; z-index: 1; overflow: hidden; background: #fff; border-top: 0;
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.12);
  }
  /* Ombres de défilement (classes posées par lg-customizer.js) : en haut quand on
     a défilé, en bas tant qu'il reste du contenu. Collées aux bords de la zone. */
  #lg-customizer-overlay .lg-config-defile::before,
  #lg-customizer-overlay .lg-config-defile::after {
    content: ''; position: sticky; z-index: 3; flex-shrink: 0; height: 16px; margin-left: -16px; margin-right: -16px;
    pointer-events: none; opacity: 0; transition: opacity 0.2s;
  }
  /* En haut : fondu vers le blanc (le contenu s'efface sous le bord du tiroir).
     Une ombre sombre à cet endroit dessinait une bordure grise sous l'aperçu (Élie). */
  #lg-customizer-overlay .lg-config-defile::before {
    top: -14px; height: 24px; margin-bottom: -38px;
    background: linear-gradient(#fff 15%, rgba(255, 255, 255, 0));
  }
  #lg-customizer-overlay .lg-config-defile::after {
    bottom: -14px; margin-top: -30px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
  }
  #lg-customizer-overlay .lg-config-defile.a-du-haut::before,
  #lg-customizer-overlay .lg-config-defile.a-du-bas::after { opacity: 1; }
}

/* Téléphone couché : la hauteur manque, la largeur abonde. La barre devient une
   colonne d'icônes à gauche de l'aperçu ; le nom et « Fermer » reviennent dans
   l'en-tête de la colonne de droite, comme sur ordinateur. */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  #lg-customizer-overlay .lg-config-apercu-zone { flex-direction: row; gap: 8px; }
  #lg-customizer-overlay .lg-config-barre { flex-direction: column; justify-content: flex-start; min-height: 0; }
  #lg-customizer-overlay .lg-config-historique { flex-direction: column; }
  #lg-customizer-overlay .lg-config-barre-titre,
  #lg-customizer-overlay .lg-config-fermer-apercu { display: none; }
  #lg-customizer-overlay .lg-config-entete { display: flex; }
  #lg-customizer-overlay .lg-config-defile { padding-top: 4px; }
}

/* Envoi en cours : l'aperçu et les réglages ne bougent plus (le prix est figé) */
#lg-customizer-overlay .lg-config.is-envoi .lg-config-apercu,
#lg-customizer-overlay .lg-config.is-envoi .lg-config-defile,
#lg-customizer-overlay .lg-config.is-envoi .lg-valid-defile { pointer-events: none; opacity: .7; }