.lci-configurateur {
--lci-pink: #2c6ab4;
--lci-pink-dark: #1f5596;
--lci-pink-soft: #eaf2fb;
--lci-ink: #252525;
--lci-muted: #686868;
--lci-line: #e4e4e4;
padding: clamp(24px, 5vw, 56px);
border-radius: 18px;
background: #fff;
box-shadow: 0 12px 35px rgba(28, 28, 28, .08);
color: var(--lci-ink);
}
.lci-configurateur * { box-sizing: border-box; }
.lci-configurateur__intro { max-width: 720px; margin-bottom: 30px; }
.lci-configurateur__intro h2 { margin: 4px 0 10px; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; }
.lci-configurateur__intro > p:last-child { margin: 0; color: var(--lci-muted); }
.lci-configurateur__eyebrow { margin: 0; color: var(--lci-pink); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.lci-configurateur__sentence {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.3fr) auto;
gap: 16px;
align-items: end;
padding: 22px;
border-radius: 14px;
background: var(--lci-pink-soft);
}
.lci-configurateur__field label { display: block; margin: 0 0 8px; font-weight: 700; }
.lci-configurateur__field select {
width: 100%;
min-height: 50px;
padding: 0 42px 0 14px;
border: 1px solid #d8b8c5;
border-radius: 8px;
background-color: #fff;
color: var(--lci-ink);
font: inherit;
}
.lci-configurateur__field select:focus { outline: 3px solid rgba(195, 63, 112, .2); border-color: var(--lci-pink); }
.lci-configurateur__field select:disabled { opacity: .58; cursor: not-allowed; }
.lci-configurateur__submit,
.lci-configurateur__link {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 12px 22px;
border: 0;
border-radius: 8px;
background: var(--lci-pink);
color: #fff !important;
font: inherit;
font-weight: 700;
line-height: 1.2;
text-decoration: none !important;
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.lci-configurateur__submit:hover:not(:disabled),
.lci-configurateur__link:hover { background: var(--lci-pink-dark); transform: translateY(-1px); }
.lci-configurateur__submit:disabled { opacity: .48; cursor: not-allowed; }
.lci-configurateur__results { margin-top: 30px; }
.lci-configurateur__results:empty { display: none; }
.lci-configurateur__results-title { margin: 0 0 16px; font-size: 22px; }
.lci-configurateur__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lci-configurateur__card {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
min-height: 124px;
padding: 20px;
border: 1px solid var(--lci-line);
border-radius: 12px;
background: #fff;
}
.lci-configurateur__card--without-image { grid-template-columns: minmax(0, 1fr) auto; }
.lci-configurateur__image {
display: flex;
width: 92px;
height: 92px;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 9px;
background: #f6f7f9;
}
.lci-configurateur__image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.lci-configurateur__reference { margin: 0 0 5px; color: var(--lci-pink); font-size: 14px; font-weight: 800; letter-spacing: .05em; }
.lci-configurateur__card h4 { margin: 0; font-size: 17px; line-height: 1.35; }
.lci-configurateur__link { min-height: 42px; flex: 0 0 auto; padding: 10px 16px; font-size: 14px; }
.lci-configurateur__empty { padding: 18px; border-left: 4px solid var(--lci-pink); background: var(--lci-pink-soft); }
@media (max-width: 900px) {
.lci-configurateur__sentence { grid-template-columns: 1fr; }
.lci-configurateur__grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
.lci-configurateur { padding: 22px 16px; border-radius: 12px; }
.lci-configurateur__sentence { padding: 16px; }
.lci-configurateur__card,
.lci-configurateur__card--without-image {
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 14px;
}
.lci-configurateur__card--without-image { grid-template-columns: 1fr; }
.lci-configurateur__image { width: 72px; height: 72px; }
.lci-configurateur__link { width: 100%; }
.lci-configurateur__card .lci-configurateur__link { grid-column: 1 / -1; }
}