/* ==========================================================================
   Page WALL_ter - Styles spécifiques
   Aligné sur le design system homepage : flat, filets, pas de hover
   ========================================================================== */

/* System explanation section */
.system-explained {
    padding: var(--spacing-80) 0;
    background: #F5F3F0;
}

.system-explained__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-60);
    align-items: center;
    margin-top: var(--spacing-60);
}

.system-explained__visual {
    position: relative;
}

.system-explained__visual img {
    width: 100%;
}

.system-explained__content h3 {
    font-size: var(--font-size-x-large);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-20);
}

.system-explained__content p {
    font-size: var(--font-size-medium);
    color: var(--color-dark-gray);
    line-height: 1.8;
    margin-bottom: var(--spacing-20);
}

.system-explained__features {
    margin-top: var(--spacing-30);
}

.system-explained__feature {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-20);
    padding-bottom: var(--spacing-30);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.system-explained__feature:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.system-explained__feature-icon {
    color: var(--color-accent-4);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-xx-large);
}

.system-explained__feature-content h4 {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-10);
}

.system-explained__feature-content p {
    font-size: var(--font-size-medium);
    color: var(--color-dark-gray);
    margin: 0;
}

/* Technical specs accordions */
.tech-specs {
    padding: var(--spacing-80) 0;
}

.tech-specs__accordion {
    margin-top: var(--spacing-40);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.tech-specs__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    background: var(--color-white);
}

.tech-specs__header {
    width: 100%;
    padding: var(--spacing-30) 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tech-specs__header-title {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.tech-specs__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: transform var(--transition-fast);
}

.tech-specs__header[aria-expanded="true"] .tech-specs__icon {
    transform: rotate(-180deg);
}

.tech-specs__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.tech-specs__table-wrapper {
    overflow-x: auto;
}

.tech-specs__table {
    width: 100%;
    border-collapse: collapse;
}

.tech-specs__table th {
    padding: var(--spacing-20) var(--spacing-30);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-medium);
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

.tech-specs__table td {
    padding: var(--spacing-20) var(--spacing-30);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: var(--font-size-medium);
    color: var(--color-dark-gray);
}

/* Installation guide — uses .process__* from style.css */
.installation-guide {
    background: var(--color-white);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .system-explained__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-40);
    }
}