/* ============================================================
   COMMENT ÇA MARCHE — scroll horizontal mobile (2 visibles)
   ============================================================ */

/* Desktop : grille 4 colonnes normale */
.pub-steps {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.6vw, 24px) !important;
}

/* Tablette : 2 colonnes */
@media (max-width: 900px) {
    .pub-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }
}

/* MOBILE : scroll horizontal, ~2 visibles */
@media (max-width: 640px) {
    .pub-steps {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 12px !important;
        padding: 12px 4px 20px !important;
        margin: 0 -16px !important;
        padding-inline: 16px !important;

        /* Scroll fluide iOS */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .pub-steps::-webkit-scrollbar {
        display: none;
    }

    .pub-step {
        flex: 0 0 calc(50% - 6px) !important;   /* 2 visibles */
        min-width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        scroll-snap-align: start;
        padding: 24px 16px !important;
        box-sizing: border-box !important;
    }

    .pub-step h3 {
        font-size: 13.5px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
    }
    .pub-step p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    .pub-step-icon {
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
        margin: 6px auto 12px !important;
    }
    .pub-step-num {
        width: 28px !important;
        height: 28px !important;
        font-size: 12.5px !important;
        top: -12px !important;
    }
}

@media (max-width: 380px) {
    .pub-step {
        flex: 0 0 calc(55% - 6px) !important;
        min-width: calc(55% - 6px) !important;
        max-width: calc(55% - 6px) !important;
        padding: 20px 14px !important;
    }
}

/* ============================================================
   PRIX SUR 1 LIGNE + CATÉGORIE EN DESSOUS
   ============================================================ */

/* Force le pied de carte en colonne : prix ligne 1, catégorie ligne 2 */
.pub-service-foot {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding-top: 10px !important;
    margin-top: auto !important;
    border-top: 1px solid var(--pub-border, #E2E8F0) !important;
    width: 100% !important;
}

/* Prix : toujours sur 1 ligne, jamais coupé */
.pub-service-price {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--pub-primary, #C2410C) !important;
    width: 100% !important;
    line-height: 1.3 !important;
}

/* Catégorie : ligne suivante */
.pub-service-cat {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    color: #94A3B8 !important;
    width: 100% !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

/* Sur tablette / mobile : réduire encore si nécessaire */
@media (max-width: 640px) {
    .pub-service-price {
        font-size: 12.5px !important;
    }
    .pub-service-cat {
        font-size: 10.5px !important;
    }
}

@media (max-width: 380px) {
    .pub-service-price {
        font-size: 11.5px !important;
        letter-spacing: -.2px !important;
    }
    .pub-service-cat {
        font-size: 10px !important;
    }
}

/* ============================================================
   S'assurer que les autres prix (similaires, comparatifs) suivent
   ============================================================ */
.pub-similar-card span {
    white-space: nowrap !important;
}

/* ============================================================
   Section "Comment ça marche" — scroll horizontal indicateur
   ============================================================ */
@media (max-width: 640px) {
    .pub-section[id="how"] .pub-container {
        overflow: hidden;
    }
    /* Petit indicateur "swipe" sous les étapes */
    .pub-section[id="how"] .pub-steps::after {
        content: '';
        flex: 0 0 1px;
    }
}