/* 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 ), 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) ========================================================== */ .lmp-studio__topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 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.5rem; } .lmp-studio__tab { font-family: var(--font-heading); 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; 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); } .lmp-studio__topbar-label { font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lmp-studio-muted); margin-right: 0.15rem; } .lmp-studio__sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .lmp-studio__size-btn { font-family: var(--font-heading); padding: 0.4rem 0.7rem; border-radius: 999px; border: 1.5px solid var(--lmp-studio-hairline); background: var(--lmp-blanc); color: var(--lmp-studio-muted-strong); font-size: 0.78rem; font-weight: 700; 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; align-items: center; gap: 0.6rem; } .lmp-studio__swatch-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; 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); } .lmp-studio__swatch-dot { width: 28px; height: 28px; 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; grid-template-columns: 92px minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; } @media ( max-width: 860px ) { .lmp-studio__body { grid-template-columns: 1fr; } .lmp-studio__toolbar { flex-direction: row; } } .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; } .lmp-studio__canvas { background: radial-gradient( ellipse at 50% 38%, var(--lmp-blanc) 0%, var(--lmp-creme) 68%, rgba( 212, 184, 150, 0.35 ) 100% ); border: 1px solid var(--lmp-studio-hairline); border-radius: 20px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 420px; } .lmp-studio__canvas-empty { opacity: 0.65; font-weight: 600; } .lmp-studio__frame { position: relative; width: 100%; max-width: 420px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--lmp-blanc); } .lmp-studio__photo { display: block; width: 100%; height: auto; filter: drop-shadow( 0 14px 20px rgba( 61, 43, 31, 0.15 ) ); } /* Sélecteur de section à boutons, sous la photo — remplace les anciens rectangles pointillés superposés à l'image (encombraient l'aperçu). */ .lmp-studio__section-select { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: 100%; max-width: 420px; } .lmp-studio__section-btn { font-family: var(--font-heading); padding: 0.5rem 1.05rem; 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; 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; } .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% ); white-space: nowrap; font-size: 1.1rem; font-weight: 700; 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; } /* Repère de l'extra Mascotte : volontairement PAS un rectangle pointillé comme les 4 zones — un petit point qui pulse doucement, pour signaler que ce n'est pas une 5e zone d'impression du même type. */ .lmp-studio__mascot-marker { position: absolute; transform: translate( -50%, -50% ); width: 30px; height: 30px; border-radius: 50%; background: var(--lmp-blanc); box-shadow: 0 4px 12px -3px rgba( 139, 105, 20, 0.5 ), 0 0 0 3px var(--lmp-studio-wash-cuir-strong); pointer-events: none; animation: lmp-mascot-pulse 2.4s ease-in-out infinite; } .lmp-studio__mascot-marker::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--lmp-brun-cuir); } @keyframes lmp-mascot-pulse { 0%, 100% { box-shadow: 0 4px 12px -3px rgba( 139, 105, 20, 0.5 ), 0 0 0 3px var(--lmp-studio-wash-cuir-strong); } 50% { box-shadow: 0 4px 14px -2px rgba( 139, 105, 20, 0.65 ), 0 0 0 6px var(--lmp-studio-wash-cuir); } } @media ( prefers-reduced-motion: reduce ) { .lmp-studio__mascot-marker { animation: 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__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-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; } /* ========================================================== 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; } .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; } .lmp-configurateur__text { margin: 0 0 1rem; } .lmp-configurateur__text-input { width: 100%; padding: 0.7rem 0.85rem; font-size: 1rem; font-weight: 600; 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; } .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 () : 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. */ .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-studio-hairline); background: none; overflow: hidden; } .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%; }