/* ========================================
   DOYA — Composants globaux réutilisables

   Ce fichier porte les composants publics
   mutualisés entre plusieurs pages :
   - card
   - section-header
   - service-feature
   ======================================== */

/* ----------------------------------------
   CARTES
   ---------------------------------------- */

.card {
    position: relative;
    background: var(--card-bg, var(--carbon-300));
    border: var(--card-border, 1px solid var(--carbon-100));
    border-radius: var(--card-radius, var(--border-radius-lg));
    overflow: hidden;
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
    will-change: transform;
    backface-visibility: hidden;
}
.card:hover {
    transform: var(--card-hover-transform, var(--transform-lift));
    box-shadow: var(--card-hover-shadow, var(--shadow-lg));
    border-color: var(--card-hover-border-color, var(--carbon-100));
}

.card--no-border {
    border: none;
}

.card--no-border:hover {
    border-color: transparent;
}

/* ----------------------------------------
   HEADERS DE SECTION
   ---------------------------------------- */

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-section-header);
    max-width: var(--max-width-section);
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------
   SERVICE FEATURE
   ---------------------------------------- */

.service-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    background: var(--service-feature-bg, var(--white));
    border-radius: var(--border-radius-xl);
    border: 1px solid var(--service-feature-border, var(--gray-200));
    box-shadow: var(--service-feature-shadow, 0 20px 60px rgba(0, 0, 0, 0.10));
}

.service-feature__media {
    height: 100%;
    min-height: 400px;
    background-color: var(--service-feature-media-bg, var(--gray-300));
    background-image: var(--service-feature-media-image, none);
    background-size: cover;
    background-position: center;
    position: relative;
}

.service-feature__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: var(--spacing-2xl);
    background: var(--service-feature-content-bg, var(--white));
}

@media (max-width: 1024px) {
    .service-feature--stack-1024 {
        grid-template-columns: 1fr;
    }

    .service-feature--stack-1024 .service-feature__media {
        height: 250px;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .service-feature--stack-768 {
        grid-template-columns: 1fr;
    }

    .service-feature--stack-768 .service-feature__media {
        height: 250px;
        min-height: auto;
    }
}