/* ============================================================
Simulateur Solaire — La Boutique Solaire
simulateur.css v2.2 — footer en 2 lignes : actions en haut, étapes en bas
============================================================ */
:root {
--lbs-y: #FFD221;
--lbs-y-d: #FFD221;
--lbs-y-l: #FFFAE6;
--lbs-b: rgb(19, 106, 205);
--lbs-b-l: rgb(242, 248, 255);
--lbs-b-d: rgb(19, 106, 205);
--lbs-b-s: #fff7d6;
--lbs-text: #1A1A1A;
--lbs-muted: #6B6B6B;
--lbs-border: #E8E8E8;
--lbs-bg: #FAFAFA;
--lbs-x-shadow: 0 8px 24px rgba(20, 20, 20, 0.05);
}
* { box-sizing: border-box; }
html, body.lbs-standalone-body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.lbs-simulateur-page {
background: #fff;
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Conteneur réel des sections (header / body / footer) injectées par le JS.
On prolonge la chaîne flex pour qu'il remplisse toute la hauteur de la
page, afin que seul le corps scrolle (header & footer restent fixes). */
#lbs-simulateur-app {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.lbs-sim-logo {
position: absolute;
left: 2rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
text-decoration: none;
transition: opacity .15s;
}
.lbs-sim-logo:hover { opacity: 0.75; }
.lbs-sim-logo img {
height: auto;
display: block;
}
.lbs-sim-logo-text {
font-size: 13px;
font-weight: 800;
color: var(--lbs-text);
letter-spacing: -.01em;
}
.lbs-loader {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
color: var(--lbs-muted);
font-size: 0.95rem;
min-height: 400px;
}
.lbs-loader-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--lbs-border);
border-top-color: var(--lbs-y);
border-radius: 50%;
animation: lbs-spin 0.8s linear infinite;
}
@keyframes lbs-spin { to { transform: rotate(360deg); } }
.lbs-sim-header {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 1.1rem 2rem;
border-bottom: 1px solid var(--lbs-border);
background: #fff;
}
.lbs-sim-badge {
/* h1 SEO : rendu visuel identique à l'ancien span (reset marges/display). */
margin: 0;
display: inline-block;
background: var(--lbs-bg);
border: 1px solid var(--lbs-border);
border-radius: 8px;
padding: 7px 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
color: var(--lbs-text);
text-transform: uppercase;
}
.lbs-sim-help {
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--lbs-border);
border-radius: 8px;
padding: 7px 16px;
font-size: 13px;
font-weight: 600;
color: var(--lbs-text);
background: #fff;
cursor: pointer;
transition: all .15s;
}
.lbs-sim-help {
display: none;
}
.lbs-sim-help:hover { border-color: var(--lbs-b); color: var(--lbs-b); }
.lbs-sim-help i { font-size: 15px; }
.lbs-sim-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 1.5rem;
background-color: #f2f2f2;
}
.lbs-sim-body > * { max-width: 100%; }
.lbs-screen {
display: none;
width: 100%;
max-width: 560px;
text-align: center;
animation: lbs-fadeup .35s ease;
}
.lbs-screen.active { display: block; margin: auto 0; }
@keyframes lbs-fadeup {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.lbs-step-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--lbs-b);
margin-bottom: 1rem;
}
.lbs-screen-title {
font-size: 2.1rem;
font-weight: 500;
color: var(--lbs-text);
/* h2 SEO : reset de la marge haute par défaut du navigateur (rendu inchangé). */
margin: 0 0 1rem;
line-height: 1.25;
}
.lbs-screen-sub {
font-size: 1rem;
color: var(--lbs-muted);
line-height: 1.55;
margin-bottom: 2.25rem;
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
.lbs-input-center {
width: 100%;
max-width: 320px;
margin: 0 auto 1.25rem;
}
.lbs-input-center input {
width: 100%;
text-align: center;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: .04em;
padding: 16px 20px;
border: 1.5px solid var(--lbs-border);
border-radius: 10px;
color: var(--lbs-text);
background: #fff;
transition: border-color .15s, box-shadow .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-input-center input:focus {
outline: none;
border-color: var(--lbs-b);
box-shadow: 0 0 0 3px rgba(19,106,205,0.12);
}
.lbs-input-center input::placeholder { color: #C8C8C8; font-weight: 400; }
.lbs-info-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--lbs-b-l);
border: 1px solid rgba(19,106,205,0.18);
border-radius: 10px;
padding: 11px 20px;
font-size: 14px;
color: var(--lbs-b-d);
animation: lbs-fadeup .3s ease;
}
.lbs-info-pill strong { font-weight: 700; color: var(--lbs-b-d); }
.lbs-info-pill i { color: var(--lbs-y-d); font-size: 20px; }
.lbs-info-pill.lbs-hidden { display: none; }
/* ── Cards radio (étape Réseau, et toute étape à choix binaire/multiple) ── */
.lbs-radio-group {
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
}
.lbs-radio-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border: 1.5px solid var(--lbs-border);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color .15s, background-color .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-radio-card:hover { border-color: #C8C8C8; }
.lbs-radio-card.selected {
border-color: var(--lbs-y-d);
background: var(--lbs-b-s);
}
.lbs-radio-card-title {
font-size: 15px;
font-weight: 700;
color: var(--lbs-text);
margin-bottom: 3px;
}
.lbs-radio-card-sub {
font-size: 13px;
color: var(--lbs-muted);
}
.lbs-radio-dot {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: #fff;
position: relative;
transition: border-color .15s;
}
.lbs-radio-dot.checked {
border-color: var(--lbs-y-d);
border-width: 2px;
}
.lbs-radio-dot.checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--lbs-y-d);
transform: translate(-50%, -50%);
}
/* ── Footer fixe : 2 lignes — actions en haut, étapes en bas ─────────── */
.lbs-sim-footer {
flex-shrink: 0;
border-top: 1px solid var(--lbs-border);
padding: 1.1rem 2rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
background: #fff;
}
.lbs-footer-row-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--lbs-border);
}
.lbs-footer-row-bottom {
display: flex;
justify-content: flex-start;
margin-top: 0.25rem;
}
.lbs-btn-suivant {
background: var(--lbs-y);
color: var(--lbs-text);
border: none;
border-radius: 9px;
padding: 12px 26px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .15s, opacity .15s, box-shadow .15s;
flex-shrink: 0;
margin-left: auto;
box-shadow: 0 4px 14px rgba(255, 210, 33, 0.45);
}
.lbs-btn-suivant:hover {
background: var(--lbs-y-d);
box-shadow: 0 4px 16px rgba(255, 210, 33, 0.55);
}
.lbs-btn-suivant:disabled {
opacity: .35;
cursor: not-allowed;
box-shadow: none;
}
.lbs-btn-retour {
background: transparent;
color: var(--lbs-muted);
border: 1.5px solid var(--lbs-border);
border-radius: 9px;
padding: 11px 22px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all .15s;
flex-shrink: 0;
}
.lbs-btn-retour:hover { border-color: var(--lbs-muted); color: var(--lbs-text); }
.lbs-btn-retour.lbs-invisible { visibility: hidden; display: none }
.lbs-steps-bar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.lbs-steps-bar::-webkit-scrollbar { display: none; }
.lbs-step-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0px 15px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #B5B5B5;
background: var(--lbs-bg);
border: 1px solid transparent;
transition: all .2s;
white-space: nowrap;
cursor: default;
flex-shrink: 0;
}
.lbs-step-chip .lbs-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #E2E2E2;
color: #fff;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.lbs-step-chip.active {
background: var(--lbs-y);
color: var(--lbs-text);
}
.lbs-step-chip.active .lbs-step-num {
background: var(--lbs-text);
color: var(--lbs-y);
}
.lbs-step-chip.done {
width: 38px;
padding: 0;
justify-content: center;
background: var(--lbs-y-l);
border-color: transparent;
}
.lbs-step-chip.done .lbs-step-num {
background: var(--lbs-text);
color: #fff;
}
.lbs-step-chip .lbs-step-name { display: none; }
.lbs-step-chip.active .lbs-step-name { display: inline; }
@media (max-width: 720px) {
.lbs-sim-header { padding: 1.1rem 1rem; min-height: 64px; }
.lbs-sim-logo { left: 1rem; }
.lbs-sim-logo img { height: 45px; width: auto; }
.lbs-sim-badge { font-size: 11px; padding: 6px 14px; }
.lbs-sim-help { right: 1rem; padding: 6px 12px; font-size: 12px; }
.lbs-sim-help span { display: none; }
.lbs-sim-body { padding: 2rem 1.25rem; }
.lbs-screen-title { font-size: 1.5rem; }
.lbs-screen-sub { font-size: 0.9rem; }
.lbs-sim-footer { padding: 1rem 1.25rem; }
.lbs-step-chip .lbs-step-name { display: none !important; }
}
/* ============================================================
Ajouts v2.3 — Étape 03 (Méthode) + Étape 04 (Consommation / Équipements)
============================================================ */
.lbs-screen[id="lbs-screen-consommation"],
.lbs-screen[id="lbs-screen-equipements"],
.lbs-screen[id="lbs-screen-fixations"] {
max-width: 960px;
}
/* L'étape équipements : titre pleine largeur (centré) + grille 2 colonnes. */
.lbs-screen[id="lbs-screen-equipements"] {
max-width: 80%;
}
.lbs-conso-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px;
text-align: left;
align-items: center;
justify-content: center;
}
.lbs-conso-card {
border: 1.5px solid var(--lbs-border);
border-radius: 12px;
padding: 20px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
}
.lbs-conso-card-wide { grid-column: 1 / -1; }
.lbs-conso-card-title {
font-size: 14px;
font-weight: 700;
color: var(--lbs-text);
margin-bottom: 4px;
line-height: 1.4;
}
.lbs-conso-card-sub {
font-size: 12px;
color: var(--lbs-muted);
margin-bottom: 14px;
}
.lbs-persons-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.lbs-person-btn {
width: 108px;
height: 108px;
aspect-ratio: 1;
border: 1.5px solid var(--lbs-border);
border-radius: 10px;
background: #fff;
color: #C8C8C8;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
}
.lbs-person-btn:hover { border-color: #C8C8C8; color: var(--lbs-muted); }
.lbs-person-btn.active {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
color: var(--lbs-text);
}
.lbs-kwh-input-wrap {
position: relative;
}
.lbs-kwh-input-wrap input {
width: 100%;
padding: 14px 70px 14px 16px;
border: 1.5px solid var(--lbs-border);
border-radius: 10px;
font-size: 1.3rem;
font-weight: 500;
color: var(--lbs-text);
background: #fff;
transition: border-color .15s, box-shadow .15s;
}
.lbs-kwh-input-wrap input:focus {
outline: none;
border-color: var(--lbs-b);
box-shadow: 0 0 0 3px rgba(19,106,205,0.12);
}
.lbs-kwh-input-wrap input::placeholder { color: #C8C8C8; }
.lbs-kwh-unit {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
font-weight: 600;
color: var(--lbs-muted);
pointer-events: none;
}
.lbs-pills-row {
display: flex;
gap: 10px;
margin-top: 14px;
flex-wrap: wrap;
}
.lbs-pill-btn {
padding: 10px 20px;
border: 1.5px solid var(--lbs-border);
border-radius: 9px;
background: #fff;
color: var(--lbs-text);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all .15s;
}
.lbs-pill-btn:hover { border-color: #C8C8C8; }
.lbs-pill-btn.active {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
font-weight: 700;
}
/* ============================================================
Étape Équipements — catalogue (gauche) + panneau sélection (droite)
============================================================ */
/* Boutons quantité génériques (réutilisés : carte détail + panier) */
.lbs-qty-btn {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1.5px solid var(--lbs-border);
background: var(--lbs-bg);
color: var(--lbs-text);
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
flex-shrink: 0;
}
.lbs-qty-btn:hover { border-color: var(--lbs-y-d); background: var(--lbs-y-l); }
.lbs-qty-val {
font-size: 14px;
font-weight: 700;
color: var(--lbs-text);
min-width: 20px;
text-align: center;
}
/* Boîte « − valeur + » */
.lbs-qty-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #fff;
border: 1.5px solid var(--lbs-border);
border-radius: 10px;
padding: 7px 10px;
}
/* Titre pleine largeur (centré), puis grille catalogue | sélection */
.lbs-eq2-layout { display: block; }
.lbs-eq2-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: start;
text-align: left;
}
/* Dès qu'au moins un équipement est sélectionné, la colonne de droite
« Votre sélection » apparaît. */
.lbs-eq2-grid.has-sel { grid-template-columns: 1fr 360px; }
.lbs-eq2-main { min-width: 0; max-width: 95%; }
.lbs-eq2-head { text-align: center; margin-bottom: 26px; }
.lbs-eq2-title {
position: relative;
display: inline-block;
font-size: 2rem;
font-weight: 600;
color: var(--lbs-text);
line-height: 1.2;
margin: 8px 0 0;
padding-bottom: 16px;
}
.lbs-eq2-title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 54px;
height: 4px;
border-radius: 3px;
background: var(--lbs-y);
}
.lbs-eq2-sub {
font-size: .98rem;
color: var(--lbs-muted);
line-height: 1.55;
max-width: 520px;
margin: 16px auto 0;
}
.lbs-eq2-section { margin-bottom: 26px; }
.lbs-eq2-section-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--lbs-b);
margin-bottom: 12px;
}
.lbs-eq2-section-label i { color: #B9C7D8; font-size: 14px; }
/* ── Carrousel « les plus courants » ─────────────────────────── */
.lbs-eq2-common-wrap { display: flex; align-items: center; gap: 10px; }
.lbs-eq2-common {
display: flex;
gap: 14px;
overflow-x: auto;
flex: 1;
padding: 4px;
scroll-behavior: smooth;
scrollbar-width: none;
}
.lbs-eq2-common::-webkit-scrollbar { display: none; }
.lbs-eq2-tile {
position: relative;
flex: 0 0 auto;
width: 178px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 22px 14px 16px;
border: 1.5px solid var(--lbs-border);
border-radius: 16px;
background: #fff;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-eq2-tile:hover { border-color: #C8C8C8; }
.lbs-eq2-tile.active {
border-color: var(--lbs-b);
box-shadow: 0 0 0 3px rgba(19, 106, 205, .12);
}
.lbs-eq2-tile-img {
width: 100%;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.lbs-eq2-tile-img img { height: 150%; object-fit: contain; }
.lbs-eq2-tile-name { font-size: 14px; font-weight: 700; color: var(--lbs-text); text-align: center; }
.lbs-eq2-tile-check {
position: absolute;
top: 10px;
right: 10px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--lbs-b);
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-size: 12px;
}
.lbs-eq2-tile.active .lbs-eq2-tile-check { display: inline-flex; }
.lbs-eq2-common-arrow {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: #fff;
color: var(--lbs-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--lbs-x-shadow);
transition: all .15s;
}
.lbs-eq2-common-arrow:hover { border-color: #C8C8C8; }
/* ── Carte détail (équipement mis en avant) ──────────────────── */
.lbs-eq2-featured { margin-bottom: 26px; }
.lbs-eq2-featured-card {
position: relative;
display: grid;
grid-template-columns: 230px 1fr 220px;
align-items: center;
padding: 0 20px 0 0;
border: 1.5px solid rgba(19, 106, 205, .35);
border-radius: 20px;
background: linear-gradient(180deg, #F4F9FF 0%, #EDF4FF 100%);
overflow: hidden;
}
.lbs-eq2-featured-check {
position: absolute;
top: 16px;
right: 16px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
border: 1.5px solid rgba(19, 106, 205, .4);
color: var(--lbs-b);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.lbs-eq2-featured-check.on { background: var(--lbs-b); border-color: var(--lbs-b); color: #fff; }
.lbs-eq2-featured-img { height: 200px; display: flex; align-items: center; justify-content: center; }
.lbs-eq2-featured-img img { width: 100%; height: 100%; max-width: 220px; object-fit: contain; }
.lbs-eq2-featured-name { font-size: 1.75rem; font-weight: 600; color: var(--lbs-text); margin-bottom: 8px; }
.lbs-eq2-featured-kwh {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 15px;
font-weight: 700;
color: var(--lbs-b);
margin-bottom: 12px;
}
.lbs-eq2-featured-kwh i { font-size: 16px; }
.lbs-eq2-featured-desc {
font-size: 13.5px;
color: #5A6B7B;
line-height: 1.5;
margin-bottom: 10px;
max-width: 380px;
}
.lbs-eq2-featured-link {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: var(--lbs-b);
display: inline-flex;
align-items: center;
gap: 5px;
}
.lbs-eq2-featured-link i { font-size: 14px; }
.lbs-eq2-featured-action { display: flex; flex-direction: column; gap: 12px; }
.lbs-eq2-featured-qtylabel {
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--lbs-muted);
text-align: center;
}
.lbs-eq2-featured-action .lbs-qty-btn { width: 34px; height: 34px; font-size: 18px; }
.lbs-eq2-featured-action .lbs-qty-val { font-size: 16px; min-width: 28px; }
.lbs-eq2-featured-add {
background: var(--lbs-y);
color: var(--lbs-text);
border: none;
border-radius: 10px;
padding: 13px 18px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(255, 210, 33, .45);
transition: box-shadow .15s;
}
.lbs-eq2-featured-add:hover { box-shadow: 0 4px 16px rgba(255, 210, 33, .55); }
/* Action « Masquer les détails » — positionnée en bas de la carte détail */
.lbs-eq2-featured-collapse {
grid-column: 1 / -1;
width: 100%;
border-top: 1px solid rgba(19, 106, 205, .16);
margin-top: 4px;
padding: 16px 0 18px;
display: flex;
align-items: center;
justify-content: center;
}
.lbs-eq2-featured-toggle {
border: none;
background: transparent;
color: var(--lbs-b);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
line-height: 1;
padding: 4px 8px;
transition: opacity .15s, transform .15s;
}
.lbs-eq2-featured-toggle:hover {
opacity: .78;
transform: translateY(-1px);
}
.lbs-eq2-featured-toggle i { font-size: 14px; }
/* Barre affichée à la place de la carte quand le détail est masqué */
.lbs-eq2-featured-show {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
border: 1.5px dashed rgba(19, 106, 205, .35);
border-radius: 16px;
background: var(--lbs-b-l);
color: var(--lbs-b);
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: background-color .15s;
}
.lbs-eq2-featured-show:hover { background: #E4EFFF; }
/* ── Grille « autres équipements » ───────────────────────────── */
.lbs-eq2-others {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.lbs-eq2-other {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1.5px solid var(--lbs-border);
border-radius: 14px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
cursor: pointer;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* Hover : toute la bordure prend la couleur (jaune) */
.lbs-eq2-other:hover { border-color: var(--lbs-y-d); }
/* État sélectionné (toggle) : fond jaune clair + bordure jaune */
.lbs-eq2-other.on {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
}
/* Indicateur en haut à droite : anneau vide -> coche jaune quand sélectionné.
La quantité se gère uniquement dans le panneau « Votre sélection ». */
.lbs-eq2-other-action {
flex: 0 0 auto;
align-self: flex-start;
display: flex;
align-items: center;
justify-content: flex-end;
}
.lbs-eq2-other-check {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: #fff;
color: var(--lbs-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background-color .15s, border-color .15s;
}
.lbs-eq2-other-check i { opacity: 0; transition: opacity .15s; }
.lbs-eq2-other.on .lbs-eq2-other-check { background: var(--lbs-y); border-color: var(--lbs-y-d); }
.lbs-eq2-other.on .lbs-eq2-other-check i { opacity: 1; }
.lbs-eq2-other-img { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.lbs-eq2-other-img img { height: 70px; object-fit: contain; }
.lbs-eq2-other-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lbs-eq2-other-name { font-size: 14px; font-weight: 700; color: var(--lbs-text); line-height: 1.25; }
.lbs-eq2-other-kwh { font-size: 12px; color: var(--lbs-muted); }
/* ── Panneau « Votre sélection » (colonne de droite, sticky) ── */
/* Masqué tant qu'aucun équipement n'est sélectionné ; apparaît ensuite. */
.lbs-eq2-aside { position: sticky; top: 0; display: none; }
.lbs-eq2-grid.has-sel .lbs-eq2-aside {
display: block;
animation: lbs-eq2-aside-in .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes lbs-eq2-aside-in {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
.lbs-eq2-panel {
padding: 22px;
border: 1.5px solid var(--lbs-border);
border-radius: 18px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
}
.lbs-eq2-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
/* Panneau étroit : liste puis total empilés */
.lbs-eq2-panel-grid { display: block; }
.lbs-eq2-panel-left { min-width: 0; }
.lbs-eq2-panel-title {
font-size: 12px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--lbs-b);
}
.lbs-eq2-badge {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--lbs-b);
color: #fff;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lbs-eq2-cart { display: flex; flex-direction: column; gap: 14px; }
.lbs-eq2-cart-empty { font-size: 13.5px; color: var(--lbs-muted); padding: 6px 0 2px; }
.lbs-eq2-cart-row { display: flex; align-items: center; gap: 10px; }
.lbs-eq2-cart-img {
flex: 0 0 auto;
width: 50px;
height: 50px;
border-radius: 10px;
background: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.lbs-eq2-cart-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.lbs-eq2-cart-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lbs-eq2-cart-name { font-size: 13.5px; font-weight: 700; color: var(--lbs-text); }
.lbs-eq2-cart-kwh { font-size: 11.5px; color: var(--lbs-muted); }
.lbs-qty-row--sm { background: transparent; border: none; padding: 0; gap: 6px; }
.lbs-qty-row--sm .lbs-qty-btn { width: 26px; height: 26px; font-size: 14px; border-radius: 7px; }
.lbs-qty-row--sm .lbs-qty-val { min-width: 16px; font-size: 13px; }
.lbs-eq2-cart-remove {
flex: 0 0 auto;
width: 26px;
height: 26px;
border: none;
background: transparent;
color: #B0B0B0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
border-radius: 6px;
transition: all .15s;
}
.lbs-eq2-cart-remove:hover { background: #F4F4F4; color: #D9534F; }
.lbs-eq2-add-more {
width: 100%;
margin: 16px 0 0;
padding: 12px;
border: 1px solid rgba(19, 106, 205, .25);
border-radius: 10px;
background: var(--lbs-b-l);
color: var(--lbs-b);
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background-color .15s;
}
.lbs-eq2-add-more:hover { background: #E4EFFF; }
/* ── Équipement personnalisé (formulaire repliable) ─────────────────────── */
.lbs-eq2-custom { margin-top: 10px; border: 1px dashed var(--lbs-border); border-radius: 10px; background: #fff; overflow: hidden; }
.lbs-eq2-custom.is-open { border-style: solid; border-color: rgba(19, 106, 205, .30); }
.lbs-eq2-custom-head {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 11px 13px; border: none; background: transparent; cursor: pointer;
font-size: 13.5px; font-weight: 700; color: var(--lbs-b);
}
.lbs-eq2-custom-head:hover { background: var(--lbs-b-l); }
.lbs-eq2-custom-head > span { display: inline-flex; align-items: center; gap: 8px; }
.lbs-eq2-custom-body { padding: 13px 13px 13px; display: flex; flex-direction: column; gap: 10px; }
.lbs-eq2-custom-name {
width: 100%; box-sizing: border-box; border: 1.5px solid var(--lbs-border); border-radius: 9px;
padding: 9px 11px; font-size: 13.5px; outline: none; font-family: inherit;
}
.lbs-eq2-custom-name:focus { border-color: var(--lbs-b); box-shadow: 0 0 0 3px rgba(19,106,205,.14); }
.lbs-eq2-custom-line { display: flex; gap: 10px; }
.lbs-eq2-custom-field { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--lbs-muted); }
.lbs-eq2-custom-field input {
width: 100%; box-sizing: border-box; border: 1.5px solid var(--lbs-border); border-radius: 9px;
padding: 9px 11px; font-size: 13.5px; outline: none; font-family: inherit; color: var(--lbs-text);
}
.lbs-eq2-custom-field input:focus { border-color: var(--lbs-b); box-shadow: 0 0 0 3px rgba(19,106,205,.14); }
.lbs-eq2-custom-add {
width: 100%; border: none; background: var(--lbs-b); color: #fff; border-radius: 10px;
padding: 11px 14px; font-size: 13.5px; font-weight: 800; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.lbs-eq2-custom-add:hover { background: var(--lbs-b-d); }
.lbs-eq2-total-block {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--lbs-border);
}
.lbs-eq2-total-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--lbs-b);
margin-bottom: 8px;
}
.lbs-eq2-total-label i { color: #B9C7D8; font-size: 13px; }
.lbs-eq2-total-val { font-size: 1.7rem; font-weight: 800; color: var(--lbs-b); line-height: 1.1; margin-bottom: 10px; }
.lbs-eq2-total-note {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 12.5px;
color: #3B9E54;
line-height: 1.45;
}
.lbs-eq2-total-note i { color: #3B9E54; font-size: 14px; margin-top: 1px; }
/* Sous 1160px : la sélection passe sous le catalogue (pleine largeur) */
@media (max-width: 1160px) {
.lbs-eq2-grid,
.lbs-eq2-grid.has-sel { grid-template-columns: 1fr; }
.lbs-eq2-aside { position: static; margin-top: 8px; }
}
@media (max-width: 860px) {
.lbs-eq2-others { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.lbs-conso-grid { grid-template-columns: 1fr; }
.lbs-persons-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.lbs-eq2-featured-card { grid-template-columns: 1fr; text-align: center; padding: 22px 0 0; }
.lbs-eq2-featured-desc { max-width: none; margin-left: auto; margin-right: auto; }
.lbs-eq2-featured-img { height: 150px; }
.lbs-eq2-featured-info,
.lbs-eq2-featured-action { padding-left: 22px; padding-right: 22px; }
.lbs-eq2-featured-collapse { margin-top: 18px; }
}
@media (max-width: 540px) {
.lbs-eq2-others { grid-template-columns: 1fr; }
}
/* ============================================================
Ajout — Icônes maison cliquables (étape Consommation)
============================================================ */
.lbs-person-icon {
width: 108px;
height: 80px;
display: block;
pointer-events: none;
/* Masquée au départ : révélée une par une (cf. revealPersonIcons)
pour masquer le délai de chargement des SVG au premier affichage. */
opacity: 0;
transform: scale(.88);
transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.lbs-person-icon.lbs-loaded {
opacity: 1;
transform: scale(1);
}
/* Léger zoom au survol du bouton (petite animation) */
.lbs-person-btn:hover .lbs-person-icon.lbs-loaded {
transform: scale(1.08);
}
.lbs-person-btn.active {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
}
/* ============================================================
Étape Fixations — grille de cards illustrées (choix unique)
============================================================ */
.lbs-fixation-grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
margin: 32px 0px;
}
.lbs-fixation-card {
width: 190px;
display: flex;
flex-direction: column;
padding: 16px 16px 18px;
border: 1.5px solid var(--lbs-border);
border-radius: 14px;
background: #fff;
cursor: pointer;
text-align: center;
transition: border-color .15s, background-color .15s, box-shadow .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-fixation-card:hover { border-color: #C8C8C8; }
.lbs-fixation-card.selected {
border-color: var(--lbs-y-d);
border-width: 2px;
background: var(--lbs-b-s);
}
/* Zone illustration (placeholder gris par défaut, accueille un SVG via `img`) */
.lbs-fixation-media {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 10px;
margin-bottom: 14px;
overflow: hidden;
}
.lbs-fixation-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
}
/* Badge coche — masqué par défaut, visible quand la card est sélectionnée */
.lbs-fixation-check {
position: absolute;
top: 0px;
right: 0px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--lbs-text);
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-size: 13px;
}
.lbs-fixation-card.selected .lbs-fixation-check { display: inline-flex; }
.lbs-fixation-label {
font-size: 15px;
font-weight: 700;
color: var(--lbs-text);
margin-bottom: 4px;
}
.lbs-fixation-sub {
font-size: 13px;
color: var(--lbs-muted);
}
/* ── Écran « Support de toiture » ─────────────────────────────────────────────
Il réutilise les cartes .lbs-fixation-*, mais ses SVG (matériaux de toiture)
sont dessinés bord à bord dans leur viewBox : ils remplissent donc toute la
case et paraissent trop gros. On les recentre et on les réduit pour leur
laisser de la marge dans la case cliquable. Ciblé sur #lbs-support-grid pour
ne pas toucher l'écran Fixations. */
#lbs-support-grid .lbs-fixation-media {
display: flex;
align-items: center;
justify-content: center;
}
#lbs-support-grid .lbs-fixation-img {
width: 66%;
height: 66%;
}
@media (max-width: 760px) {
.lbs-fixation-grid { gap: 10px; margin: 18px 0; }
.lbs-fixation-card { width: calc(50% - 5px); padding: 11px 11px 12px; border-radius: 12px; }
/* L'illustration passe d'un carré pleine largeur (~150px de haut) à une
bande fixe et plus basse : les cartes deviennent nettement moins hautes
et moins imposantes sur téléphone. */
.lbs-fixation-media { aspect-ratio: auto; height: 90px; margin-bottom: 8px; }
.lbs-fixation-label { font-size: 13.5px; margin-bottom: 2px; }
.lbs-fixation-sub { font-size: 11.5px; line-height: 1.3; }
.lbs-fixation-check { width: 22px; height: 22px; font-size: 12px; }
}
@media (max-width: 420px) {
.lbs-fixation-grid { gap: 9px; }
.lbs-fixation-card { width: calc(50% - 5px); padding: 10px 10px 11px; }
.lbs-fixation-media { height: 78px; margin-bottom: 6px; }
.lbs-fixation-label { font-size: 13px; }
.lbs-fixation-sub { font-size: 11px; }
}
/* ============================================================
Étape Support de toiture
Les cartes réutilisent à l'identique le style des Fixations
(.lbs-fixation-*) : illustration en haut + coche à la sélection.
On aligne juste la largeur de l'écran sur celle des Fixations.
============================================================ */
.lbs-screen[id="lbs-screen-support"] { max-width: 960px; }
.lbs-screen[id="lbs-screen-orientation"]{ max-width: 880px; }
.lbs-screen[id="lbs-screen-surface"] { max-width: 880px; }
.lbs-screen[id="lbs-screen-resultats"] { max-width: 960px; }
.lbs-screen[id="lbs-screen-resultats"] .lbs-screen-sub { max-width: 620px; }
/* ============================================================
Étape Orientation & inclinaison — boussole interactive + jauge
============================================================ */
.lbs-orient-layout {
display: flex;
flex-wrap: wrap;
gap: 32px;
align-items: flex-start;
justify-content: center;
margin-bottom: 22px;
}
.lbs-orient-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.lbs-orient-block-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--lbs-muted);
}
/* ── Boussole ─────────────────────────────────────────────── */
.lbs-compass {
position: relative;
flex-shrink: 0;
}
.lbs-compass-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: radial-gradient(circle at 50% 45%, #ffffff 0%, #ffffff 60%, #FAFAFA 100%);
box-shadow: var(--lbs-x-shadow), inset 0 0 0 8px rgba(0,0,0,0.012);
}
/* Lettres cardinales discrètes en bordure intérieure */
.lbs-compass-cardinal {
position: absolute;
font-size: 11px;
font-weight: 700;
color: #C4C4C4;
transform: translate(-50%, -50%);
z-index: 1;
}
.lbs-compass-cardinal-n { left: 50%; top: 16px; }
.lbs-compass-cardinal-s { left: 50%; top: calc(100% - 16px); }
.lbs-compass-cardinal-e { left: calc(100% - 16px); top: 50%; }
.lbs-compass-cardinal-o { left: 16px; top: 50%; }
.lbs-compass-needle {
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 104px;
transform-origin: 50% 100%;
transform: translate(-50%, -100%) rotate(0deg);
transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .2s;
opacity: 0;
z-index: 2;
}
.lbs-compass-needle::before {
content: '';
position: absolute;
inset: 0;
border-radius: 6px;
background: linear-gradient(
var(--lbs-b) 0%,
var(--lbs-b) 50%,
#DADADA 50%,
#DADADA 100%
);
}
.lbs-compass-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 92px;
height: 92px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--lbs-border);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
z-index: 3;
}
.lbs-compass-center-val {
font-size: 26px;
font-weight: 800;
color: var(--lbs-text);
letter-spacing: -.01em;
}
.lbs-compass-btn {
position: absolute;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: #fff;
color: var(--lbs-muted);
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
box-shadow: var(--lbs-x-shadow);
z-index: 4;
}
.lbs-compass-btn:hover { border-color: #C8C8C8; color: var(--lbs-text); }
.lbs-compass-btn--best {
border-color: var(--lbs-y-d);
box-shadow: 0 0 0 3px var(--lbs-y-l);
}
.lbs-compass-btn.active {
background: var(--lbs-y);
border-color: var(--lbs-y-d);
color: var(--lbs-text);
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(255, 210, 33, 0.5);
}
/* ── Inclinaison ──────────────────────────────────────────── */
.lbs-incl-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
max-width: 340px;
}
.lbs-incl-card {
width: 60px;
padding: 12px 6px 10px;
border: 1.5px solid var(--lbs-border);
border-radius: 10px;
background: #fff;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
transition: all .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-incl-card:hover { border-color: #C8C8C8; }
.lbs-incl-card--best { border-color: var(--lbs-y-d); }
.lbs-incl-card.active {
border-color: var(--lbs-y-d);
border-width: 2px;
background: var(--lbs-y-l);
}
.lbs-incl-visual {
width: 36px;
height: 30px;
display: flex;
align-items: flex-end;
justify-content: flex-start;
}
.lbs-incl-roof {
display: block;
width: 36px;
height: 4px;
border-radius: 3px;
background: var(--lbs-text);
transform-origin: left center;
}
.lbs-incl-val {
font-size: 13px;
font-weight: 700;
color: var(--lbs-text);
}
.lbs-incl-hint {
font-size: 12px;
color: var(--lbs-muted);
}
/* ── Jauge de rendement (live) ────────────────────────────── */
.lbs-orient-result {
max-width: 520px;
margin: 0 auto 16px;
text-align: left;
}
.lbs-orient-result-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
}
.lbs-orient-result-label {
font-size: 13px;
font-weight: 600;
color: var(--lbs-muted);
}
.lbs-orient-result-pct {
font-size: 24px;
font-weight: 800;
color: var(--lbs-text);
}
.lbs-orient-bar-track {
width: 100%;
height: 10px;
border-radius: 6px;
background: var(--lbs-bg);
overflow: hidden;
}
.lbs-orient-bar {
height: 100%;
width: 0%;
border-radius: 6px;
background: var(--lbs-b);
transition: width .4s ease, background-color .3s ease;
}
.lbs-orient-quality {
margin-top: 8px;
font-size: 13px;
color: var(--lbs-muted);
}
.lbs-orient-info { margin-top: 4px; }
@media (max-width: 760px) {
.lbs-orient-layout { gap: 26px; }
}
/* ============================================================
Étape Surface disponible — cards texte (choix unique)
============================================================ */
.lbs-surface-grid {
display: flex;
flex-wrap: wrap;
gap: 18px;
justify-content: center;
}
.lbs-surface-card {
width: 220px;
text-align: left;
padding: 20px 22px;
border: 1.5px solid var(--lbs-border);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: border-color .15s, background-color .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-surface-card:hover { border-color: #C8C8C8; }
.lbs-surface-card.selected {
border-color: var(--lbs-y-d);
border-width: 2px;
background: var(--lbs-y-l);
}
.lbs-surface-label {
font-size: 1.4rem;
font-weight: 500;
color: var(--lbs-text);
margin-bottom: 6px;
line-height: 1.2;
}
.lbs-surface-sub {
font-size: 13px;
color: var(--lbs-muted);
}
@media (max-width: 760px) {
.lbs-surface-card { width: calc(50% - 9px); }
}
@media (max-width: 420px) {
.lbs-surface-card { width: 100%; }
}
/* ============================================================
Étape Batterie de stockage — encart "site isolé" + cards radio
(les cards réutilisent .lbs-radio-* ; encart affiché si site isolé)
============================================================ */
.lbs-batterie-note {
display: flex;
align-items: flex-start;
gap: 12px;
text-align: left;
background: var(--lbs-y-l);
border: 1px solid #F3DE9A;
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 18px;
font-size: 14px;
line-height: 1.5;
color: var(--lbs-text);
}
.lbs-batterie-note.lbs-hidden { display: none; }
.lbs-batterie-note strong { font-weight: 700; }
.lbs-batterie-note-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--lbs-text);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-top: 1px;
}
/* ============================================================
Étapes Réseau & Méthode — cartes de choix « icône + texte »
sur une seule ligne (n'affecte pas .lbs-radio-* utilisé ailleurs).
============================================================ */
.lbs-screen[id="lbs-screen-reseau"],
.lbs-screen[id="lbs-screen-methode"],
.lbs-screen[id="lbs-screen-batterie"] { max-width: 980px; }
.lbs-choice-grid {
display: flex;
flex-wrap: wrap;
gap: 22px;
justify-content: center;
margin-bottom: 22px;
}
.lbs-choice-card {
position: relative;
flex: 1 1 0;
min-width: 300px;
max-width: 480px;
display: flex;
align-items: center;
gap: 22px;
text-align: left;
padding: 28px 30px;
border: 1.5px solid var(--lbs-border);
border-radius: 16px;
background: #fff;
cursor: pointer;
transition: border-color .15s, background-color .15s, box-shadow .15s;
box-shadow: var(--lbs-x-shadow);
}
.lbs-choice-card:hover { border-color: #C8C8C8; }
.lbs-choice-card.selected {
border-color: var(--lbs-y-d);
border-width: 2px;
background: var(--lbs-y-l);
box-shadow: 0 10px 28px rgba(255, 210, 33, 0.18);
}
/* Icône ronde (halo). Accueille un SVG via ![]()
; sinon le halo fait office
de placeholder. Le halo se teinte en jaune quand la carte est sélectionnée. */
.lbs-choice-icon {
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: 50%;
background: #F1F1F1;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .15s;
}
.lbs-choice-card.selected .lbs-choice-icon { background: #FBEDB0; }
.lbs-choice-icon img {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
pointer-events: none;
}
.lbs-choice-icon i {
font-size: 42px;
line-height: 1;
color: var(--lbs-text);
}
.lbs-choice-text { flex: 1; min-width: 0; }
.lbs-choice-title {
font-size: 19px;
font-weight: 700;
color: var(--lbs-text);
margin-bottom: 5px;
line-height: 1.25;
}
.lbs-choice-sub {
font-size: 14px;
color: var(--lbs-muted);
line-height: 1.45;
}
/* Indicateur de sélection en haut à droite : anneau vide -> disque foncé coché */
.lbs-choice-check {
position: absolute;
top: 18px;
right: 18px;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: #fff;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: all .15s;
}
.lbs-choice-check i { opacity: 0; transition: opacity .15s; }
.lbs-choice-card.selected .lbs-choice-check {
background: var(--lbs-text);
border-color: var(--lbs-text);
}
.lbs-choice-card.selected .lbs-choice-check i { opacity: 1; }
/* Encart d'information pleine largeur (réutilise .lbs-info-pill) */
.lbs-info-pill.lbs-info-pill--wide {
display: flex;
width: 100%;
justify-content: center;
color: #4A4A4A;
}
.lbs-info-pill .ti-info-circle {
margin-right: 12px;
}
.lbs-info-pill.lbs-info-pill--wide i { color: var(--lbs-b); }
@media (max-width: 760px) {
.lbs-choice-grid { gap: 12px; }
.lbs-choice-grid .lbs-choice-card {
flex: 1 1 calc(50% - 6px);
min-width: 0;
max-width: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 20px 12px;
}
.lbs-choice-grid .lbs-choice-icon { width: 60px; height: 60px; }
.lbs-choice-grid .lbs-choice-icon img { width: 34px; height: 34px; }
.lbs-choice-grid .lbs-choice-icon i { font-size: 28px; }
.lbs-choice-grid .lbs-choice-title { font-size: 14.5px; }
.lbs-choice-grid .lbs-choice-sub { font-size: 12px; line-height: 1.35; }
.lbs-choice-grid .lbs-choice-check { top: 10px; right: 10px; }
}
/* ============================================================
Étape Équipements — icône + aperçu conso au survol
Au survol : l'icône (SVG, à fournir) et les boutons +/- s'effacent,
la consommation moyenne apparaît avec une petite animation.
============================================================ */
/* ============================================================
Étape Équipements — design unifié avec détail inline entre 2 lignes
============================================================ */
.lbs-screen[id="lbs-screen-equipements"] { max-width: 1500px; }
.lbs-eq2-main { min-width: 0; max-width: none; }
.lbs-eq2-grid { gap: 32px; }
.lbs-eq2-grid.has-sel { grid-template-columns: minmax(0, 1fr) 360px; }
.lbs-eq2-filter-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
flex-wrap: wrap;
margin: 0 0 18px;
}
.lbs-eq2-filter {
height: 40px;
padding: 0 18px;
border-radius: 999px;
border: 1.5px solid var(--lbs-border);
background: #fff;
color: var(--lbs-text);
font-size: 13px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 4px 14px rgba(20, 20, 20, 0.035);
transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.lbs-eq2-filter:hover {
border-color: #D0D0D0;
transform: translateY(-1px);
}
.lbs-eq2-filter.active {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
box-shadow: 0 0 0 3px rgba(255, 210, 33, .12);
}
.lbs-eq2-filter i { font-size: 16px; }
.lbs-eq2-catalog {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
.lbs-eq2-product {
position: relative;
min-height: 168px;
padding: 18px 14px 16px;
border: 1.5px solid var(--lbs-border);
border-radius: 16px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.lbs-eq2-product:hover {
border-color: #C8C8C8;
transform: translateY(-1px);
}
.lbs-eq2-product.active {
border-color: var(--lbs-b);
box-shadow: 0 0 0 3px rgba(19, 106, 205, .12), var(--lbs-x-shadow);
}
.lbs-eq2-product.on:not(.active) {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
}
.lbs-eq2-product-check {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1.5px solid var(--lbs-border);
background: #fff;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: all .15s;
}
.lbs-eq2-product.active .lbs-eq2-product-check {
background: var(--lbs-b);
border-color: var(--lbs-b);
color: #fff;
}
.lbs-eq2-product.on:not(.active) .lbs-eq2-product-check {
background: var(--lbs-y);
border-color: var(--lbs-y-d);
color: var(--lbs-text);
}
.lbs-eq2-product-img {
width: 100%;
height: 110px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
/* Toutes les vignettes occupent la même boîte : le SVG s'y adapte (contain),
quel que soit son ratio interne. Fini les icônes plus petites que d'autres.
Surcharge possible par équipement : voir « Tailles personnalisées » plus bas. */
.lbs-eq2-product-img img {
width: 100%;
height: 100%;
max-width: 130px;
object-fit: contain;
}
.lbs-eq2-product-name {
font-size: 14px;
font-weight: 800;
color: var(--lbs-text);
line-height: 1.25;
}
.lbs-eq2-product-kwh {
margin-top: 3px;
font-size: 12px;
color: var(--lbs-muted);
line-height: 1.2;
}
.lbs-eq2-featured--inline {
grid-column: 1 / -1;
margin: -2px 0 0;
}
.lbs-eq2-featured-card {
min-height: 215px;
box-shadow: none;
}
.lbs-eq2-featured-collapse {
border-top: 1px dashed rgba(19, 106, 205, .22);
margin: 0 20px;
}
@media (max-width: 1160px) {
.lbs-eq2-grid,
.lbs-eq2-grid.has-sel { grid-template-columns: 1fr; }
.lbs-eq2-aside { position: static; margin-top: 8px; }
}
@media (max-width: 860px) {
.lbs-eq2-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
.lbs-sim-badge { display: none; }
.lbs-eq2-filter-row { gap: 8px; }
.lbs-eq2-filter { padding: 0 12px; font-size: 12px; }
.lbs-eq2-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lbs-eq2-main { width: 100%; max-width: 100%; }
.lbs-eq2-grid { width: 100%; max-width: 100%; }
.lbs-eq2-product { min-height: 142px; }
}
/* ── Écran équipements : bottom sheet mobile ──────────────────────────────────
Sur téléphone, le panneau latéral « Votre sélection » et la carte détail inline
sont remplacés par un panneau ancré en bas de l'écran (sticky au-dessus du
footer), qui affiche le détail de l'équipement tapé + sa quantité, ou le
récapitulatif de la sélection. Masqué sur desktop. */
.lbs-eq2-sheet { display: none; }
.lbs-eq2-sheet[hidden] { display: none; }
.lbs-eq2-backdrop { display: none; }
@media (max-width: 760px) {
/* Le panneau latéral desktop et la carte détail inline ne servent plus. */
.lbs-eq2-aside { display: none !important; }
.lbs-eq2-featured--inline { display: none !important; }
.lbs-eq2-sheet {
display: block;
position: sticky;
bottom: 0;
z-index: 40;
/* Pleine largeur écran quel que soit le padding du body (full-bleed). */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
pointer-events: none; /* la carte réactive les events, pas la zone full-bleed vide */
}
.lbs-eq2-sheet[hidden] { display: none; }
/* ── Aspect « modal » : fond grisé + sheet fixé au-dessus ──────────────── */
.lbs-eq2-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(18, 26, 38, .45);
z-index: 1001;
animation: lbs-eq2-backdrop-in .18s ease;
}
.lbs-eq2-backdrop[hidden] { display: none; }
/* En mode modal, le sheet est ancré au bas de l'écran, au-dessus du fond grisé
(donc au-dessus du header et du footer, comme une vraie modal). */
.lbs-eq2-sheet.lbs-eq2-sheet--modal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: auto;
margin: 0;
z-index: 1002;
animation: lbs-eq2-sheet-up .22s cubic-bezier(.2, .7, .2, 1);
}
/* Verrouille le défilement de l'arrière-plan tant que la modal est ouverte. */
.lbs-sim-body.lbs-eq2-noscroll { overflow: hidden; }
.lbs-eq2-sheet-card {
pointer-events: auto;
position: relative;
background: #fff;
border-top: 1px solid var(--lbs-border);
border-radius: 20px 20px 0 0;
box-shadow: 0 -12px 30px rgba(16, 32, 56, .12);
padding: 12px 16px 16px;
}
.lbs-eq2-sheet-handle {
display: block;
width: 42px; height: 4px;
border-radius: 999px;
background: #d7dde5;
margin: 0 auto 12px;
}
.lbs-eq2-sheet-x {
position: absolute; top: 12px; right: 14px;
width: 30px; height: 30px; border-radius: 50%;
border: 1px solid var(--lbs-border); background: #fff;
color: #8a94a3; font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.lbs-eq2-sheet-x:hover { color: #5a6472; }
.lbs-eq2-sheet-detail { display: flex; gap: 14px; align-items: center; padding-right: 36px; }
.lbs-eq2-sheet-thumb {
flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px;
background: #f7f9fc; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lbs-eq2-sheet-thumb .lbs-eq-thumb { width: 100%; height: 100%; }
.lbs-eq2-sheet-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lbs-eq2-sheet-info { min-width: 0; }
.lbs-eq2-sheet-name { font-size: 19px; font-weight: 800; color: var(--lbs-text); line-height: 1.2; }
.lbs-eq2-sheet-kwh { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--lbs-b); display: inline-flex; align-items: center; gap: 6px; }
.lbs-eq2-sheet-kwh i { font-size: 15px; }
.lbs-eq2-sheet-desc { margin-top: 6px; font-size: 12.5px; color: var(--lbs-muted); line-height: 1.4; }
.lbs-eq2-sheet-qty {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-top: 16px;
}
.lbs-eq2-sheet-qtylabel { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lbs-muted); }
.lbs-eq2-sheet-qty .lbs-qty-btn { width: 38px; height: 38px; font-size: 18px; }
.lbs-eq2-sheet-qty .lbs-qty-val { min-width: 34px; font-size: 16px; }
.lbs-eq2-sheet-sep { height: 1px; background: var(--lbs-border); margin: 14px 0; }
.lbs-eq2-sheet-recap-bar {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
border: 1px solid #dbe6f5; background: var(--lbs-b-l);
border-radius: 12px; padding: 12px 14px; cursor: pointer;
font-size: 13.5px; font-weight: 700; color: var(--lbs-b); text-align: left;
}
.lbs-eq2-sheet-recap-left { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lbs-eq2-sheet-recap-left > i { font-size: 16px; }
.lbs-eq2-sheet-recap-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
background: var(--lbs-b); color: #fff; font-size: 12px; font-weight: 800;
}
.lbs-eq2-sheet-recap-dot { color: #9fb6d6; }
.lbs-eq2-sheet-recap-panel { margin-top: 12px; }
.lbs-eq2-sheet-recap-list { display: flex; flex-direction: column; gap: 12px; max-height: 38vh; overflow-y: auto; }
.lbs-eq2-sheet-recap-total {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lbs-border);
font-size: 13px; color: var(--lbs-text);
}
.lbs-eq2-sheet-recap-total strong { font-size: 17px; font-weight: 800; color: var(--lbs-b); white-space: nowrap; }
.lbs-eq2-sheet-add {
width: 100%; margin-top: 14px; border: none; cursor: pointer;
background: var(--lbs-y); color: #000; border-radius: 12px;
padding: 15px 16px; font-size: 15px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.lbs-eq2-sheet-add:hover { background: #f0c518; }
/* Un peu d'air sous la grille pour que le sheet ne masque pas la dernière ligne. */
.lbs-eq2-catalog { padding-bottom: 6px; }
/* Sur l'écran équipements, on supprime TOUT padding bas du body : sinon un espace
gris apparaît sous le bottom sheet sticky quand on scrolle tout en bas, et la
barre « Votre sélection » ne colle pas au footer.
Deux règles indépendantes (pour ne pas invalider l'ensemble si :has() est absent) :
- via la classe posée par le JS sur le body (goToStep),
- via :has() en pur CSS, qui fonctionne même sans mise à jour du JS. */
.lbs-sim-body.lbs-body-equipements { padding-bottom: 0 !important; }
.lbs-sim-body:has(> #lbs-screen-equipements.active) { padding-bottom: 0 !important; }
/* Idem sur l'écran Orientation (bottom sheet récapitulatif). */
.lbs-sim-body:has(> #lbs-screen-orientation.active) { padding-bottom: 0 !important; }
}
/* ── Écran Orientation & inclinaison : récapitulatif mobile (bottom sheet) ─────
Réutilise les classes .lbs-eq2-sheet* / .lbs-eq2-backdrop pour une UX identique
à l'écran équipements. On masque les cartes récap latérales sur mobile (elles
sont remplacées par le récap du sheet) et on met en forme les lignes du récap. */
@media (max-width: 760px) {
#lbs-screen-orientation .lbs-orient-summary-card,
#lbs-screen-orientation .lbs-incl-summary-card { display: none; }
.lbs-orient-sheet-recap {
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 12px;
}
.lbs-orient-sheet-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.lbs-orient-sheet-row + .lbs-orient-sheet-row {
border-top: 1px solid var(--lbs-border);
padding-top: 12px;
}
.lbs-orient-sheet-k { font-size: 12px; font-weight: 700; color: var(--lbs-muted); }
.lbs-orient-sheet-v { font-size: 14px; font-weight: 800; color: var(--lbs-b); text-align: right; }
}
@keyframes lbs-eq2-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lbs-eq2-sheet-up {
from { transform: translateY(18px); opacity: .4; }
to { transform: translateY(0); opacity: 1; }
}
.lbs-info-pill {
display: none;
}
/* ============================================================
Étape Consommation — design facture prioritaire
============================================================ */
.lbs-screen[id="lbs-screen-consommation"] {
max-width: 760px;
}
.lbs-screen[id="lbs-screen-consommation"] .lbs-screen-title {
margin-bottom: 1.35rem;
}
.lbs-conso-facture-layout {
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 22px;
text-align: left;
}
.lbs-conso-facture-card,
.lbs-conso-estimate-card {
width: 100%;
border: 1.5px solid var(--lbs-border);
border-radius: 14px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
}
.lbs-conso-facture-card {
padding: 18px 22px 20px;
}
.lbs-conso-estimate-card {
padding: 18px 22px 20px;
transition: opacity .18s ease, filter .18s ease, background-color .18s ease;
}
.lbs-conso-card-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.lbs-conso-card-head > span:last-child {
display: flex;
flex-direction: column;
gap: 3px;
}
.lbs-conso-card-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--lbs-b-l);
color: var(--lbs-b);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.lbs-conso-card-icon--neutral {
background: #F5F5F5;
color: #6B6B6B;
}
.lbs-conso-facture-card .lbs-conso-card-title,
.lbs-conso-estimate-card .lbs-conso-card-title {
display: block;
font-size: 15px;
font-weight: 800;
color: var(--lbs-text);
margin: 0;
}
.lbs-conso-facture-card .lbs-conso-card-sub,
.lbs-conso-estimate-card .lbs-conso-card-sub {
display: block;
font-size: 13px;
color: var(--lbs-muted);
line-height: 1.35;
margin: 0;
}
.lbs-kwh-input-wrap--facture {
max-width: none;
margin-left: 44px;
}
.lbs-kwh-input-wrap--facture input {
height: 58px;
padding: 0 92px 0 18px;
font-size: 1.15rem;
font-weight: 600;
text-align: left;
letter-spacing: 0;
box-shadow: none;
}
.lbs-kwh-input-wrap--facture .lbs-kwh-unit {
right: 18px;
color: var(--lbs-text);
font-size: 12px;
font-weight: 700;
}
.lbs-conso-separator {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--lbs-muted);
font-size: 13px;
font-weight: 700;
}
.lbs-conso-separator::before,
.lbs-conso-separator::after {
content: '';
flex: 1;
height: 1px;
background: var(--lbs-border);
}
.lbs-conso-separator span {
padding: 0 18px;
}
.lbs-conso-estimate-card .lbs-persons-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin-top: 16px;
}
.lbs-conso-estimate-card .lbs-person-btn {
width: 100%;
height: 124px;
padding: 8px 6px 10px;
flex-direction: column;
gap: 3px;
color: var(--lbs-text);
background: #fff;
}
.lbs-person-visual {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 58px;
}
.lbs-conso-estimate-card .lbs-person-icon {
width: 58px;
}
.lbs-person-plus {
position: absolute;
right: -4px;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--lbs-text);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
line-height: 1;
}
.lbs-person-label {
font-size: 13px;
font-weight: 700;
color: var(--lbs-text);
}
.lbs-conso-estimate-card .lbs-person-btn.active {
border-color: var(--lbs-y-d);
background: var(--lbs-y-l);
box-shadow: 0 0 0 3px rgba(255, 210, 33, .12);
}
.lbs-conso-estimate-card.is-stale {
background: #FAFAFA;
}
.lbs-conso-estimate-card.is-stale .lbs-persons-grid {
opacity: .42;
filter: grayscale(1);
}
.lbs-conso-estimate-card.is-stale .lbs-person-btn {
border-color: var(--lbs-border);
background: #fff;
box-shadow: none;
}
@media (max-width: 760px) {
.lbs-conso-facture-layout { max-width: 100%; }
.lbs-conso-estimate-card .lbs-persons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lbs-kwh-input-wrap--facture { margin-left: 0; }
}
/* ============================================================
Étape Surface disponible — toit interactif (v3)
Carte centrée : grande valeur + 2 compteurs, scène toit en
perspective (panneaux SVG cliquables), slider encadré par 2 champs,
3 raccourcis (Petit / Moyen / Grand toit). Variables du design system.
============================================================ */
.lbs-surf3-card {
text-align: left;
padding: 30px 34px 32px;
border: 1.5px solid var(--lbs-border);
border-radius: 22px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
}
/* ── Grande valeur centrale ──────────────────────────────────── */
.lbs-surf3-value {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
line-height: 1;
margin: 6px 0 22px;
}
.lbs-surf3-value > span:first-child {
font-size: 4.4rem;
font-weight: 800;
color: var(--lbs-text);
letter-spacing: -.02em;
}
.lbs-surf3-unit {
font-size: 1.4rem;
font-weight: 700;
color: var(--lbs-muted);
}
/* ── 2 compteurs (panneaux / puissance) ──────────────────────── */
.lbs-surf3-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 600px;
margin: 0 auto 22px;
}
.lbs-surf3-stat {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1.5px solid var(--lbs-border);
border-radius: 14px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
}
.lbs-surf3-stat-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--lbs-b-l);
color: var(--lbs-b);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.lbs-surf3-stat-icon--power { background: var(--lbs-y-l); color: #C79A00; }
.lbs-surf3-stat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lbs-surf3-stat-label {
font-size: 13px;
font-weight: 600;
color: var(--lbs-muted);
line-height: 1.2;
}
.lbs-surf3-stat-val {
font-size: 15px;
font-weight: 800;
color: var(--lbs-text);
}
.lbs-surf3-stat-val span { color: var(--lbs-b); }
/* ── Scène toit ──────────────────────────────────────────────── */
.lbs-surf3-roof-box {
border: 1.5px solid var(--lbs-border);
border-radius: 16px;
background: var(--lbs-bg);
padding: 14px 16px 6px;
margin-bottom: 22px;
}
.lbs-surf3-roof-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.lbs-surf3-roof-head-l {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: var(--lbs-text);
}
.lbs-surf3-roof-head-l i { font-size: 15px; color: var(--lbs-muted); }
.lbs-surf3-roof-head-r {
font-size: 12.5px;
color: var(--lbs-muted);
text-align: right;
}
.lbs-surf3-roof-scene {
position: relative;
width: 100%;
aspect-ratio: 1376 / 768; /* = ratio de toit.svg (cale image + panneaux) */
border-radius: 10px;
overflow: hidden;
}
.lbs-surf3-roof-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: fill; /* même ratio que le conteneur => pas de déformation */
display: block;
user-select: none;
pointer-events: none;
}
.lbs-surf3-roof-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* Panneaux SVG : emplacement vide (toit visible au travers) -> rempli (bleu) */
.lbs-surf3-panel {
fill: rgba(255, 255, 255, 0.16);
stroke: #5E83B5;
stroke-width: 2;
stroke-dasharray: 5 4;
pointer-events: all;
cursor: pointer;
transition: fill .12s ease, stroke .12s ease;
}
.lbs-surf3-panel:hover { fill: rgba(43, 123, 224, 0.22); stroke: var(--lbs-b); }
.lbs-surf3-panel.filled {
fill: url(#lbs-panel-grad);
stroke: #0E4C97;
stroke-width: 1.6;
stroke-dasharray: none;
}
.lbs-surf3-panel.filled:hover { fill: var(--lbs-b); }
/* ── Slider encadré par 2 champs ─────────────────────────────── */
.lbs-surf3-controls {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 22px;
margin-bottom: 22px;
}
.lbs-surf3-field { display: flex; flex-direction: column; gap: 7px; }
.lbs-surf3-field--right { align-items: flex-end; }
.lbs-surf3-field-label {
font-size: 12px;
font-weight: 600;
color: var(--lbs-muted);
}
.lbs-surf3-field-box {
display: inline-flex;
align-items: center;
gap: 4px;
min-width: 96px;
padding: 10px 14px;
border: 1.5px solid var(--lbs-border);
border-radius: 10px;
background: #fff;
font-size: 15px;
font-weight: 800;
color: var(--lbs-text);
transition: border-color .15s, box-shadow .15s;
}
.lbs-surf3-field-box:focus-within {
border-color: var(--lbs-b);
box-shadow: 0 0 0 3px rgba(19,106,205,.12);
}
.lbs-surf3-field-box input {
width: 46px;
border: none;
outline: none;
background: transparent;
font-size: 15px;
font-weight: 800;
color: var(--lbs-text);
padding: 0;
/* masque les flèches natives du number input */
-moz-appearance: textfield;
}
.lbs-surf3-field-box input::-webkit-outer-spin-button,
.lbs-surf3-field-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lbs-surf3-field-unit { font-weight: 700; color: var(--lbs-muted); }
.lbs-surf3-field-box--max { background: var(--lbs-bg); }
.lbs-surf3-slider-wrap { padding: 0 4px; }
.lbs-surf3-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 6px;
background: #E8E8E8;
outline: none;
cursor: pointer;
margin: 0;
}
.lbs-surf3-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--lbs-y);
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(20,20,20,.2);
cursor: pointer;
transition: transform .12s;
}
.lbs-surf3-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.lbs-surf3-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--lbs-y);
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(20,20,20,.2);
cursor: pointer;
}
.lbs-surf3-slider::-moz-range-track { height: 6px; border-radius: 6px; background: transparent; }
.lbs-surf3-scale {
display: flex;
justify-content: space-between;
margin-top: 9px;
font-size: 11.5px;
font-weight: 600;
color: var(--lbs-muted);
}
/* ── Raccourcis Petit / Moyen / Grand toit ───────────────────── */
.lbs-surf3-shortcuts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.lbs-surf3-shortcut {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 15px 12px;
border: 1.5px solid var(--lbs-border);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.lbs-surf3-shortcut:hover { border-color: #C8C8C8; }
.lbs-surf3-shortcut.active {
border-color: var(--lbs-b);
background: var(--lbs-b-l);
box-shadow: 0 0 0 3px rgba(19,106,205,.10);
}
.lbs-surf3-shortcut-title {
font-size: 15px;
font-weight: 700;
color: var(--lbs-text);
}
.lbs-surf3-shortcut-sub {
font-size: 13px;
color: var(--lbs-muted);
}
.lbs-surf3-shortcut.active .lbs-surf3-shortcut-title { color: var(--lbs-b); }
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 680px) {
.lbs-surf3-card { padding: 24px 18px 26px; }
.lbs-surf3-value > span:first-child { font-size: 3.4rem; }
.lbs-surf3-stats { grid-template-columns: 1fr; gap: 12px; }
.lbs-surf3-controls { grid-template-columns: 1fr; gap: 16px; }
.lbs-surf3-field, .lbs-surf3-field--right { align-items: stretch; }
.lbs-surf3-field-box { justify-content: center; }
.lbs-surf3-roof-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.lbs-surf3-roof-head-r { text-align: left; }
.lbs-surf3-shortcuts { grid-template-columns: 1fr; }
}
/* ============================================================
Étape Structure — choix rapide fixations ou résultats
============================================================ */
.lbs-screen[id="lbs-screen-choix_fixations"] {
max-width: 980px;
}
.lbs-structure-choice-grid .lbs-choice-card {
min-height: 168px;
}
.lbs-structure-choice-grid .lbs-choice-card--skip.selected {
border-color: var(--lbs-b);
background: var(--lbs-b-l);
box-shadow: 0 10px 28px rgba(19, 106, 205, 0.12);
}
.lbs-structure-choice-grid .lbs-choice-card--skip.selected .lbs-choice-icon {
background: #E4EFFF;
}
/* ============================================================
Étape Orientation & inclinaison — design tranches simplifiées
Remplace uniquement le contenu de l'écran, sans toucher header/footer.
============================================================ */
.lbs-screen[id="lbs-screen-orientation"] {
max-width: 1180px;
}
.lbs-orient-simple-layout {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 22px;
align-items: stretch;
text-align: left;
}
.lbs-orient-simple-card {
border: 1.5px solid var(--lbs-border);
border-radius: 18px;
background: #fff;
box-shadow: var(--lbs-x-shadow);
padding: 22px;
}
.lbs-orient-simple-head {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.lbs-orient-simple-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #F7FAFF;
color: var(--lbs-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex: 0 0 auto;
}
.lbs-orient-simple-title {
display: block;
font-size: 17px;
font-weight: 800;
color: var(--lbs-text);
line-height: 1.2;
}
.lbs-orient-simple-sub {
display: block;
margin-top: 4px;
font-size: 13px;
color: var(--lbs-muted);
line-height: 1.35;
}
/* Boussole */
.lbs-orient-compass-wrap {
display: flex;
justify-content: center;
align-items: center;
margin: 2px 0 16px;
/* Le padding réserve la place des libellés (N/NE/E…) et des degrés qui
débordent hors du cercle. Il remplace l'ancienne marge fixe de 46px qui
forçait une largeur > écran sur mobile. */
padding: 38px clamp(30px, 9vw, 40px);
overflow: visible;
box-sizing: border-box;
}
/* Boussole — wheel découpé en 8 secteurs (façon image 1)
Taille 100 % FLUIDE : le cercle prend toute la largeur disponible du wrap
(déjà amputée du padding qui loge les libellés) et se plafonne à 208px.
Plus aucune dimension fixe ne peut dépasser l'écran. */
.lbs-orient-compass-new {
position: relative;
width: 100%;
max-width: 208px;
aspect-ratio: 1 / 1;
height: auto;
border-radius: 50%;
background: #fff;
border: 1px solid #DDE3EA; /* anneau extérieur */
box-shadow: 0 6px 20px rgba(20,20,20,.05);
margin: 0 auto;
overflow: visible;
}
/* le wedge jaune s'arrête désormais à 38px de rayon (76px de diamètre) */
.lbs-orient-compass-fill {
-webkit-mask: radial-gradient(circle closest-side at center, transparent 0 37px, #000 38px 100%);
mask: radial-gradient(circle closest-side at center, transparent 0 37px, #000 38px 100%);
}
/* 2e cercle, collé exactement là où le jaune s'arrête */
.lbs-orient-compass-new::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 51%;
height: 51%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid #DDE3EA;
z-index: 3; /* au-dessus du jaune, sous le bouton (z-index:4) */
pointer-events: none;
background: #fff; /* masque le jaune entre le bouton (64px) et 76px */
}
/* 8 traits radiaux aux frontières des secteurs */
.lbs-orient-compass-rings {
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-conic-gradient(from 22.5deg,
#DDE3EA 0 0.7deg, transparent 0.7deg 45deg);
z-index: 2;
pointer-events: none;
}
/* on retire la croix N-S/E-O et les anneaux concentriques (pas dans l'image 1) */
.lbs-orient-compass-cross { display: none; }
/* secteur actif : le wedge jaune (background posé par le JS) couvre tout le rayon */
.lbs-orient-compass-fill {
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0;
z-index: 1; /* sous les traits gris */
transition: opacity .18s ease, background .18s ease;
-webkit-mask: radial-gradient(circle closest-side at center, transparent 0 31px, #000 32px 100%);
mask: radial-gradient(circle closest-side at center, transparent 0 31px, #000 32px 100%);
}
.lbs-orient-compass-fill {
opacity: 0;
transition: opacity .18s ease, background .18s ease;
mask: radial-gradient(circle at center, transparent 0 31%, #000 32% 100%);
-webkit-mask: radial-gradient(circle at center, transparent 0 31%, #000 32% 100%);
}
.lbs-orient-compass-cross::before,
.lbs-orient-compass-cross::after {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 100%;
background: #E6EBF0;
transform-origin: center;
}
.lbs-orient-compass-cross::after { transform: rotate(90deg); }
.lbs-orient-compass-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 29%;
height: 29%;
border-radius: 50%;
background: #fff;
border: 1px solid #DDE3EA;
display: flex;
align-items: center;
justify-content: center;
color: var(--lbs-text);
font-size: clamp(20px, 6vw, 25px);
box-shadow: 0 6px 18px rgba(20,20,20,.06);
z-index: 4;
}
/* Aiguille centrale : pivote (via style inline JS) vers l'orientation choisie.
0° = Nord (l'aiguille pointe vers le haut par défaut). */
.lbs-orient-needle {
display: inline-block;
transform-origin: center;
transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
/* couche des tranches cliquables */
.lbs-orient-compass-hit {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3; /* au-dessus du remplissage/anneaux */
}
.lbs-orient-sector {
fill: transparent;
cursor: pointer;
transition: fill .12s ease;
}
.lbs-orient-sector:hover { fill: rgba(43, 123, 204, .07); } /* survol = toute la part */
/* libellés : simples étiquettes, clics gérés par les tranches */
.lbs-orient-segment {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
pointer-events: none;
z-index: 5;
color: var(--lbs-text);
}
.lbs-orient-segment.active { color: var(--lbs-b); }
.lbs-orient-segment-abbr {
font-size: 14px;
font-weight: 900;
line-height: 1;
}
.lbs-orient-segment-deg,
.lbs-orient-degree-mark {
font-size: 11px;
font-weight: 700;
color: #1d2a3a;
opacity: .9;
}
.lbs-orient-degree-mark { pointer-events: none; z-index: 5; }
.lbs-orient-segment.active .lbs-orient-segment-abbr,
.lbs-orient-segment.active .lbs-orient-segment-deg { color: var(--lbs-b); }
.lbs-orient-degree-mark {
position: absolute;
transform: translate(-50%, -50%);
z-index: 3;
color: #3b4757;
opacity: .82;
}
.lbs-orient-summary-card,
.lbs-incl-summary-card {
border-radius: 14px;
background: linear-gradient(180deg, #F7FAFF 0%, #F1F6FD 100%);
padding: 16px 18px;
}
.lbs-orient-summary-card {
text-align: center;
}
.lbs-orient-summary-label,
.lbs-incl-summary-label {
display: block;
font-size: 12px;
font-weight: 700;
color: var(--lbs-muted);
margin-bottom: 5px;
}
.lbs-orient-summary-main,
.lbs-incl-summary-main {
display: block;
font-size: 20px;
font-weight: 900;
color: var(--lbs-b);
line-height: 1.15;
}
.lbs-orient-summary-sub,
.lbs-incl-summary-sub {
display: block;
margin-top: 4px;
font-size: 13px;
color: var(--lbs-text);
line-height: 1.35;
}
.lbs-orient-hint {
margin-top: 16px;
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--lbs-b);
}
.lbs-orient-hint i { font-size: 16px; margin-top: 1px; }
/* Inclinaison — 4 tranches */
.lbs-incl-simple-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 8px 0 18px;
}
.lbs-incl-simple-card {
position: relative;
min-height: 218px;
border: 1.5px solid var(--lbs-border);
border-radius: 14px;
background: #fff;
cursor: pointer;
padding: 18px 12px 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.lbs-incl-simple-card:hover {
border-color: #C8C8C8;
transform: translateY(-1px);
}
.lbs-incl-simple-card.active {
border-color: var(--lbs-b);
box-shadow: 0 0 0 3px rgba(19,106,205,.12);
}
.lbs-incl-simple-check {
position: absolute;
right: 10px;
top: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--lbs-b);
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-size: 14px;
}
.lbs-incl-simple-card.active .lbs-incl-simple-check { display: inline-flex; }
.lbs-incl-simple-visual {
height: 98px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
/* Illustration SVG de la tranche d'inclinaison. */
.lbs-incl-simple-img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
pointer-events: none;
}
/* Ancien trait incliné — conservé pour compatibilité, non utilisé. */
.lbs-incl-simple-roof {
display: block;
width: 82px;
height: 4px;
border-radius: 4px;
background: #283142;
transform-origin: left center;
box-shadow: 16px 10px 0 -2px rgba(19,106,205,.15);
}
.lbs-incl-simple-body {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.lbs-incl-simple-title {
font-size: 14px;
font-weight: 800;
color: var(--lbs-text);
margin-bottom: 6px;
min-height: 34px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.lbs-incl-simple-card.active .lbs-incl-simple-title { color: var(--lbs-b); }
.lbs-incl-simple-range {
font-size: 13px;
font-weight: 800;
color: var(--lbs-text);
margin-bottom: 8px;
}
.lbs-incl-simple-desc {
font-size: 12px;
color: var(--lbs-muted);
line-height: 1.35;
}
.lbs-incl-summary-card {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 18px;
align-items: center;
}
.lbs-incl-summary-card > div + div {
border-left: 1px solid var(--lbs-border);
padding-left: 18px;
}
@media (max-width: 1100px) {
.lbs-orient-simple-layout { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
.lbs-orient-simple-card { padding: 18px 16px; }
.lbs-orient-simple-head { gap: 10px; margin-bottom: 14px; }
/* La boussole reste 100 % fluide (voir .lbs-orient-compass-new) : on ajuste
seulement l'espace réservé aux libellés pour gagner de la largeur. */
.lbs-orient-compass-wrap { padding: 34px clamp(26px, 8vw, 36px); margin-bottom: 12px; }
.lbs-incl-simple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lbs-incl-simple-card { min-height: 0; padding: 16px 10px 14px; }
.lbs-incl-simple-visual { height: 52px; }
.lbs-incl-simple-title { min-height: 0; }
.lbs-incl-summary-card { grid-template-columns: 1fr; }
.lbs-incl-summary-card > div + div { border-left: none; padding-left: 0; border-top: 1px solid var(--lbs-border); padding-top: 14px; }
}
@media (max-width: 560px) {
/* Plus d'air horizontal sur petit écran (padding global du simulateur). */
.lbs-sim-body { padding: 1rem 0.85rem; }
.lbs-orient-simple-card { padding: 16px 13px; }
.lbs-orient-compass-wrap { padding: 32px clamp(22px, 7vw, 32px); }
.lbs-orient-summary-card, .lbs-incl-summary-card { padding: 14px; }
}
@media (max-width: 420px) {
.lbs-incl-simple-grid { grid-template-columns: 1fr; gap: 10px; }
.lbs-incl-simple-card {
flex-direction: row;
align-items: center;
text-align: left;
min-height: 0;
padding: 12px 14px;
gap: 14px;
}
.lbs-incl-simple-visual { width: 64px; flex: 0 0 64px; height: 40px; margin-bottom: 0; transform: scale(1.25); }
.lbs-incl-simple-roof { width: 60px; }
.lbs-incl-simple-title { min-height: 0; margin-bottom: 2px; display: block; }
.lbs-incl-simple-body { align-items: flex-start; text-align: left; flex: 1 1 auto; }
.lbs-incl-simple-check { top: 50%; transform: translateY(-50%); right: 12px; }
}
/* ── Placeholder équipement (aucune image / SVG manquant) ─────────────────── */
/* Fond gris clair + initiales en blanc, aux dimensions du conteneur. */
.lbs-eq-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-width: 32px;
min-height: 32px;
background: #c8cfd8;
color: #fff;
border-radius: 10px;
font-weight: 800;
letter-spacing: .5px;
line-height: 1;
font-size: 14px;
text-transform: uppercase;
box-sizing: border-box;
}
.lbs-eq2-featured-img .lbs-eq-ph { font-size: 22px; border-radius: 14px; }
.lbs-eq2-cart-img .lbs-eq-ph { font-size: 12px; border-radius: 8px; }
/* ── Skeleton de chargement des vignettes d'équipement ────────────────────────
Le wrapper occupe la boîte de la vignette ; tant que le SVG n'est pas chargé
il affiche un dégradé animé (shimmer). À l'onload, la classe .lbs-eq-skel est
retirée et l'image apparaît. */
.lbs-eq-thumb {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 12px;
}
.lbs-eq-skel {
background: linear-gradient(100deg, #eef1f5 30%, #f6f8fa 50%, #eef1f5 70%);
background-size: 200% 100%;
animation: lbs-eq-shimmer 1.2s ease-in-out infinite;
}
@keyframes lbs-eq-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.lbs-eq2-cart-img .lbs-eq-thumb { border-radius: 8px; }
/* Climatisation : SVG plus petit que les autres (80 au lieu de 120). */
/* ── Tailles personnalisées par équipement ────────────────────────────────────
Les vignettes sont homogènes par défaut (voir .lbs-eq2-product-img img).
Si le dessin d'un SVG remplit mal son cadre (marges internes trop grandes ou
trop petites), on l'ajuste ici sans toucher au reste.
La classe suit le `code` de l'équipement : .lbs-eq-img--
Exemples : transform: scale(1.15) agrandit, scale(.85) réduit. */
.lbs-eq2-product-img img.lbs-eq-img--clim { transform: scale(1.5); }
.lbs-eq2-product-img img.lbs-eq-img--congelateur { transform: scale(2.25); }
.lbs-eq2-product-img img.lbs-eq-img--four { transform: scale(1.75); }
.lbs-eq2-product-img img.lbs-eq-img--plaques { transform: scale(1.5); }
.lbs-eq2-product-img img.lbs-eq-img--lave_vaisselle { transform: scale(2); }
.lbs-eq2-product-img img.lbs-eq-img--lave_linge { transform: scale(1.5); }
.lbs-eq2-product-img img.lbs-eq-img--micro_onde { transform: scale(1.5); }
.lbs-eq2-product-img img.lbs-eq-img--frigo { transform: scale(1.75); }
.lbs-eq2-product-img img.lbs-eq-img--seche_linge { transform: scale(1.35); }
.lbs-eq2-product-img img.lbs-eq-img--chauffeeau { transform: scale(1.25); }
.lbs-eq2-product-img img.lbs-eq-img--chauffage { transform: scale(1.5); }
.lbs-eq2-product-img img.lbs-eq-img--tv { transform: scale(1.75); }
.lbs-eq2-product-img img.lbs-eq-img--boxpc { transform: scale(1.75); }
.lbs-eq2-product-img img.lbs-eq-img--ordinateur { transform: scale(1.25); }
.lbs-eq2-product-img img.lbs-eq-img--borne { transform: scale(1.25); }