/* ═══════════════════════════════════════════════════════════════════
   included-excluded.css
   Bloc Services Inclus / Non Inclus avec deux volets (onglets).
   Porté depuis Utlibri : resources/views/new_properties/items/services.blade.php
   Logique onglets : assets/js/properties_product_page/included-excluded.js
   ═══════════════════════════════════════════════════════════════════ */

/* ── Conteneur principal ──────────────────────────────────────────── */
.srv-bloc {
    width: 100%;
}

/* ── Onglets (volets) ─────────────────────────────────────────────── */
.srv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--vp-border);
    margin-bottom: 1.75rem;
}

.srv-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.75rem 1.25rem;
    font-family: var(--vp-font);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--vp-gray);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.srv-tab:hover {
    color: var(--vp-black);
}

.srv-tab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
    transition: color 0.2s;
}

.srv-tab--inclus.srv-tab--active {
    color: #2d6a4f;
    border-bottom-color: #2d6a4f;
    font-weight: 600;
}

.srv-tab--exclus.srv-tab--active {
    color: #9b3a3a;
    border-bottom-color: #9b3a3a;
    font-weight: 600;
}

/* ── Panneaux ──────────────────────────────────────────────────────── */
.srv-panel {
    display: none;
}

.srv-panel--active {
    display: block;
    animation: srvFadeIn 0.25s ease-out;
}

@keyframes srvFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Texte brut ────────────────────────────────────────────────────── */
.srv-text {
    font-family: var(--vp-font);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--vp-black);
    line-height: 1.8;
    margin: 0;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .srv-tab {
        padding: 0.65rem 0.9rem;
        font-size: 0.85rem;
    }
}