/* =========================================================
* Soléa Studio — Mode app fullscreen 3-panneaux
* Inspiration : Leroy Merlin Home Design 3D, repensé premium.
* Architecture :
* 1. Reset / vars / shell layout
* 2. Topbar
* 3. Shell (sidebars + canvas)
* 4. Sidebar gauche (tabs + catalogue)
* 5. Canvas (toolbar + stage)
* 6. Sidebar droite (propriétés / résumé)
* 7. Footer sticky
* 8. Modales (onboarding, contact)
* 9. Responsive
* ========================================================= */
/* ---------- 0. Layout studio : header WP + footer WP RESTENT VISIBLES ----------
* L'utilisateur doit pouvoir naviguer vers les autres pages (Particuliers, Pros,
* Contact, etc.). On garde le header et footer WordPress, et le studio
* s'insère entre les deux avec un calcul dynamique de hauteur.
*
* Variables JS calculées : --wp-header-h et --wp-footer-h (cf studio-main.js).
* Fallback CSS : on cache uniquement le breadcrumbs et le configurator-hero legacy.
*/
body.solea-studio-mode .breadcrumbs,
body.solea-studio-mode .configurator-hero {
display: none !important;
}
body.solea-studio-mode {
margin: 0 !important;
padding: 0 !important;
background: #0f0f12 !important;
/* Pas de overflow:hidden ici — le scroll est géré par le studio lui-même
* (overflow:hidden seulement sur .solea-studio interne, voir plus bas).
* Le body peut scroll si jamais le calc tombe à 0 (safety net). */
}
/* FIX critique : .site-wrap a overflow:hidden globalement → bloque le scroll
* vertical sur la page studio. On surcharge pour permettre l'accès au footer WP. */
body.solea-studio-mode .site-wrap {
overflow: visible !important;
/* V13 : padding-top exact = hauteur header WP (mesurée JS, fallback 122px)
* Le studio démarre exactement à la fin du header, plus d'espace noir parasite */
padding-top: var(--wp-header-h, 122px) !important;
}
/* Cache le span solea-main-anchor qui crée 22px d'écart sur cette page seulement */
body.solea-studio-mode .solea-main-anchor { display: none !important; }
/* :has() fallback supprimé car on ne veut plus bloquer le scroll body */
/* ---------- 1. Vars + shell ---------- */
.solea-studio {
--st-bg: #0d0d10; /* fond global app (noir doux) */
--st-panel: #15151a; /* sidebars */
--st-panel-2: #1c1c22; /* sous-blocs sidebars */
--st-panel-hover: #23232c;
--st-canvas-bg: #f3efe5; /* fond canvas (papier ivoire) */
--st-line: rgba(255, 255, 255, 0.08);
--st-line-strong: rgba(255, 255, 255, 0.16);
--st-text: #f4f0e8;
--st-text-soft: rgba(244, 240, 232, 0.7);
/* V16 (audit UX/UI senior) : contraste relevé de 0.45 → 0.62 pour WCAG AA (ratio 4.5:1) */
--st-text-mute: rgba(244, 240, 232, 0.62);
--st-ink: #0d0d10; /* sur fond clair */
--st-ink-soft: rgba(13, 13, 16, 0.75);
--st-ink-mute: rgba(13, 13, 16, 0.6);
/* V16 (audit UX/UI senior) : or "chai bordelais" #c9a96e au lieu du Renault Megane #f6b72c
— meilleur fit positionnement BTP premium + cohérence avec studio-tutorial.js qui
l'utilisait déjà. Bonus : `--st-gold-bright` conservé en accent vif si besoin (CTA). */
--st-gold: #c9a96e;
--st-gold-deep: #8a6a35;
--st-gold-soft: rgba(201, 169, 110, 0.16);
--st-gold-bright: #f6b72c;
--st-danger: #e84a3a;
--st-success: #4caf6e;
--st-topbar-h: 56px;
--st-footer-h: 64px;
/* V15 : sidebar gauche élargie (380px) pour catalogue + finitions par pièce,
droite réduite (260px) pour récap budget + aides — meilleur rapport contenu/UX */
--st-sidebar-l-w: 380px;
--st-sidebar-r-w: 260px;
--st-toolbar-h: 44px;
--st-radius: 8px;
--st-radius-lg: 12px;
--st-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
/* Reset du parent .configurator-page */
background: var(--st-bg);
color: var(--st-text);
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
font-size: 14px;
line-height: 1.45;
/* Le header WP global (.topbar) est en position:fixed (122px) et l'admin bar
* (si présente) décale tout de 32px. Plutôt que jongler avec margin-top sur le
* studio (qui collapse mal avec le span solea-main-anchor), on applique le
* padding-top directement sur .site-wrap (cf règle plus bas dans le fichier).
* Le studio démarre alors EXACTEMENT à la fin du header. */
margin-top: 0;
height: calc(100vh - var(--wp-header-h, 122px) - var(--wp-admin-bar-h, 0px));
min-height: 600px; /* garde-fou : si le calc tombe en négatif */
display: grid;
grid-template-rows: var(--st-topbar-h) 1fr var(--st-footer-h);
overflow: hidden;
position: relative;
}
/* Reset des règles legacy ".configurator-page" sur cette page */
.solea-studio { padding-bottom: 0; }
.solea-studio * { box-sizing: border-box; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.studio-noscript {
position: fixed; inset: 0; z-index: 999;
display: flex; align-items: center; justify-content: center;
background: var(--st-bg); color: var(--st-text); padding: 24px;
text-align: center;
}
/* ════════════════════════════════════════════════════
2. TOPBAR
════════════════════════════════════════════════════ */
.studio-topbar {
grid-row: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
background: var(--st-panel);
border-bottom: 1px solid var(--st-line);
z-index: 30;
position: relative;
}
.studio-topbar-left,
.studio-topbar-right {
display: flex;
align-items: center;
gap: 10px;
}
.studio-brand-link {
display: flex;
align-items: center;
gap: 10px;
color: var(--st-text);
text-decoration: none;
padding: 6px 10px 6px 6px;
border-radius: var(--st-radius);
transition: background 0.2s var(--st-easing);
}
.studio-brand-link:hover { background: var(--st-panel-hover); }
.studio-brand-mark {
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--st-gold);
color: var(--st-ink);
border-radius: 7px;
}
.studio-brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.studio-brand-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 16px;
font-weight: 500;
font-style: italic;
color: var(--st-text);
}
.studio-brand-sub {
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 600;
}
.studio-topbar-divider {
width: 1px; height: 24px;
background: var(--st-line);
margin: 0 6px;
}
.studio-topbar-divider--vert { height: 18px; }
.studio-project-name {
display: flex;
align-items: center;
gap: 14px;
}
.studio-project-input {
background: transparent;
border: 1px solid transparent;
color: var(--st-text);
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
padding: 5px 10px;
border-radius: 5px;
min-width: 200px;
transition: background 0.2s var(--st-easing), border-color 0.2s;
}
.studio-project-input:hover {
background: var(--st-panel-hover);
}
.studio-project-input:focus {
outline: none;
background: var(--st-bg);
border-color: var(--st-gold);
}
.studio-project-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--st-text-mute);
font-weight: 500;
}
.studio-status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--st-success);
}
.studio-project-status[data-status="saving"] .studio-status-dot { background: var(--st-gold); animation: studio-pulse 1.2s ease infinite; }
.studio-project-status[data-status="error"] .studio-status-dot { background: var(--st-danger); }
@keyframes studio-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Buttons (réutilisables app entière) */
.studio-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 7px 13px;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s var(--st-easing), color 0.2s, border-color 0.2s, transform 0.15s;
white-space: nowrap;
line-height: 1;
}
.studio-btn svg { flex-shrink: 0; }
.studio-btn:active { transform: translateY(1px); }
.studio-btn-ghost {
background: transparent;
color: var(--st-text-soft);
border-color: var(--st-line);
}
.studio-btn-ghost:hover {
background: var(--st-panel-hover);
color: var(--st-text);
border-color: var(--st-line-strong);
}
.studio-btn-primary {
background: var(--st-gold);
color: var(--st-ink);
}
.studio-btn-primary:hover {
background: #ffc94a;
box-shadow: 0 6px 18px -4px rgba(246, 183, 44, 0.45);
}
.studio-btn-primary:disabled {
background: #4a4944;
color: var(--st-text-mute);
cursor: not-allowed;
}
.studio-btn-block { width: 100%; }
.studio-btn-danger { color: #ff9d94; border-color: rgba(232, 74, 58, 0.3); }
.studio-btn-danger:hover { background: rgba(232, 74, 58, 0.12); border-color: rgba(232, 74, 58, 0.6); }
/* ════════════════════════════════════════════════════
3. SHELL (3 colonnes)
════════════════════════════════════════════════════ */
.studio-shell {
grid-row: 2;
display: grid;
grid-template-columns: var(--st-sidebar-l-w) 1fr var(--st-sidebar-r-w);
min-height: 0;
background: var(--st-bg);
}
.studio-sidebar {
background: var(--st-panel);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
/* V20.37 L64 : scroll chain isolation — quand l'utilisateur scrolle
à l'intérieur de la sidebar (catalogue pièces, options, etc.) et
atteint le bord, le scroll ne doit PAS se propager au body et faire
scroller la page WP en arrière-plan (sticky header WP qui sort de
l'écran = très désagréable). overscroll-behavior:contain bloque
cette propagation. */
overscroll-behavior: contain;
}
.studio-sidebar-left { border-right: 1px solid var(--st-line); }
.studio-sidebar-right { border-left: 1px solid var(--st-line); }
/* V20.37 L64 : les conteneurs scrollables internes (panel-content, catalog)
doivent aussi isoler leur scroll pour le même comportement. Ils héritent
déjà overflow-y du parent mais une propagation peut survenir si overflow
est défini sur un descendant. */
.studio-sidebar .studio-panel,
.studio-sidebar [data-studio-panel] {
overscroll-behavior: contain;
}
/* ════════════════════════════════════════════════════
4. SIDEBAR GAUCHE — catalogue
════════════════════════════════════════════════════ */
.studio-tabs {
display: flex;
border-bottom: 1px solid var(--st-line);
flex-shrink: 0;
background: var(--st-panel);
overflow-x: auto; /* fix : 7+ tabs débordent en sidebar étroite */
scrollbar-width: thin;
scrollbar-color: var(--st-line-strong) transparent;
}
.studio-tabs::-webkit-scrollbar { height: 4px; }
.studio-tabs::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 2px; }
.studio-tab {
flex: 1;
min-width: 0; /* V14 FIX : permet text-overflow ellipsis */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 4px 10px;
background: transparent;
border: 0;
color: var(--st-text-mute);
font-family: inherit;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
/* V14 FIX : labels tabs ne tronquent plus en sidebar 300px — ellipsis sur 1 ligne */
.studio-tab > span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.studio-tab:hover { color: var(--st-text-soft); background: var(--st-panel-hover); }
.studio-tab.is-active {
color: var(--st-gold);
border-bottom-color: var(--st-gold);
}
.studio-tab svg { opacity: 0.9; flex-shrink: 0; }
/* V14 FIX : en sidebar étroite (<320px aside-l), cacher les labels — icons-only + title tooltip */
@media (min-width: 1024px) and (max-width: 1280px) {
.studio-tab > span { display: none; }
.studio-tab { padding: 14px 6px; }
}
.studio-panels-wrap {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--st-line-strong) transparent;
}
.studio-panels-wrap::-webkit-scrollbar { width: 6px; }
.studio-panels-wrap::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 3px; }
.studio-panel {
padding: 18px 16px 24px;
}
.studio-panel[hidden] { display: none; }
.studio-panel-header {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--st-line);
}
.studio-panel-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--st-text);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.studio-panel-hint {
font-size: 11.5px;
color: var(--st-text-mute);
margin: 0;
line-height: 1.45;
}
/* Shape selector (forme pièce : rectangle, L, T, U) */
.studio-shape-selector {
display: grid;
/* V20.37 L73 : 5 cols (Rect / L / T / U / Libre) — avant : 4 cols sans Libre */
grid-template-columns: repeat(5, 1fr);
gap: 4px;
margin-bottom: 12px;
padding: 4px;
background: var(--st-panel-2);
border-radius: 6px;
border: 1px solid var(--st-line);
}
.studio-shape-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 4px;
background: transparent;
border: 0;
border-radius: 4px;
color: var(--st-text-mute);
font-family: inherit;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.studio-shape-btn:hover { background: var(--st-panel-hover); color: var(--st-text); }
.studio-shape-btn.is-active {
background: var(--st-gold);
color: var(--st-ink);
}
.studio-shape-btn svg { opacity: 0.9; }
/* Catalogue pièces — grille 2 cols */
.studio-catalog {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.studio-catalog-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 11px;
background: var(--st-panel-2);
border: 1px solid transparent;
border-radius: var(--st-radius);
cursor: grab;
text-align: left;
font-family: inherit;
color: var(--st-text);
transition: background 0.2s var(--st-easing), border-color 0.2s, transform 0.15s;
}
.studio-catalog-item:hover {
background: var(--st-panel-hover);
border-color: var(--st-line-strong);
transform: translateY(-1px);
}
.studio-catalog-item:active { cursor: grabbing; }
.studio-catalog-item.is-dragging { opacity: 0.4; }
.studio-catalog-icon {
width: 28px; height: 28px;
display: grid; place-items: center;
color: var(--st-gold);
background: var(--st-gold-soft);
border-radius: 6px;
flex-shrink: 0;
}
.studio-catalog-icon svg { width: 18px; height: 18px; }
.studio-catalog-label {
font-size: 12px;
font-weight: 600;
color: var(--st-text);
line-height: 1.3;
}
.studio-catalog-meta {
font-size: 10.5px;
color: var(--st-text-mute);
letter-spacing: 0.04em;
}
/* Finitions */
.studio-finition-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.studio-finition {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--st-panel-2);
border: 1px solid transparent;
border-radius: var(--st-radius);
cursor: pointer;
font-family: inherit;
color: var(--st-text);
text-align: left;
transition: background 0.2s var(--st-easing), border-color 0.2s;
}
.studio-finition:hover { background: var(--st-panel-hover); }
.studio-finition.is-active {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.06);
}
.studio-finition-swatch {
width: 36px; height: 36px;
border-radius: 6px;
flex-shrink: 0;
border: 1px solid var(--st-line);
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}
.studio-finition-body { flex: 1; min-width: 0; }
.studio-finition-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 2px;
}
.studio-finition-name {
font-size: 13px;
font-weight: 600;
}
.studio-finition-coef {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 13px;
color: var(--st-gold);
}
.studio-finition-desc {
font-size: 11px;
color: var(--st-text-mute);
line-height: 1.45;
display: block;
}
/* Matériaux */
.studio-mat-group {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--st-line);
}
.studio-mat-group:last-child { border-bottom: 0; }
.studio-mat-group-title {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--st-text-mute);
margin: 0 0 10px;
}
.studio-mat-swatches {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.studio-swatch {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--st-panel-2);
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer; /* V20.37 L50/L109 : affordance click déjà présente, renforcée au hover */
color: var(--st-text);
font-family: inherit;
font-size: 11.5px;
text-align: left;
/* V20.37 L50/L109 : transition transform + shadow pour hint visuel "cliquable" */
transition: background 0.2s, border-color 0.2s, transform 0.15s ease, box-shadow 0.15s ease;
}
/* V20.37 L50/L109 : hover renforcé — scale + ring champagne pour signaler clairement
que le swatch est interactif (avant : seul un léger fond hover, presque invisible). */
.studio-swatch:hover {
background: var(--st-panel-hover);
transform: scale(1.03);
box-shadow: 0 0 0 2px var(--lux-champagne, var(--st-gold, #d4af37)),
0 4px 12px rgba(0, 0, 0, 0.25);
z-index: 1;
}
.studio-swatch:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--lux-champagne, var(--st-gold, #d4af37)),
0 0 0 4px rgba(212, 175, 55, 0.25);
}
.studio-swatch.is-active {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.06);
}
.studio-swatch-chip {
width: 24px; height: 24px;
border-radius: 5px;
background: var(--swatch-color, #ccc);
flex-shrink: 0;
border: 1px solid var(--st-line-strong);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.studio-swatch-label {
line-height: 1.25;
flex: 1;
min-width: 0;
font-weight: 500;
}
/* V15.1 : swatch avec thumb texture SVG (variant studio-swatch-tex) */
.studio-swatch-tex {
display: grid;
grid-template-columns: 60px 1fr;
grid-template-rows: auto auto;
gap: 4px 10px;
align-items: center;
}
.studio-swatch-tex .studio-swatch-thumb {
grid-row: 1 / span 2;
width: 60px;
height: 40px;
border-radius: 5px;
overflow: hidden;
border: 1px solid var(--st-line-strong);
background: var(--st-bg);
}
.studio-swatch-tex .studio-swatch-thumb svg { display: block; width: 100%; height: 100%; }
.studio-swatch-tex .studio-swatch-label {
grid-column: 2;
grid-row: 1;
font-size: 11px;
line-height: 1.2;
}
.studio-swatch-tex .studio-swatch-note {
grid-column: 2;
grid-row: 2;
font-size: 9.5px;
color: var(--st-text-mute);
font-style: italic;
line-height: 1.2;
margin-top: -2px;
}
.studio-swatch-tex:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* V20.2 QA4 P0 : touch-action: none sur canvas Konva/Three (conflit pinch zoom iOS) */
.studio-canvas-stage canvas,
.studio-canvas-2d canvas,
.studio-canvas-3d canvas,
[data-studio-canvas2d] canvas,
[data-studio-canvas3d] canvas {
touch-action: none;
}
/* V20.2 QA4 P0 : panel modules cuisine responsive mobile (avant masquait 91% canvas) */
@media (max-width: 640px) {
.solea-room-modules-editor {
width: 100% !important;
top: auto !important;
bottom: 0 !important;
height: 50vh !important;
max-height: 50vh !important;
border-left: 0 !important;
border-top: 1px solid var(--st-line);
box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}
/* V20.2 : modal étages stack vertical sur mobile (tap targets accessibles) */
.solea-floor-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.solea-floor-order { flex-direction: row !important; }
.solea-floor-order button { width: 44px !important; height: 32px !important; }
.solea-floor-remove { width: 44px !important; height: 44px !important; }
}
/* V19.1 : Modal Vues techniques (élévations N/E/S/O + coupes) */
.solea-elevations-modal .studio-modal-dialog--large { max-width: 1200px; }
.solea-elevations-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
max-height: 70vh;
overflow-y: auto;
padding: 4px;
}
.solea-elev-card {
background: var(--st-panel-2, #1c1c22);
border: 1px solid var(--st-line);
border-radius: 8px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.solea-elev-card h4 {
margin: 0;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 16px;
color: var(--st-gold);
font-weight: 500;
}
.solea-elev-card img {
width: 100%;
height: auto;
border-radius: 4px;
background: #1a1a1c;
}
.solea-elev-card .studio-btn { align-self: flex-start; padding: 6px 14px; font-size: 11px; }
/* V17 : Modal de gestion des étages — illimité, drag-reorder, hauteur custom */
.solea-floor-manager .studio-modal-dialog { max-width: 720px; }
.solea-floors-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.solea-floor-row {
display: grid;
grid-template-columns: 38px 1fr 32px;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: var(--st-panel-2, #1c1c22);
border: 1px solid var(--st-line);
border-radius: 8px;
}
.solea-floor-order { display: flex; flex-direction: column; gap: 2px; }
.solea-floor-order button {
width: 32px; height: 22px;
background: transparent;
border: 1px solid var(--st-line);
color: var(--st-text-soft);
border-radius: 4px;
cursor: pointer;
font-size: 10px;
line-height: 1;
}
.solea-floor-order button:hover:not(:disabled) { color: var(--st-gold); border-color: var(--st-gold); }
.solea-floor-order button:disabled { opacity: 0.3; cursor: not-allowed; }
.solea-floor-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.solea-floor-label {
background: rgba(255,255,255,0.05);
border: 1px solid var(--st-line);
color: var(--st-text);
padding: 6px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
width: 100%;
}
.solea-floor-label:focus { outline: none; border-color: var(--st-gold); }
.solea-floor-meta {
display: flex; flex-wrap: wrap; gap: 12px;
font-size: 11px;
color: var(--st-text-mute);
align-items: center;
}
.solea-floor-type {
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(255,255,255,0.06);
padding: 2px 8px;
border-radius: 3px;
font-weight: 600;
color: var(--st-gold);
}
.solea-floor-height input {
width: 56px;
background: rgba(255,255,255,0.05);
border: 1px solid var(--st-line);
color: var(--st-text);
padding: 3px 6px;
border-radius: 4px;
font-size: 11px;
margin: 0 4px;
}
.solea-floor-remove {
width: 32px; height: 32px;
background: rgba(232,74,58,0.10);
border: 1px solid rgba(232,74,58,0.3);
color: #e84a3a;
border-radius: 50%;
cursor: pointer;
font-size: 13px;
line-height: 1;
}
.solea-floor-remove:hover { background: rgba(232,74,58,0.25); }
/* Group des boutons + et ⚙ à côté des étages dans la toolbar */
.studio-floor-actions {
display: flex; gap: 4px;
margin-left: 4px;
padding-left: 8px;
border-left: 1px solid var(--st-line, rgba(255,255,255,0.1));
}
.studio-floor-actions .studio-tool {
font-size: 14px;
width: 28px; min-width: 28px;
padding: 0;
line-height: 1;
}
/* V16.3 : panel contextuel cuisine/SDB modulaire (double-click pièce zoom) */
.solea-room-modules-editor {
position: fixed;
top: calc(var(--st-topbar-h, 56px) + var(--wp-header-h, 0px));
right: 0;
bottom: var(--st-footer-h, 64px);
width: 340px;
background: var(--st-panel, #1c1c22);
border-left: 1px solid var(--st-line, rgba(255,255,255,0.1));
color: var(--st-text, #f4f0e8);
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
z-index: 70;
display: flex;
flex-direction: column;
box-shadow: -8px 0 32px rgba(0,0,0,0.4);
animation: srme-slide-in 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes srme-slide-in {
from { transform: translateX(100%); opacity: 0; }
to { transform: none; opacity: 1; }
}
.srme-head {
padding: 14px 16px;
border-bottom: 1px solid var(--st-line);
display: flex; flex-direction: column; gap: 6px;
background: rgba(0,0,0,0.18);
}
.srme-back {
background: transparent;
border: 1px solid var(--st-line, rgba(255,255,255,0.12));
color: var(--st-text-soft, rgba(244,240,232,0.7));
padding: 6px 12px;
border-radius: 14px;
cursor: pointer;
font-size: 11.5px;
text-align: left;
font-family: inherit;
align-self: flex-start;
}
.srme-back:hover { background: rgba(255,255,255,0.06); color: var(--st-text); }
.srme-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.srme-title strong { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; color: var(--st-gold, #c9a96e); font-weight: 500; }
.srme-title span { font-size: 11px; color: var(--st-text-mute); font-variant-numeric: tabular-nums; }
.srme-section {
padding: 12px 16px;
border-bottom: 1px solid var(--st-line);
overflow-y: auto;
flex: 0 0 auto;
}
.srme-section h4 {
margin: 0 0 10px;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--st-text-mute);
font-weight: 600;
}
.srme-tpl-list, .srme-mod-list { display: grid; gap: 6px; }
.srme-tpl-list { grid-template-columns: 1fr; }
.srme-mod-list { grid-template-columns: 1fr 1fr; max-height: 260px; overflow-y: auto; }
.srme-tpl {
display: flex; gap: 10px; align-items: center;
background: var(--st-panel-2, #15151a);
border: 1px solid var(--st-line);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
text-align: left;
color: var(--st-text);
font-family: inherit;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.srme-tpl:hover { background: rgba(201, 169, 110, 0.08); border-color: var(--st-gold); transform: translateX(-2px); }
.srme-tpl-icon { font-size: 18px; line-height: 1; color: var(--st-gold); flex-shrink: 0; width: 22px; text-align: center; }
.srme-tpl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.srme-tpl-body strong { font-size: 13px; font-weight: 600; }
.srme-tpl-body small { font-size: 10.5px; color: var(--st-text-mute); line-height: 1.3; }
.srme-mod {
display: flex; flex-direction: column; gap: 2px;
background: var(--st-panel-2, #15151a);
border: 1px solid var(--st-line);
border-radius: 6px;
padding: 8px 9px;
cursor: pointer;
text-align: left;
color: var(--st-text);
font-family: inherit;
transition: background 0.2s, border-color 0.2s;
}
.srme-mod:hover { background: rgba(201, 169, 110, 0.08); border-color: var(--st-gold); }
.srme-mod-name { font-size: 11px; line-height: 1.3; }
.srme-mod-dim { font-size: 9.5px; color: var(--st-text-mute); font-variant-numeric: tabular-nums; }
.srme-foot {
margin-top: auto;
padding: 12px 16px;
border-top: 1px solid var(--st-line);
background: rgba(0,0,0,0.18);
}
.srme-rotate {
width: 100%;
padding: 10px 14px;
background: var(--st-gold, #c9a96e);
color: #1a1208;
border: none;
border-radius: 22px;
font-family: inherit;
font-weight: 600;
font-size: 12px;
cursor: pointer;
letter-spacing: 0.02em;
}
.srme-rotate:hover { background: #d4b87c; }
/* V15.2 : panel Équipements (chauffage / ECS / ventilation / élec / plomberie) */
.studio-equip-group {
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--st-line);
}
.studio-equip-group:last-child { border-bottom: 0; }
.studio-equip-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 15px;
color: var(--st-gold);
margin: 0 0 8px;
letter-spacing: 0.01em;
}
.studio-equip-options {
display: grid;
gap: 6px;
}
.studio-equip-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 9px 12px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 7px;
color: var(--st-text);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.studio-equip-card strong {
font-size: 12px;
font-weight: 600;
line-height: 1.25;
}
.studio-equip-card span {
font-size: 10.5px;
color: var(--st-text-mute);
line-height: 1.2;
}
.studio-equip-card.is-active {
background: rgba(246, 183, 44, 0.08);
border-color: var(--st-gold);
box-shadow: 0 0 0 1px var(--st-gold-soft);
}
.studio-equip-card.is-active strong { color: var(--st-gold); }
.studio-equip-card:hover {
background: var(--st-panel-hover);
transform: translateY(-1px);
}
/* V15.1 : mode isolation — 4 boutons toggle ITE/ITI/Mixte/Répartie */
.studio-iso-mode {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 6px;
margin-bottom: 10px;
}
.studio-iso-mode-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 4px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 6px;
color: var(--st-text);
cursor: pointer;
font-family: inherit;
transition: background 0.2s, border-color 0.2s;
}
.studio-iso-mode-btn strong {
font-size: 13px;
color: var(--st-gold);
letter-spacing: 0.04em;
font-weight: 700;
}
.studio-iso-mode-btn span {
font-size: 9.5px;
color: var(--st-text-mute);
text-align: center;
line-height: 1.2;
}
.studio-iso-mode-btn.is-active {
background: rgba(246, 183, 44, 0.12);
border-color: var(--st-gold);
box-shadow: 0 0 0 1px var(--st-gold-soft);
}
.studio-iso-mode-btn:hover {
background: var(--st-panel-hover);
}
/* Options */
.studio-option-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.studio-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--st-panel-2);
border: 1px solid transparent;
border-radius: var(--st-radius);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.studio-option:hover { background: var(--st-panel-hover); }
.studio-option:has(.studio-option-checkbox:checked) {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.06);
}
.studio-option-checkbox {
flex-shrink: 0;
width: 14px; height: 14px;
accent-color: var(--st-gold);
cursor: pointer;
}
.studio-option-icon {
width: 28px; height: 28px;
display: grid; place-items: center;
color: var(--st-text-soft);
background: rgba(255,255,255,0.04);
border-radius: 5px;
flex-shrink: 0;
}
.studio-option-icon svg { width: 16px; height: 16px; }
.studio-option:has(.studio-option-checkbox:checked) .studio-option-icon {
color: var(--st-gold);
background: var(--st-gold-soft);
}
.studio-option-body { flex: 1; min-width: 0; }
.studio-option-label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--st-text);
line-height: 1.3;
}
.studio-option-price {
display: block;
font-size: 10.5px;
color: var(--st-text-mute);
margin-top: 1px;
}
.studio-option-qty {
width: 40px;
padding: 3px 6px;
background: var(--st-bg);
border: 1px solid var(--st-line);
border-radius: 4px;
color: var(--st-text);
font-family: inherit;
font-size: 11px;
text-align: center;
}
/* ════════════════════════════════════════════════════
5. CANVAS
════════════════════════════════════════════════════ */
.studio-canvas-section {
grid-column: 2;
display: flex;
flex-direction: column;
min-height: 0;
background: var(--st-canvas-bg);
position: relative;
}
.studio-canvas-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
height: var(--st-toolbar-h);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(13, 13, 16, 0.08);
flex-shrink: 0;
z-index: 5;
}
.studio-tool-group {
display: flex;
align-items: center;
gap: 2px;
padding: 3px;
background: rgba(13, 13, 16, 0.04);
border-radius: 6px;
}
.studio-tool-group-right { margin-left: auto; }
.studio-3d-tools { gap: 4px; padding: 4px 8px; }
.studio-tool {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 10px;
background: transparent;
border: 0;
border-radius: 4px;
color: var(--st-ink-soft);
font-family: inherit;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
line-height: 1;
}
.studio-tool:hover { background: rgba(13, 13, 16, 0.06); color: var(--st-ink); }
.studio-tool.is-active {
background: var(--st-ink);
color: var(--st-canvas-bg);
}
.studio-tool-ghost { padding: 6px 8px; }
/* Stage = zone canvas */
.studio-canvas-stage {
flex: 1;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 50% 40%, rgba(246, 183, 44, 0.04) 0%, transparent 60%),
var(--st-canvas-bg);
}
.studio-stage-layer {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.studio-stage-layer[hidden] { display: none; }
.studio-stage-2d {
background-image:
linear-gradient(rgba(13,13,16,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(13,13,16,0.05) 1px, transparent 1px);
background-size: 20px 20px;
}
.studio-stage-3d { background: linear-gradient(180deg, #cfd5dd 0%, #e9e3d4 100%); }
.studio-stage-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.studio-drop-hint {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--st-ink-mute);
max-width: 360px;
padding: 24px;
transition: opacity 0.3s var(--st-easing);
}
.studio-drop-hint.is-hidden { opacity: 0; }
.studio-drop-hint svg { color: var(--st-ink-mute); margin-bottom: 12px; }
.studio-drop-hint-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-style: italic;
color: var(--st-ink-soft);
margin: 0 0 6px;
}
.studio-drop-hint-sub {
font-size: 13px;
color: var(--st-ink-mute);
line-height: 1.5;
margin: 0;
}
.studio-stage-scale {
position: absolute;
bottom: 14px; left: 14px;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border-radius: 5px;
font-size: 10.5px;
color: var(--st-ink-soft);
font-weight: 600;
letter-spacing: 0.06em;
}
.studio-scale-bar {
width: 40px; height: 4px;
background: linear-gradient(90deg, var(--st-ink) 0%, var(--st-ink) 50%, transparent 50%, transparent 100%);
background-size: 8px 4px;
border: 1px solid var(--st-ink);
}
/* ════════════════════════════════════════════════════
6. SIDEBAR DROITE — propriétés / résumé
════════════════════════════════════════════════════ */
.studio-sidebar-right {
overflow-y: auto;
/* V20.37 L64 : scroll isolation — empêche le bubble vers au
bord de la sidebar (sticky header WP qui scrolle hors écran). */
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--st-line-strong) transparent;
}
.studio-sidebar-right::-webkit-scrollbar { width: 6px; }
.studio-sidebar-right::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 3px; }
.studio-props-summary,
.studio-props-detail {
padding: 22px 18px 28px;
}
.studio-props-summary[hidden],
.studio-props-detail[hidden] { display: none; }
.studio-props-header {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--st-line);
}
.studio-props-eyebrow {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
margin: 0 0 8px;
}
.studio-props-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--st-text);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.studio-props-meta {
font-size: 11.5px;
color: var(--st-text-mute);
margin: 0;
display: flex;
align-items: center;
gap: 6px;
}
.studio-props-meta-dot { opacity: 0.5; }
/* Bloc budget dans la sidebar droite */
.studio-budget-block {
padding: 16px;
background: linear-gradient(180deg, var(--st-panel-2) 0%, var(--st-panel) 100%);
border-radius: var(--st-radius-lg);
margin-bottom: 18px;
border: 1px solid var(--st-line);
}
.studio-budget-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
margin: 0 0 8px;
font-weight: 700;
}
.studio-budget-range {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: var(--st-text);
margin: 0 0 2px;
line-height: 1.1;
}
.studio-budget-sep { color: var(--st-gold); margin: 0 2px; }
.studio-budget-unit { color: var(--st-gold); font-size: 16px; margin-left: 2px; }
.studio-budget-mid {
font-size: 11.5px;
color: var(--st-text-mute);
margin: 0 0 14px;
}
.studio-breakdown {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.studio-breakdown li {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 11.5px;
padding: 5px 0;
border-bottom: 1px solid var(--st-line);
}
.studio-breakdown li:last-child { border-bottom: 0; }
.studio-breakdown .bd-label { color: var(--st-text-mute); }
.studio-breakdown .bd-value {
color: var(--st-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.studio-budget-note {
font-size: 10.5px;
color: var(--st-text-mute);
line-height: 1.5;
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--st-line);
font-style: italic;
}
/* Liste pièces dans la sidebar droite */
.studio-rooms-recap-title {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--st-text-mute);
margin: 0 0 10px;
}
.studio-rooms-recap-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.studio-rooms-recap-list li {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
padding: 8px 10px;
background: var(--st-panel-2);
border-radius: 5px;
font-size: 12px;
color: var(--st-text);
}
.studio-rooms-recap-list li.selected {
background: rgba(246, 183, 44, 0.1);
border-left: 2px solid var(--st-gold);
}
.studio-rooms-empty,
.studio-rooms-recap-list li.empty {
display: block;
text-align: center;
color: var(--st-text-mute);
font-style: italic;
font-size: 11.5px;
padding: 14px 10px;
background: transparent;
border: 1px dashed var(--st-line-strong);
}
/* Propriétés objet sélectionné */
.studio-props-section {
margin-bottom: 18px;
}
.studio-props-section-title {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--st-text-mute);
margin: 0 0 10px;
}
.studio-dim-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.studio-dim-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.studio-dim-label {
font-size: 10px;
color: var(--st-text-mute);
letter-spacing: 0.06em;
}
.studio-dim-field input {
background: var(--st-panel-2);
border: 1px solid var(--st-line);
color: var(--st-text);
padding: 7px 10px;
border-radius: 5px;
font-family: inherit;
font-size: 12.5px;
width: 100%;
}
.studio-dim-field input:focus { outline: none; border-color: var(--st-gold); }
.studio-dim-field-readonly .studio-dim-value {
background: var(--st-panel-2);
color: var(--st-gold);
padding: 7px 10px;
border-radius: 5px;
font-size: 13px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 500;
}
.studio-props-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ════════════════════════════════════════════════════
7. FOOTER STICKY — métriques + CTA
════════════════════════════════════════════════════ */
.studio-footer {
grid-row: 3;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 22px;
background: var(--st-panel);
border-top: 1px solid var(--st-line);
z-index: 30;
height: var(--st-footer-h);
}
.studio-footer-metrics {
display: flex;
align-items: center;
gap: 22px;
flex: 1;
min-width: 0;
overflow: hidden;
}
.studio-metric {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.studio-metric-label {
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--st-text-mute);
font-weight: 600;
}
.studio-metric-value {
font-size: 14.5px;
font-weight: 600;
color: var(--st-text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.studio-metric-budget .studio-metric-value {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 18px;
color: var(--st-gold);
}
.studio-metric-divider {
width: 1px; height: 26px;
background: var(--st-line);
flex-shrink: 0;
}
.studio-footer-cta-wrap {
flex-shrink: 0;
}
.studio-btn-cta {
padding: 11px 22px;
font-size: 13px;
box-shadow: 0 6px 18px -4px rgba(246, 183, 44, 0.35);
}
/* ════════════════════════════════════════════════════
8. MODALES (onboarding + contact)
════════════════════════════════════════════════════ */
.studio-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.studio-modal[hidden] { display: none; }
.studio-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(13, 13, 16, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: studio-fade-in 0.3s var(--st-easing);
}
.studio-modal-dialog {
position: relative;
background: var(--st-panel);
border: 1px solid var(--st-line);
border-radius: 16px;
padding: 36px;
max-width: 560px;
width: 100%;
max-height: calc(100vh - 48px);
overflow-y: auto;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04),
0 32px 80px -16px rgba(0, 0, 0, 0.6);
animation: studio-rise 0.4s var(--st-easing);
}
.studio-modal-dialog--large { max-width: 720px; }
@keyframes studio-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes studio-rise {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.studio-modal-header { margin-bottom: 24px; }
.studio-modal-eyebrow {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
margin: 0 0 10px;
}
.studio-modal-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 32px;
font-weight: 400;
color: var(--st-text);
margin: 0 0 10px;
line-height: 1.1;
letter-spacing: -0.015em;
}
.studio-modal-lead {
font-size: 14px;
color: var(--st-text-soft);
margin: 0;
line-height: 1.5;
}
.studio-modal-body {
display: flex;
flex-direction: column;
gap: 22px;
margin-bottom: 24px;
}
.studio-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding-top: 18px;
border-top: 1px solid var(--st-line);
}
/* Onboarding spécifique */
.studio-onb-section { border: 0; padding: 0; margin: 0; }
.studio-onb-legend {
display: block;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--st-text-mute);
font-weight: 600;
margin: 0 0 12px;
padding: 0;
}
.studio-onb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.studio-onb-tile {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.studio-onb-tile:hover { background: var(--st-panel-hover); }
.studio-onb-tile input { display: none; }
.studio-onb-tile:has(input:checked) {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.08);
}
.studio-onb-tile-title {
font-size: 13px;
font-weight: 600;
color: var(--st-text);
}
.studio-onb-tile-sub {
font-size: 11px;
color: var(--st-text-mute);
}
.studio-onb-field {
display: block;
}
.studio-onb-select {
width: 100%;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
color: var(--st-text);
font-family: inherit;
font-size: 13px;
padding: 11px 14px;
border-radius: var(--st-radius);
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
padding-right: 36px;
}
.studio-onb-select:focus { outline: none; border-color: var(--st-gold); }
/* Form lead capture dans la modale contact */
.studio-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.studio-form-field { display: flex; flex-direction: column; gap: 4px; }
.studio-form-field-full { grid-column: 1 / -1; }
.studio-form-field label {
font-size: 11px;
color: var(--st-text-mute);
letter-spacing: 0.04em;
font-weight: 500;
}
.studio-form-field input,
.studio-form-field textarea {
background: var(--st-panel-2);
border: 1px solid var(--st-line);
color: var(--st-text);
padding: 9px 12px;
border-radius: 5px;
font-family: inherit;
font-size: 13px;
}
.studio-form-field input:focus,
.studio-form-field textarea:focus { outline: none; border-color: var(--st-gold); }
.studio-form-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.studio-form-checkbox label {
color: var(--st-text-soft);
font-size: 12.5px;
line-height: 1.45;
display: flex;
gap: 8px;
align-items: flex-start;
}
.studio-form-checkbox input {
accent-color: var(--st-gold);
margin-top: 2px;
}
.studio-form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 8px;
padding-top: 14px;
border-top: 1px solid var(--st-line);
}
.studio-lead-form { display: flex; flex-direction: column; gap: 14px; }
/* ════════════════════════════════════════════════════
9. RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.solea-studio { --st-sidebar-l-w: 260px; --st-sidebar-r-w: 280px; }
.studio-catalog,
.studio-mat-swatches,
.studio-onb-grid { grid-template-columns: 1fr; }
}
/* FIX audit CSS : breakpoint 640px (au lieu de 880px) pour ne plus chevaucher
* avec le tablet override (641-1023px). Entre 641-880 on garde les sidebars
* latérales (en 240px, géré par le responsive.css). À 640 et moins on passe
* en mode stack vertical complet (mobile).
* Note : responsive.css surcharge à 640 avec drawers complets, ce bloc
* est un fallback safe entre 641 et le tablet override. */
@media (max-width: 640px) {
.solea-studio {
grid-template-rows: var(--st-topbar-h) auto 1fr auto var(--st-footer-h);
height: 100vh;
}
.studio-shell {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
overflow-y: auto;
}
.studio-sidebar { max-height: 240px; border-right: 0; border-left: 0; border-bottom: 1px solid var(--st-line); }
.studio-sidebar-right { border-top: 1px solid var(--st-line); }
.studio-canvas-section { min-height: 320px; }
.studio-topbar-right .studio-btn span { display: none; }
.studio-topbar-right .studio-btn-primary span { display: inline; }
.studio-project-input { min-width: 140px; }
.studio-footer { padding: 0 14px; }
.studio-footer-metrics { gap: 14px; }
.studio-metric-label { font-size: 8.5px; }
.studio-metric-value { font-size: 12.5px; }
.studio-metric-budget .studio-metric-value { font-size: 14px; }
.studio-btn-cta { padding: 9px 16px; font-size: 12px; }
}
@media (max-width: 560px) {
.solea-studio { --st-topbar-h: 50px; --st-footer-h: 56px; }
.studio-topbar { padding: 0 10px; }
.studio-brand-text { display: none; }
.studio-topbar-divider { display: none; }
.studio-project-status { display: none; }
.studio-footer-metrics {
flex-wrap: nowrap;
overflow-x: auto;
}
.studio-metric-divider { display: none; }
.studio-modal-dialog { padding: 22px; border-radius: 12px; }
.studio-modal-title { font-size: 24px; }
.studio-form-row { grid-template-columns: 1fr; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.solea-studio *,
.solea-studio *::before,
.solea-studio *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ════════════════════════════════════════════════════
10. PANEL TERRAIN (V2 — cadastre, PLU, risques)
════════════════════════════════════════════════════ */
/* Stage carte Leaflet */
.studio-stage-map {
background: #e8e4d8;
}
.studio-stage-map .leaflet-container {
width: 100%;
height: 100%;
background: #e8e4d8;
font-family: 'Montserrat', system-ui, sans-serif;
}
/* Override Leaflet pour match thème */
.solea-studio .leaflet-control-zoom a,
.solea-studio .leaflet-control-layers {
background: rgba(13, 13, 16, 0.85);
color: var(--st-text);
border: 1px solid var(--st-line);
border-radius: 6px;
backdrop-filter: blur(8px);
}
.solea-studio .leaflet-control-zoom a {
width: 32px;
height: 32px;
line-height: 30px;
font-size: 16px;
color: var(--st-text);
}
.solea-studio .leaflet-control-zoom a:hover {
background: rgba(246, 183, 44, 0.2);
color: var(--st-gold);
}
.solea-studio .leaflet-control-attribution {
background: rgba(255, 255, 255, 0.85);
color: var(--st-ink-soft);
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
}
.solea-studio .leaflet-popup-content-wrapper {
background: rgba(13, 13, 16, 0.95);
color: var(--st-text);
border-radius: 8px;
backdrop-filter: blur(10px);
}
.solea-studio .leaflet-popup-content {
margin: 12px 14px;
font-size: 12.5px;
line-height: 1.5;
}
.solea-studio .leaflet-popup-tip { background: rgba(13, 13, 16, 0.95); }
.solea-studio .terrain-popup strong {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 15px;
color: var(--st-gold);
}
/* Recherche adresse */
.studio-terrain-search {
position: relative;
margin-bottom: 16px;
}
.studio-search-field {
position: relative;
display: flex;
align-items: center;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 6px;
transition: border-color 0.2s;
}
.studio-search-field:focus-within { border-color: var(--st-gold); }
.studio-search-icon {
position: absolute;
left: 12px;
color: var(--st-text-mute);
pointer-events: none;
}
.studio-terrain-input {
width: 100%;
background: transparent;
border: 0;
padding: 10px 32px 10px 36px;
color: var(--st-text);
font-family: inherit;
font-size: 12.5px;
}
.studio-terrain-input:focus { outline: none; }
.studio-search-clear {
position: absolute;
right: 8px;
width: 20px; height: 20px;
background: var(--st-panel-hover);
border: 0;
border-radius: 50%;
color: var(--st-text-soft);
cursor: pointer;
font-size: 14px;
line-height: 1;
display: grid; place-items: center;
}
.studio-search-clear:hover { color: var(--st-gold); }
.studio-terrain-suggestions {
list-style: none;
margin: 4px 0 0;
padding: 4px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 6px;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
}
.studio-terrain-suggestions li {
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
color: var(--st-text);
transition: background 0.15s;
}
.studio-terrain-suggestions li:hover,
.studio-terrain-suggestions li.is-active {
background: rgba(246, 183, 44, 0.12);
color: var(--st-gold);
}
.studio-terrain-suggestions li .sugg-context {
display: block;
font-size: 10.5px;
color: var(--st-text-mute);
margin-top: 1px;
}
/* Import par n° parcelle */
.studio-terrain-bynum {
margin-bottom: 16px;
background: var(--st-panel-2);
border-radius: 6px;
border: 1px solid var(--st-line);
overflow: hidden;
}
.studio-terrain-bynum summary {
padding: 10px 12px;
font-size: 11.5px;
font-weight: 600;
color: var(--st-text-soft);
cursor: pointer;
list-style: none;
user-select: none;
}
.studio-terrain-bynum summary::-webkit-details-marker { display: none; }
.studio-terrain-bynum summary::before {
content: '+';
display: inline-block;
margin-right: 8px;
color: var(--st-gold);
transition: transform 0.2s;
}
.studio-terrain-bynum[open] summary::before {
content: '−';
}
.studio-terrain-bynum-fields {
padding: 8px 12px 14px;
display: grid;
gap: 6px;
}
.studio-terrain-input-sm {
background: var(--st-bg);
border: 1px solid var(--st-line);
color: var(--st-text);
padding: 7px 10px;
border-radius: 4px;
font-family: inherit;
font-size: 11.5px;
}
.studio-terrain-input-sm:focus { outline: none; border-color: var(--st-gold); }
/* Résultats */
.studio-terrain-result {
display: flex;
flex-direction: column;
gap: 12px;
animation: studio-fade-in 0.3s var(--st-easing);
}
.studio-terrain-result[hidden] { display: none; }
.studio-terrain-card {
padding: 14px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: var(--st-radius);
}
.studio-terrain-card-eyebrow {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
margin: 0 0 6px;
}
.studio-terrain-card-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 18px;
font-weight: 500;
color: var(--st-text);
margin: 0 0 4px;
}
.studio-terrain-card-address {
font-size: 11.5px;
color: var(--st-text-soft);
margin: 0 0 10px;
line-height: 1.45;
}
.studio-terrain-card-dl {
margin: 0;
display: grid;
gap: 6px;
}
.studio-terrain-card-dl > div {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-top: 1px solid var(--st-line);
font-size: 12px;
}
.studio-terrain-card-dl dt { color: var(--st-text-mute); margin: 0; }
.studio-terrain-card-dl dd { color: var(--st-text); margin: 0; }
.studio-terrain-card-dl dd strong { color: var(--st-gold); font-weight: 700; font-size: 14px; }
/* Widget PLU */
.studio-plu-zone-badge {
display: inline-block;
padding: 5px 12px;
background: var(--st-gold);
color: var(--st-ink);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
border-radius: 4px;
margin-bottom: 8px;
}
.studio-plu-libelle {
font-size: 12px;
color: var(--st-text-soft);
margin: 0 0 10px;
line-height: 1.45;
}
.studio-plu-rules {
list-style: none;
padding: 0;
margin: 0 0 10px;
display: grid;
gap: 5px;
}
.studio-plu-rules li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 8px;
background: rgba(246, 183, 44, 0.06);
border-radius: 4px;
font-size: 11.5px;
}
.studio-plu-rules li .rule-label { color: var(--st-text-mute); }
.studio-plu-rules li .rule-value {
color: var(--st-gold);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.studio-plu-pdf {
display: inline-block;
font-size: 11px;
color: var(--st-gold);
text-decoration: none;
padding: 4px 0;
border-bottom: 1px dashed var(--st-gold);
}
.studio-plu-pdf:hover { color: #ffc94a; }
/* Widget Risques */
.studio-risk-card { padding: 14px; }
.studio-risk-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 10px;
}
.studio-risk-item {
padding: 8px 10px;
background: rgba(13, 13, 16, 0.3);
border-radius: 4px;
font-size: 11px;
}
.studio-risk-item.is-warning { background: rgba(232, 168, 124, 0.12); border-left: 2px solid #e8a87c; }
.studio-risk-item.is-critical { background: rgba(232, 74, 58, 0.12); border-left: 2px solid var(--st-danger); }
.studio-risk-item-label {
display: block;
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--st-text-mute);
margin-bottom: 2px;
}
.studio-risk-item-value {
display: block;
font-weight: 700;
color: var(--st-text);
font-size: 12.5px;
}
.studio-risk-alerts {
display: flex;
flex-direction: column;
gap: 6px;
}
.studio-risk-alert {
padding: 8px 10px;
border-radius: 4px;
font-size: 11px;
line-height: 1.4;
display: flex;
align-items: flex-start;
gap: 8px;
}
.studio-risk-alert::before {
content: '⚠';
font-size: 14px;
flex-shrink: 0;
line-height: 1;
}
.studio-risk-alert.alert-critical {
background: rgba(232, 74, 58, 0.18);
color: #ffc4bf;
border-left: 2px solid var(--st-danger);
}
.studio-risk-alert.alert-warning {
background: rgba(246, 183, 44, 0.15);
color: var(--st-gold);
border-left: 2px solid var(--st-gold);
}
.studio-risk-alert.alert-info {
background: rgba(168, 200, 228, 0.1);
color: #a8c8e4;
border-left: 2px solid #a8c8e4;
}
/* Actions terrain */
.studio-terrain-actions {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 8px;
border-top: 1px solid var(--st-line);
}
/* État chargement */
.studio-terrain-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px;
color: var(--st-text-mute);
font-size: 12px;
}
.studio-terrain-loading::before {
content: '';
width: 14px; height: 14px;
border: 2px solid var(--st-line);
border-top-color: var(--st-gold);
border-radius: 50%;
animation: studio-spin 0.8s linear infinite;
}
@keyframes studio-spin {
to { transform: rotate(360deg); }
}
/* Erreur */
.studio-terrain-error {
padding: 12px;
background: rgba(232, 74, 58, 0.12);
border-left: 2px solid var(--st-danger);
border-radius: 4px;
color: #ffc4bf;
font-size: 11.5px;
margin-bottom: 12px;
}
/* ════════════════════════════════════════════════════
11. CHAT IA — FAB + drawer assistant
════════════════════════════════════════════════════ */
/* ---- FAB doré ---- */
.studio-chat-fab {
position: fixed;
bottom: calc(var(--st-footer-h) + 18px);
right: 22px;
z-index: 60; /* doit être sous les drawers mobile (z:80) et modales (z:100) */
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px 12px 14px;
background: linear-gradient(135deg, var(--st-gold) 0%, #ffc94a 100%);
color: var(--st-ink);
border: 0;
border-radius: 999px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow:
0 10px 32px -6px rgba(246, 183, 44, 0.5),
0 2px 6px rgba(13, 13, 16, 0.2);
transition: transform 0.25s var(--st-easing), box-shadow 0.25s var(--st-easing);
animation: studio-chat-fab-in 0.5s var(--st-easing) 0.8s both;
}
.studio-chat-fab:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 16px 40px -6px rgba(246, 183, 44, 0.65),
0 4px 10px rgba(13, 13, 16, 0.25);
}
.studio-chat-fab.is-active {
transform: scale(0.94);
}
.studio-chat-fab-icon {
display: grid; place-items: center;
width: 28px; height: 28px;
background: rgba(13, 13, 16, 0.12);
border-radius: 50%;
position: relative;
z-index: 2;
}
.studio-chat-fab-label { position: relative; z-index: 2; }
.studio-chat-fab-pulse {
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--st-gold);
z-index: 1;
animation: studio-chat-fab-pulse 2.4s ease-out infinite;
opacity: 0;
}
@keyframes studio-chat-fab-pulse {
0% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0; transform: scale(1.5); }
}
@keyframes studio-chat-fab-in {
from { opacity: 0; transform: translateY(20px) scale(0.8); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ---- Drawer chat ---- */
.studio-chat-drawer {
position: fixed;
bottom: calc(var(--st-footer-h) + 18px);
right: 22px;
z-index: 65; /* au-dessus du FAB chat (60) mais sous drawers mobile (80) et modales (100) */
width: 400px;
max-width: calc(100vw - 44px);
height: min(640px, calc(100vh - var(--st-topbar-h) - var(--st-footer-h) - 40px));
background: var(--st-panel);
border: 1px solid var(--st-line-strong);
border-radius: 16px;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04),
0 32px 80px -16px rgba(0, 0, 0, 0.6),
0 16px 40px -8px rgba(246, 183, 44, 0.15);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.96);
pointer-events: none;
transition: opacity 0.3s var(--st-easing), transform 0.3s var(--st-easing);
}
.studio-chat-drawer.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Header */
.studio-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
background: linear-gradient(180deg, var(--st-panel-2) 0%, var(--st-panel) 100%);
border-bottom: 1px solid var(--st-line);
flex-shrink: 0;
}
.studio-chat-brand { display: flex; align-items: center; gap: 12px; }
.studio-chat-avatar {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--st-gold);
color: var(--st-ink);
border-radius: 9px;
box-shadow: 0 4px 12px -2px rgba(246, 183, 44, 0.4);
}
.studio-chat-titles { display: flex; flex-direction: column; line-height: 1.15; }
.studio-chat-eyebrow {
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
}
.studio-chat-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 20px;
font-weight: 500;
color: var(--st-text);
margin: 0;
}
.studio-chat-close {
width: 30px; height: 30px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--st-text-mute);
cursor: pointer;
display: grid; place-items: center;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.studio-chat-close:hover {
background: var(--st-panel-hover);
color: var(--st-text);
border-color: var(--st-line-strong);
}
/* Notice */
.studio-chat-notice {
padding: 8px 18px;
background: rgba(246, 183, 44, 0.08);
border-bottom: 1px solid var(--st-line);
font-size: 10.5px;
color: var(--st-text-soft);
line-height: 1.5;
flex-shrink: 0;
}
.studio-chat-notice strong { color: var(--st-gold); font-weight: 700; }
/* Body (scrollable) */
.studio-chat-body {
flex: 1;
overflow-y: auto;
padding: 18px;
scrollbar-width: thin;
scrollbar-color: var(--st-line-strong) transparent;
}
.studio-chat-body::-webkit-scrollbar { width: 6px; }
.studio-chat-body::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 3px; }
/* État vide */
.studio-chat-empty[hidden] { display: none; }
.studio-chat-empty {
text-align: center;
padding: 8px 4px 0;
}
.studio-chat-empty-icon {
color: var(--st-gold);
opacity: 0.7;
margin-bottom: 12px;
}
.studio-chat-empty-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
font-weight: 500;
color: var(--st-text);
margin: 0 0 6px;
line-height: 1.2;
}
.studio-chat-empty-sub {
font-size: 12px;
color: var(--st-text-mute);
margin: 0 0 20px;
line-height: 1.55;
}
.studio-chat-prompts {
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
}
.studio-chat-prompt {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 8px;
color: var(--st-text-soft);
font-family: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s;
line-height: 1.4;
}
.studio-chat-prompt:hover {
background: var(--st-panel-hover);
border-color: var(--st-gold);
color: var(--st-text);
}
.studio-chat-prompt-icon {
font-size: 16px;
flex-shrink: 0;
}
/* Messages */
.studio-chat-messages {
display: flex;
flex-direction: column;
gap: 14px;
}
.studio-chat-msg {
display: flex;
gap: 10px;
align-items: flex-start;
animation: studio-chat-msg-in 0.3s var(--st-easing);
}
@keyframes studio-chat-msg-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.studio-chat-msg-avatar {
width: 28px; height: 28px;
display: grid; place-items: center;
background: var(--st-gold);
color: var(--st-ink);
border-radius: 50%;
flex-shrink: 0;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 600;
font-size: 14px;
}
.studio-chat-msg-avatar--user {
background: var(--st-panel-hover);
color: var(--st-gold);
font-size: 18px;
}
.studio-chat-msg-body { flex: 1; min-width: 0; }
.studio-chat-msg-content {
background: var(--st-panel-2);
padding: 10px 12px;
border-radius: 10px;
color: var(--st-text);
font-size: 12.5px;
line-height: 1.6;
}
.studio-chat-msg-user .studio-chat-msg-content {
background: rgba(246, 183, 44, 0.12);
border-left: 2px solid var(--st-gold);
}
.studio-chat-msg-content p { margin: 0 0 8px; }
.studio-chat-msg-content p:last-child { margin-bottom: 0; }
.studio-chat-msg-content ul { padding-left: 18px; margin: 4px 0 8px; }
.studio-chat-msg-content li { margin-bottom: 3px; }
.studio-chat-msg-content code {
background: rgba(255, 255, 255, 0.06);
padding: 1px 5px;
border-radius: 3px;
font-family: 'JetBrains Mono', monospace;
font-size: 11.5px;
color: var(--st-gold);
}
.studio-chat-msg-content a { color: var(--st-gold); text-decoration: underline; }
.studio-chat-msg-content strong { color: var(--st-text); font-weight: 700; }
.studio-chat-msg-content em { color: var(--st-text-soft); font-style: italic; }
.studio-chat-msg-images {
display: flex;
gap: 6px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.studio-chat-msg-images img {
width: 60px; height: 60px;
object-fit: cover;
border-radius: 6px;
border: 1px solid var(--st-line);
}
/* Typing indicator */
.studio-chat-typing {
display: inline-flex;
gap: 4px;
padding: 4px 0;
}
.studio-chat-typing i {
width: 6px; height: 6px;
background: var(--st-gold);
border-radius: 50%;
animation: studio-chat-typing 1.2s ease-in-out infinite;
}
.studio-chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.studio-chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes studio-chat-typing {
0%, 100% { transform: scale(0.6); opacity: 0.4; }
50% { transform: scale(1); opacity: 1; }
}
/* Erreur dans un message */
.studio-chat-error {
padding: 10px;
background: rgba(232, 74, 58, 0.12);
border-left: 2px solid var(--st-danger);
border-radius: 4px;
color: #ffc4bf;
font-size: 11.5px;
line-height: 1.5;
}
.studio-chat-error small { display: block; margin-top: 4px; opacity: 0.85; }
.studio-chat-error a { color: var(--st-gold); }
/* Form */
.studio-chat-form {
border-top: 1px solid var(--st-line);
padding: 12px;
background: var(--st-panel);
flex-shrink: 0;
}
.studio-chat-attached {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.studio-chat-attach-item {
position: relative;
width: 50px; height: 50px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--st-line);
}
.studio-chat-attach-item img { width: 100%; height: 100%; object-fit: cover; }
.studio-chat-attach-remove {
position: absolute;
top: 2px; right: 2px;
width: 18px; height: 18px;
background: rgba(13, 13, 16, 0.7);
color: var(--st-text);
border: 0;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
line-height: 1;
display: grid; place-items: center;
}
.studio-chat-input-row {
display: flex;
align-items: flex-end;
gap: 6px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 10px;
padding: 6px;
transition: border-color 0.2s;
}
.studio-chat-input-row:focus-within { border-color: var(--st-gold); }
.studio-chat-attach,
.studio-chat-voice,
.studio-chat-send {
display: grid; place-items: center;
width: 30px; height: 30px;
background: transparent;
border: 0;
border-radius: 6px;
color: var(--st-text-mute);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.studio-chat-attach:hover,
.studio-chat-voice:hover { background: var(--st-panel-hover); color: var(--st-gold); }
.studio-chat-voice.is-listening {
color: var(--st-gold);
background: rgba(246, 183, 44, 0.15);
animation: studio-pulse 1s ease-in-out infinite;
}
.studio-chat-send {
background: var(--st-gold);
color: var(--st-ink);
}
.studio-chat-send:hover { background: #ffc94a; }
.studio-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.studio-chat-input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
color: var(--st-text);
font-family: inherit;
font-size: 13px;
resize: none;
padding: 7px 4px;
line-height: 1.4;
max-height: 160px;
overflow-y: auto;
}
.studio-chat-input:focus { outline: none; }
.studio-chat-input::placeholder { color: var(--st-text-mute); }
/* Responsive */
@media (max-width: 560px) {
.studio-chat-fab {
bottom: calc(var(--st-footer-h) + 12px);
right: 12px;
padding: 10px 14px 10px 10px;
font-size: 12px;
}
.studio-chat-fab-label { display: none; }
.studio-chat-drawer {
bottom: 0;
right: 0;
left: 0;
max-width: 100%;
width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
}
/* ════════════════════════════════════════════════════
12. V3-V5 : Toits, Menuiseries, Matières sous-onglets, Étages
════════════════════════════════════════════════════ */
/* ---- Floor selector dans toolbar ---- */
.studio-floor-group { gap: 0; }
.studio-floor-btn {
padding: 6px 11px;
min-width: 42px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* ---- Sub-tabs (panel Matières) ---- */
.studio-subtabs {
display: flex;
overflow-x: auto;
gap: 2px;
padding: 4px;
background: var(--st-panel-2);
border-radius: 6px;
margin-bottom: 14px;
scrollbar-width: none;
}
.studio-subtabs::-webkit-scrollbar { display: none; }
.studio-subtab {
flex-shrink: 0;
padding: 6px 11px;
background: transparent;
border: 0;
color: var(--st-text-mute);
font-family: inherit;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.studio-subtab:hover { color: var(--st-text-soft); }
.studio-subtab.is-active {
background: var(--st-gold);
color: var(--st-ink);
}
.studio-mat-content[hidden] { display: none; }
/* ---- Cards matières (sols / murs / sanitaire / cuisine / portes / mobilier) ---- */
.studio-mat-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.studio-mat-card {
display: flex;
flex-direction: column;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 8px;
padding: 0;
overflow: hidden;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.studio-mat-card:hover {
background: var(--st-panel-hover);
border-color: var(--st-line-strong);
transform: translateY(-1px);
}
.studio-mat-card.is-selected {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.08);
box-shadow: 0 0 0 2px rgba(246, 183, 44, 0.18);
}
/* V15 : zoom banner — affiché en haut du canvas quand on double-clique une pièce */
.studio-zoom-banner {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
display: none;
align-items: center;
gap: 12px;
padding: 10px 16px 10px 14px;
background: rgba(21, 21, 26, 0.92);
border: 1px solid var(--st-gold, #c9a96e);
border-radius: 28px;
color: var(--st-text, #f4f0e8);
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
font-size: 13px;
box-shadow: 0 10px 32px rgba(0,0,0,0.45);
z-index: 25;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.studio-zoom-banner .studio-zoom-icon {
font-size: 16px;
line-height: 1;
}
.studio-zoom-banner .studio-zoom-label {
color: var(--st-gold, #f6b72c);
font-weight: 600;
letter-spacing: 0.02em;
}
.studio-zoom-banner .studio-zoom-close {
margin-left: 6px;
padding: 5px 11px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
}
/* V15 : thumb texture procédural — SVG pattern réaliste par type de matériau */
.studio-mat-thumb {
width: 100%;
height: 72px;
overflow: hidden;
background: var(--st-bg);
border-bottom: 1px solid var(--st-line);
position: relative;
}
.studio-mat-thumb svg { display: block; width: 100%; height: 100%; }
.studio-mat-palette {
display: flex;
height: 14px;
border-bottom: 1px solid var(--st-line);
}
.studio-mat-palette span {
flex: 1;
height: 100%;
}
/* V15 : hover scale léger pour preview matière agrandie sans casser la grille */
.studio-mat-card { position: relative; }
.studio-mat-card:hover {
z-index: 5;
box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.studio-mat-card-body { padding: 9px 10px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.studio-mat-card-name {
font-size: 11.5px;
font-weight: 600;
color: var(--st-text);
margin: 0;
line-height: 1.3;
}
.studio-mat-card-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
margin: 0;
}
.studio-mat-price {
font-size: 11px;
color: var(--st-gold);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.studio-mat-tier {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
color: var(--st-text-mute);
}
.studio-tier-premium { background: rgba(246, 183, 44, 0.16); color: var(--st-gold); }
.studio-tier-sur-mesure { background: rgba(13, 13, 16, 0.5); color: #d4af37; border: 1px solid #d4af37; }
.studio-mat-card-note {
font-size: 10px;
color: var(--st-text-mute);
margin: 0;
font-style: italic;
}
/* ---- Catalogue toits ---- */
/* V15 : catalogue toits — grid 2 colonnes, cards plus grandes pour viewer 3D 180×140,
hover scale 1.5 avec z-index élevé pour preview agrandi sans déplacer le layout */
.studio-roof-catalog {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
/* Padding pour laisser respirer le hover scale 1.5 */
padding: 8px 4px;
overflow: visible;
}
.studio-roof-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 10px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 10px;
cursor: pointer;
text-align: center;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
background 0.2s, border-color 0.2s, box-shadow 0.25s ease;
font-family: inherit;
color: var(--st-text);
position: relative;
transform-origin: center center;
}
.studio-roof-card:hover {
background: var(--st-panel-hover);
border-color: var(--st-gold);
/* V15 : preview agrandi au hover — la card pousse les autres en z, scale 1.5 */
transform: scale(1.45);
z-index: 50;
box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 2px var(--st-gold-soft, rgba(246,183,44,0.18));
}
.studio-roof-card.is-active {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.1);
box-shadow: 0 0 0 2px rgba(246, 183, 44, 0.2);
}
.studio-roof-illu {
width: 100%;
height: 88px;
display: grid;
place-items: center;
background: linear-gradient(180deg, var(--st-bg) 0%, var(--st-panel-2) 100%);
border-radius: 8px;
color: var(--st-gold);
}
.studio-roof-illu svg { width: 80%; height: 100%; }
/* V15 : slot mini-3D — 180×140 prend le pas sur l'illustration SVG quand présent */
.studio-roof-card .studio-card-3d-slot {
width: 100% !important;
height: 140px !important;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(180deg, #2a2620 0%, #1a1610 100%);
}
.studio-roof-card .studio-card-3d-slot canvas { display: block; }
.studio-roof-body { width: 100%; }
.studio-roof-name {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--st-text);
line-height: 1.3;
}
.studio-roof-desc {
display: block;
font-size: 10.5px;
color: var(--st-text-mute);
line-height: 1.4;
margin-top: 3px;
}
.studio-roof-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--st-line);
}
/* ---- Catalogue menuiseries ---- */
.studio-filter-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-bottom: 12px;
}
.studio-filter-row .studio-onb-select {
padding: 7px 26px 7px 10px;
font-size: 11.5px;
}
.studio-windows-list {
display: grid;
gap: 8px;
max-height: 380px;
overflow-y: auto;
padding-right: 4px;
margin-bottom: 14px;
}
.studio-windows-list::-webkit-scrollbar { width: 4px; }
.studio-windows-list::-webkit-scrollbar-thumb { background: var(--st-line-strong); border-radius: 2px; }
/* V15 : cards menuiseries — thumb agrandi 140px pour viewer 3D 130×110 + hover scale */
.studio-window-card {
display: grid;
grid-template-columns: 140px 1fr;
gap: 12px;
padding: 10px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 10px;
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 0.2s, background 0.2s, box-shadow 0.25s ease;
position: relative;
transform-origin: center left;
}
.studio-window-card:hover {
border-color: var(--st-gold);
background: var(--st-panel-hover);
/* V15 : hover preview agrandi — scale léger pour ne pas trop déborder en sidebar */
transform: scale(1.25);
z-index: 50;
box-shadow: 0 10px 32px rgba(0,0,0,0.45), 0 0 0 2px var(--st-gold-soft, rgba(246,183,44,0.18));
}
.studio-window-card.is-selected {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.08);
}
.studio-window-thumb {
position: relative;
aspect-ratio: 4/3;
background: linear-gradient(180deg, #2a2620 0%, #1a1610 100%);
border-radius: 6px;
display: grid;
place-items: center;
color: var(--st-text-soft);
overflow: hidden;
min-height: 110px;
}
.studio-window-thumb svg { width: 70%; height: 70%; }
.studio-window-card .studio-card-3d-slot {
width: 100% !important;
height: 110px !important;
border-radius: 6px;
overflow: hidden;
}
.studio-windows-list { overflow: visible !important; padding-right: 12px; }
.studio-window-mat-badge {
position: absolute;
top: 3px; left: 3px;
padding: 1px 5px;
border-radius: 3px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.studio-win-mat-pvc { background: #e6e6e6; color: #2a2a2a; }
.studio-win-mat-alu { background: #4a525a; color: #f0f0f0; }
.studio-win-mat-bois { background: #8c5d2f; color: #fff; }
.studio-window-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.studio-window-name {
font-size: 11.5px;
font-weight: 600;
color: var(--st-text);
margin: 0;
line-height: 1.3;
}
.studio-window-dim {
font-size: 10px;
color: var(--st-text-mute);
margin: 0;
}
.studio-window-colors {
display: flex;
gap: 3px;
margin: 2px 0;
}
.studio-window-col {
width: 12px; height: 12px;
border-radius: 50%;
border: 1px solid var(--st-line-strong);
}
.studio-window-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: auto;
}
.studio-window-price {
font-size: 11.5px;
color: var(--st-gold);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.studio-window-qty {
display: flex;
align-items: center;
gap: 4px;
background: var(--st-bg);
border-radius: 4px;
padding: 1px;
}
.studio-win-qty-btn {
width: 20px; height: 20px;
background: transparent;
border: 0;
color: var(--st-gold);
cursor: pointer;
font-weight: 700;
font-size: 13px;
border-radius: 3px;
display: grid;
place-items: center;
line-height: 1;
}
.studio-win-qty-btn:hover { background: var(--st-panel-hover); }
.studio-win-qty-val {
min-width: 18px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: var(--st-text);
font-variant-numeric: tabular-nums;
}
.studio-windows-summary {
padding-top: 12px;
border-top: 1px solid var(--st-line);
}
.studio-windows-recap {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.studio-windows-recap li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 10px;
background: var(--st-panel-2);
border-radius: 4px;
font-size: 11.5px;
color: var(--st-text);
}
/* ════════════════════════════════════════════════════
13. PLU ALERTS widget (sidebar droite)
════════════════════════════════════════════════════ */
.studio-plu-alerts-widget {
padding: 14px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: var(--st-radius-lg);
margin-bottom: 18px;
}
.studio-plu-alerts-title {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
margin: 0 0 10px;
}
.studio-plu-alerts-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.studio-plu-alert {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border-radius: 4px;
font-size: 11px;
line-height: 1.4;
margin: 0;
}
.plu-alert-icon { font-size: 12px; flex-shrink: 0; line-height: 1.3; }
.plu-alert-msg { flex: 1; min-width: 0; }
.plu-alert-info {
background: rgba(168, 200, 228, 0.08);
color: #b6cfe0;
border-left: 2px solid #6f93b0;
}
.plu-alert-warning {
background: rgba(246, 183, 44, 0.12);
color: var(--st-gold);
border-left: 2px solid var(--st-gold);
}
.plu-alert-critical {
background: rgba(232, 74, 58, 0.18);
color: #ffc4bf;
border-left: 2px solid var(--st-danger);
font-weight: 600;
}
/* ════════════════════════════════════════════════════
14. PROPS — Matières applicables par pièce sélectionnée
════════════════════════════════════════════════════ */
.studio-room-materials {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px;
}
.studio-room-mat-group {
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 8px;
padding: 10px;
}
.studio-room-mat-group-title {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--st-text-mute);
font-weight: 700;
margin: 0 0 8px;
}
.studio-room-mat-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.studio-room-mat-option {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: var(--st-bg);
border: 1px solid var(--st-line);
border-radius: 5px;
cursor: pointer;
font-family: inherit;
text-align: left;
color: var(--st-text);
transition: background 0.15s, border-color 0.15s;
}
.studio-room-mat-option:hover { background: var(--st-panel-hover); }
.studio-room-mat-option.is-selected {
border-color: var(--st-gold);
background: rgba(246, 183, 44, 0.08);
}
.studio-room-mat-color {
width: 16px; height: 16px;
border-radius: 3px;
border: 1px solid var(--st-line-strong);
flex-shrink: 0;
}
.studio-room-mat-name {
font-size: 10.5px;
line-height: 1.3;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ════════════════════════════════════════════════════
16. DROPDOWN (Exporter dans topbar)
════════════════════════════════════════════════════ */
.studio-dropdown { position: relative; }
.studio-dropdown-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 260px;
background: var(--st-panel);
border: 1px solid var(--st-line-strong);
border-radius: 10px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.04),
0 24px 48px -12px rgba(0,0,0,0.6);
padding: 6px;
z-index: 80;
display: flex;
flex-direction: column;
gap: 2px;
animation: studio-dropdown-in 0.18s var(--st-easing);
}
@keyframes studio-dropdown-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.studio-dropdown-menu[hidden] { display: none; }
.studio-dropdown-item {
display: flex;
flex-direction: column;
gap: 1px;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: 5px;
color: var(--st-text);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.studio-dropdown-item:hover { background: var(--st-panel-hover); }
.studio-dropdown-item strong {
font-size: 12px;
font-weight: 600;
color: var(--st-text);
}
.studio-dropdown-item:hover strong { color: var(--st-gold); }
.studio-dropdown-item small {
font-size: 10.5px;
color: var(--st-text-mute);
font-weight: 400;
}
.studio-dropdown-divider {
height: 1px;
background: var(--st-line);
margin: 4px 8px;
}
.studio-dropdown-section {
padding: 8px 12px 4px;
margin: 0;
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.studio-pro-badge {
font-size: 8.5px;
letter-spacing: 0.18em;
padding: 1px 5px;
background: rgba(246, 183, 44, 0.18);
border: 1px solid var(--st-gold);
border-radius: 3px;
color: var(--st-gold);
}
/* ════════════════════════════════════════════════════
18. MODE PRO — révélation des modules techniques
════════════════════════════════════════════════════ */
/* Par défaut (mode débutant), les éléments .studio-pro-only sont cachés.
En mode pro (class .is-pro-mode sur root), ils réapparaissent. */
.solea-studio:not(.is-pro-mode) .studio-pro-only { display: none !important; }
/* Toggle Pro Mode dans la topbar */
.studio-promode-toggle {
position: relative;
overflow: hidden;
}
.studio-promode-toggle .studio-promode-label {
font-weight: 700;
letter-spacing: 0.06em;
font-size: 10.5px;
}
.solea-studio.is-pro-mode .studio-promode-toggle {
background: var(--st-gold);
color: var(--st-ink);
border-color: var(--st-gold);
}
.solea-studio.is-pro-mode .studio-promode-toggle::after {
content: '●';
position: absolute;
top: 4px; right: 4px;
font-size: 6px;
color: var(--st-ink);
line-height: 1;
}
/* Indicateur subtil au hover quand mode débutant : "active Pro Mode pour voir +" */
.solea-studio:not(.is-pro-mode) .studio-promode-toggle:hover::before {
content: '+ Modules techniques';
position: absolute;
bottom: -28px;
right: 0;
background: rgba(13, 13, 16, 0.95);
color: var(--st-gold);
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
pointer-events: none;
z-index: 200;
}
/* Banner info quand on active le mode pro (auto-hide) */
.studio-promode-banner {
position: fixed;
top: calc(var(--st-topbar-h) + 12px);
right: 22px;
z-index: 90;
padding: 12px 18px;
background: linear-gradient(135deg, var(--st-gold) 0%, #ffc94a 100%);
color: var(--st-ink);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(246, 183, 44, 0.4);
display: none;
animation: studio-promode-banner-in 0.3s var(--st-easing);
max-width: 320px;
line-height: 1.45;
}
.studio-promode-banner.is-visible { display: block; }
.studio-promode-banner small {
display: block;
margin-top: 4px;
font-weight: 400;
font-size: 10.5px;
opacity: 0.8;
}
@keyframes studio-promode-banner-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
/* ════════════════════════════════════════════════════
17. PLACEMENT MENUISERIES 3D — bouton + hint HUD
════════════════════════════════════════════════════ */
.studio-window-place-btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 6px;
padding: 5px 9px;
background: rgba(246, 183, 44, 0.12);
border: 1px solid var(--st-gold);
border-radius: 4px;
color: var(--st-gold);
font-family: inherit;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.studio-window-place-btn:hover {
background: var(--st-gold);
color: var(--st-ink);
}
/* Hint HUD pendant placement */
.studio-placement-hint {
position: fixed;
top: calc(var(--st-topbar-h) + 14px);
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: none;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: rgba(13, 13, 16, 0.95);
border: 1px solid var(--st-gold);
border-radius: 999px;
color: var(--st-text);
font-size: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
animation: studio-placement-in 0.25s var(--st-easing);
}
@keyframes studio-placement-in {
from { opacity: 0; transform: translate(-50%, -10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.studio-placement-icon {
font-size: 18px;
color: var(--st-gold);
line-height: 1;
}
.studio-placement-text { letter-spacing: 0.02em; }
.studio-placement-text kbd {
display: inline-block;
padding: 1px 6px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--st-gold);
margin: 0 2px;
}
/* Mobilier card : indicateur "ajouter au plan" */
.studio-mat-card[data-mat-cat="mobilier"]:hover::after {
content: '+ Plan 2D';
position: absolute;
bottom: 6px;
right: 8px;
font-size: 10px;
color: var(--st-gold);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.studio-mat-card[data-mat-cat="mobilier"] { position: relative; }
/* ════════════════════════════════════════════════════
15. PROJECT RECAP (modal contact)
════════════════════════════════════════════════════ */
.studio-project-recap {
padding: 16px 18px 18px;
background: var(--st-panel-2);
border: 1px solid var(--st-line);
border-radius: 12px;
margin-bottom: 18px;
}
.recap-eyebrow {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
margin: 0 0 12px;
}
.recap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
margin-bottom: 14px;
}
.recap-item {
display: flex;
flex-direction: column;
gap: 1px;
}
.recap-item.recap-full { grid-column: 1 / -1; }
.recap-l {
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--st-text-mute);
font-weight: 600;
}
.recap-v {
font-size: 12.5px;
color: var(--st-text);
font-weight: 500;
line-height: 1.3;
}
.recap-floors {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
background: var(--st-bg);
border-radius: 6px;
margin-bottom: 12px;
}
.recap-floor {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 11.5px;
}
.recap-floor-name { color: var(--st-text); font-weight: 600; }
.recap-floor-meta { color: var(--st-gold); }
.recap-budget {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(246, 183, 44, 0.15) 0%, rgba(246, 183, 44, 0.05) 100%);
border-left: 3px solid var(--st-gold);
border-radius: 6px;
}
.recap-budget-l {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--st-gold);
font-weight: 700;
}
.recap-budget-v {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 18px;
color: var(--st-text);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* V20.37.2 — Sous-lignes "Cloisonnement intérieur" / "Menuiseries intérieures"
dans le récap projet (rendues conditionnellement si user a tracé). */
.recap-budget-sub {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding: 6px 14px 6px 24px;
margin-top: -2px;
background: rgba(246, 183, 44, 0.04);
border-left: 3px solid rgba(246, 183, 44, 0.3);
font-size: 12px;
}
.recap-budget-sub-l {
color: var(--st-text-mute);
letter-spacing: 0.04em;
}
.recap-budget-sub-v {
color: var(--st-text);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ════════════════════════════════════════════════════════════════════
V20.37 L97/L99/L100/L114 — Menuiseries : UI dim custom + RAL + pose
════════════════════════════════════════════════════════════════════ */
/* L97 : Inputs dimensions custom dans les vignettes catalogue */
.studio-win-dim-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin-top: 8px;
}
.studio-win-dim-field {
display: flex;
flex-direction: column;
gap: 2px;
}
.studio-win-dim-field > span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(232, 230, 224, 0.55);
}
.studio-win-dim-field > input {
width: 100%;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
padding: 4px 6px;
color: var(--st-text);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.studio-win-dim-field > input:focus {
outline: none;
border-color: var(--st-gold, #f6b72c);
}
.studio-win-presets {
display: flex;
gap: 4px;
margin-top: 6px;
flex-wrap: wrap;
}
.studio-win-preset-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
padding: 3px 8px;
font-size: 10.5px;
color: var(--st-text);
cursor: pointer;
transition: background 0.15s;
}
.studio-win-preset-btn:hover {
background: rgba(246, 183, 44, 0.12);
border-color: rgba(246, 183, 44, 0.35);
}
/* L99 : Rangée RAL/finition dans les vignettes */
.studio-win-finish-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 8px;
align-items: end;
}
.studio-win-ral-btn {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
padding: 5px 8px;
color: var(--st-text);
font-size: 11px;
cursor: pointer;
}
.studio-win-ral-btn:hover {
border-color: var(--st-gold, #f6b72c);
}
.studio-win-ral-swatch {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.studio-win-finition-field {
display: flex;
flex-direction: column;
gap: 2px;
}
.studio-win-finition-field > span {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(232, 230, 224, 0.55);
}
.studio-win-finition-field > select {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
padding: 4px 6px;
color: var(--st-text);
font-size: 11px;
}
/* L100 : Fieldset mode de pose dans les vignettes */
.studio-win-pose-fs {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
padding: 6px 8px;
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 3px;
}
.studio-win-pose-fs > legend {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(232, 230, 224, 0.55);
padding: 0 4px;
}
.studio-win-pose-opt {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--st-text);
cursor: pointer;
}
.studio-win-pose-opt > input[type="radio"] {
margin: 0;
}
/* L114 : Panel droit "Menuiserie sélectionnée" */
.studio-window-panel {
padding: 12px;
background: var(--st-bg-2, rgba(15, 15, 18, 0.5));
border-left: 1px solid rgba(255, 255, 255, 0.08);
overflow-y: auto;
max-height: 100vh;
}
.studio-window-finish-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
align-items: end;
}
.studio-window-ral-swatch {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.25);
margin-right: 6px;
vertical-align: middle;
}
.studio-window-pose-fs {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.studio-window-pose-fs > legend {
padding: 0 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.studio-window-pose-opt {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--st-text);
cursor: pointer;
padding: 2px 0;
}
.studio-window-pose-opt > input[type="radio"] {
margin: 0;
}
.studio-window-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
/* ───────────────────────────────────────────────────────────────────────
V20.37 L163 (P0★) — Widget choix mode étude thermique
(dans sidebar droite, sous le bloc Budget, avant Pièces ajoutées)
─────────────────────────────────────────────────────────────────── */
.studio-thermique-mode {
margin: 14px 0 18px;
padding: 12px 14px;
background: rgba(201, 136, 27, 0.04);
border: 1px solid rgba(201, 136, 27, 0.18);
border-radius: 6px;
}
.studio-thermique-mode-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--st-gold, #c9881b);
margin: 0 0 10px;
}
.studio-thermique-mode-fs {
border: 0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.studio-thermique-mode-opt {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 4px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
background: rgba(255, 255, 255, 0.02);
}
.studio-thermique-mode-opt:hover {
border-color: rgba(201, 136, 27, 0.4);
background: rgba(201, 136, 27, 0.06);
}
.studio-thermique-mode-opt > input[type="radio"] {
margin: 2px 0 0;
accent-color: var(--st-gold, #c9881b);
flex-shrink: 0;
}
.studio-thermique-mode-opt:has(input:checked) {
border-color: var(--st-gold, #c9881b);
background: rgba(201, 136, 27, 0.08);
}
.studio-thermique-mode-opt-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.studio-thermique-mode-opt-body > strong {
font-size: 12px;
color: var(--st-text, #f4f0e8);
font-weight: 600;
}
.studio-thermique-mode-opt-body > small {
font-size: 10.5px;
color: rgba(244, 240, 232, 0.65);
line-height: 1.35;
}
.studio-thermique-mode-status {
margin: 10px 0 0;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
font-size: 10.5px;
color: rgba(244, 240, 232, 0.75);
text-align: center;
}
.studio-thermique-mode-status > strong {
color: var(--st-gold, #c9881b);
}
/* ==========================================================================
* V20.37.2 L151 — Acronyme sous-titré (vocabulaire BTP non-intimidant)
* --------------------------------------------------------------------------
* Les labels UI principaux (PCMI, DICT, Cerfa, HSP, Bbio, Cep, ITE, ITI, etc.)
* sont désormais écrits en clair (« Permis de construire », « Hauteur sous
* plafond », « Besoin énergétique »…) et l'acronyme historique apparaît en
* petit, en gris, à côté, pour les utilisateurs avertis qui le connaissent.
*
* Le décorateur d'acronymes (studio-acronymes-decorator.js) continue
* d'ajouter des tooltips au survol des acronymes restants (RGE, NF C 15-100,
* PLU, etc.) — son MutationObserver couvre aussi les span.acronym-hint.
* ========================================================================== */
/* V20.37.4 fix CSS scope leak : sélecteurs scopés au studio uniquement
(avant : .acronym-hint et small .acronym-hint globaux pouvaient affecter
d'autres pages WP qui afficheraient un span/small avec cette classe — typique
plugins admin ou contenus éditoriaux WP). */
.solea-studio .acronym-hint,
body.solea-studio-active .acronym-hint {
font-size: 0.85em;
color: #888;
margin-left: 4px;
font-weight: 400;
letter-spacing: 0.02em;
font-style: italic;
white-space: nowrap;
}
/* Variation visuelle pour les contextes très clairs (sous-titre déjà gris) :
* on garde la même couleur mais on assombrit légèrement pour préserver la
* hiérarchie. */
.solea-studio small .acronym-hint,
body.solea-studio-active small .acronym-hint {
color: rgba(244, 240, 232, 0.55);
}
/* Quand l'acronyme est dans un bouton actif (Pro mode dropdown), on garde
* lisible mais discret pour ne pas voler la vedette au label principal. */
.studio-dropdown-item .acronym-hint {
color: rgba(244, 240, 232, 0.50);
}
/* ==========================================================================
* V20.37.2 L153 — Menu Réglages (cog dropdown topbar)
* --------------------------------------------------------------------------
* Remplace l'ancien bouton Pro en facial. Le bouton ⚙ ouvre un panneau
* dropdown contenant : toggle Mode Pro + selects (Unités, Précision, Thème).
* Persistance localStorage via studio-settings-menu.js.
* ========================================================================== */
.studio-settings-host {
position: relative;
display: inline-flex;
}
.studio-settings-toggle {
/* Hérite des styles .studio-btn .studio-btn-ghost — pas d'override nécessaire. */
}
.studio-settings-host.is-open .studio-settings-toggle {
background: rgba(201, 136, 27, 0.10);
border-color: var(--st-gold, #c9881b);
color: var(--st-gold, #c9881b);
}
.studio-settings-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 280px;
max-width: 320px;
background: var(--st-panel, #15151a);
border: 1px solid rgba(168, 120, 68, 0.30);
border-radius: 6px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
padding: 10px 0;
z-index: 50;
font-family: 'Montserrat', sans-serif;
color: var(--st-text-soft, rgba(244, 240, 232, 0.88));
}
.studio-settings-section {
margin: 6px 14px 4px;
padding: 0;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(244, 240, 232, 0.45);
font-weight: 700;
}
.studio-settings-toggle-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
transition: background 0.12s ease;
}
.studio-settings-toggle-row:hover {
background: rgba(201, 136, 27, 0.06);
}
.studio-settings-toggle-row input[type="checkbox"] {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 1px;
accent-color: var(--st-gold, #c9881b);
cursor: pointer;
}
.studio-settings-toggle-label {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.studio-settings-toggle-label > strong {
font-size: 12px;
color: var(--st-text, #f4f0e8);
font-weight: 600;
line-height: 1.25;
}
.studio-settings-toggle-label > small {
font-size: 10.5px;
color: rgba(244, 240, 232, 0.55);
line-height: 1.35;
}
.studio-settings-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 6px 0;
}
.studio-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 14px;
cursor: pointer;
}
.studio-settings-row-label {
font-size: 11.5px;
color: var(--st-text-soft, rgba(244, 240, 232, 0.82));
flex-shrink: 0;
}
.studio-settings-row select {
flex: 1 1 50%;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
color: var(--st-text, #f4f0e8);
font-family: 'Montserrat', sans-serif;
font-size: 11.5px;
padding: 5px 7px;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.studio-settings-row select:hover,
.studio-settings-row select:focus-visible {
border-color: var(--st-gold, #c9881b);
background: rgba(201, 136, 27, 0.04);
outline: none;
}
/* V20.37.2 L153 : thème clair — variante optionnelle */
body.solea-theme-light {
--st-panel: #ffffff;
--st-text: #1a1a1a;
--st-text-soft: rgba(26, 26, 26, 0.78);
--st-text-mute: rgba(26, 26, 26, 0.45);
--st-bg: #f4f0e8;
}
body.solea-theme-light .solea-studio {
background: #f4f0e8;
color: #1a1a1a;
}
body.solea-theme-light .studio-settings-menu {
background: #ffffff;
border-color: rgba(168, 120, 68, 0.30);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
color: #1a1a1a;
}
body.solea-theme-light .studio-settings-toggle-label > strong { color: #1a1a1a; }
body.solea-theme-light .studio-settings-toggle-label > small { color: rgba(26, 26, 26, 0.55); }
body.solea-theme-light .studio-settings-row-label { color: rgba(26, 26, 26, 0.78); }
body.solea-theme-light .studio-settings-row select {
background: #f8f4ec;
color: #1a1a1a;
border-color: rgba(26, 26, 26, 0.15);
}
/* ==========================================================================
* V20.37.2 L154 — Accordéons panel Cuisine / SDB / Buanderie
* --------------------------------------------------------------------------
* Remplace les anciens sub-tabs Cuisine | SDB (qui doublaient les tabs
* principales). Mêmes styles que .studio-roof-acc pour cohérence visuelle.
* Le