/* ============================================================
   FICHE TECHNIQUE ACORN 180 — Mon Monte-Escalier
   ============================================================ */

:root {
    --me-blue: #01158e; --me-blue-light: #0024ff; --me-orange: #ff6a00;
    --me-dark: #3c3c3d; --me-card-bg: #eeeff8;
}

.me-ft { overflow-x: hidden; }

/* ---------- CONTENT ---------- */
.me-ft-content-wrapper { background: #fff; border-radius: 150px 150px 0 0; padding: 237px 70px 0; max-width: 100%; margin: 0 auto; display: flex; justify-content: center; }
.me-ft-sections { display: flex; flex-direction: column; gap: 200px; width: 1340px; }
.me-ft-row { display: flex; }
.me-ft-row--centered { flex-direction: column; align-items: left; gap: 12px; }

/* ---------- SECTION HEADER ---------- */
.me-section-header { display: flex; flex-direction: column; gap: 14.25px; }
.me-section-header--centered { align-items: center; }
.me-section-eyebrow { display: inline-flex; align-items: center; padding-left: 29px; position: relative; padding-bottom: 2px; align-self: flex-start; }
.me-section-header--centered .me-section-eyebrow { align-self: center; }
.me-eyebrow-dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 5px; background: var(--me-orange); }
.me-eyebrow-text { font-size: 20px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; line-height: 1; color: var(--me-blue-light); }
.me-section-title { font-weight: 700; line-height: 1.3; margin: 0; padding-bottom: 0.75px; text-align: left; }
.me-section-header--centered .me-section-title { text-align: center; max-width: 100%; white-space: nowrap; }

/* ---------- SPEC TABLE ---------- */
.me-ft-hero { display: flex; flex-direction: column; gap: 50px; width: 100%; }
.me-ft-hero-body { display: flex; gap: 40px; align-items: flex-start; width: 100%; }
.me-ft-hero-img { flex: 1; }
.me-ft-hero-img img { width: 100%; height: auto; object-fit: contain; }
.me-ft-spec-table-wrap { flex-shrink: 0; }

.me-ft-spec-table { width: 732px; }
.me-ft-spec-header { background: var(--me-orange); color: #fff; font-size: 20px; font-weight: 600; padding: 14px 12px; text-align: center; border-radius: 4px 4px 0 0; white-space: nowrap; }
.me-ft-spec-body { background: #fff; border: 1px solid #d9dee8; border-top: none; }

.me-ft-cotes-table { width: 100%; border-collapse: collapse; }
.me-ft-cotes-table thead th { font-size: 14px; font-weight: 600; color: #222; padding: 14px 18px 16px; text-align: center; border-bottom: 1px solid #d9dee8; }
.me-ft-cotes-table tbody td { font-size: 14px; color: #222; padding: 14px 18px 16px; border-bottom: 1px solid #d9dee8; }
.me-ft-cotes-table tbody tr:last-child td { border-bottom: none; }
.me-ft-col-label { width: 81px; text-align: center !important; font-weight: 600 !important; border-right: 1px solid #d9dee8; }
.me-ft-col-desc { text-align: left; border-right: 1px solid #d9dee8; }
.me-ft-col-value { width: 146px; text-align: left; }

.me-ft-spec-2col { width: 100%; border-collapse: collapse; }
.me-ft-spec-2col thead th:first-child { width: 373px; font-size: 14px; font-weight: 600; color: #222; padding: 14px 18px 16px; text-align: center; border-bottom: 1px solid #d9dee8; }
.me-ft-spec-2col thead th:last-child { font-size: 14px; font-weight: 400; color: #222; padding: 14px 18px 16px; text-align: center; border-left: 1px solid #d9dee8; border-bottom: 1px solid #d9dee8; }
.me-ft-spec-2col tbody td { font-size: 14px; color: #222; padding: 14px 18px 16px; border-bottom: 1px solid #d9dee8; }
.me-ft-spec-2col tbody tr:last-child td { border-bottom: none; }
.me-ft-spec-2col tbody td:first-child { font-weight: 600; text-align: center; width: 373px; border-right: none; }
.me-ft-spec-2col tbody td:last-child { text-align: center; border-left: 1px solid #d9dee8; }

/* ---------- ABOUT BOX ---------- */
.me-ft-about-box { background: var(--me-card-bg); border-radius: 40px; padding: 50px; width: 100%; max-width: 1300px; margin-top: 50px; text-align: left; }
.me-ft-about-title { font-size: 32px; font-weight: 400; color: var(--me-blue); margin: 0 0 24px; }
.me-ft-about-desc { font-size: 18px; color: var(--me-dark); line-height: 28px; letter-spacing: 0.72px; margin: 0 0 24px; }

.me-ft-about-features,
.me-ft-about-advantages { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.me-ft-about-features li,
.me-ft-about-advantages li { font-size: 16px; color: var(--me-dark); letter-spacing: 0.28px; padding-left: 32px; position: relative; line-height: 1.6; }
.me-ft-about-features li::before,
.me-ft-about-advantages li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: unset; }
.me-ft-about-features li::after,
.me-ft-about-advantages li::after { content: ''; position: absolute; left: 4px; top: 7px; width: 9px; height: 5px; border-left: 2px solid #FF6A00; border-bottom: 2px solid #FF6A00; transform: rotate(-45deg); }

.me-ft-about-subtitle { font-size: 18px; font-weight: 600; color: var(--me-dark); margin: 16px 0 8px; }

.me-ft-about-text { display: flex; flex-direction: column; gap: 16px; }
.me-ft-about-text p { font-size: 18px; color: var(--me-dark); line-height: 28px; letter-spacing: 0.72px; margin: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1440px) {
    .me-ft-sections { width: 100%; }
}
@media (max-width: 1200px) {
    .me-ft-content-wrapper { border-radius: 80px 80px 0 0; padding: 60px 30px 0; }
    .me-ft-sections { gap: 100px; width: 100%; }
    .me-ft-hero-body { flex-direction: column; }
    .me-ft-spec-table { width: 100%; }
    .me-section-title { font-size: 38px !important; }
}
@media (max-width: 768px) {
    .me-ft-content-wrapper { border-radius: 50px 50px 0 0; padding: 40px 20px 0; }
    .me-ft-sections { gap: 60px; width: 100%; }
    .me-section-title { font-size: 28px !important; white-space: normal; }
    .me-section-header--centered .me-section-title { white-space: normal; }
    .me-ft-about-box { padding: 30px 20px; }
    .me-ft-about-title { font-size: 24px; }
    .me-ft-spec-header { font-size: 16px; }
    .me-ft-cotes-table thead th { font-size: 12px; padding: 10px 12px; }
    .me-ft-cotes-table tbody td { font-size: 12px; padding: 10px 12px; }
    .me-eyebrow-text { font-size: 16px; letter-spacing: 3px; }
}