/* ═══════════════════════════════════════════════════════════════
   SERVICES-MOBILE.CSS — Mobile-only overrides
   Moulin Jérémie Paysage — Isère (38)
   Loaded AFTER services-page.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Anti-débordement + confort global (≤ 900px) ──────────── */
@media (max-width: 900px) {
    html, body { overflow-x: hidden; }
    .container { padding-left: 16px; padding-right: 16px; }
    img, video, iframe, svg { max-width: 100%; height: auto; }
    html { scroll-padding-top: 90px; }

    .srv-cards {
        grid-template-columns: 1fr 1fr;
    }

    .srv-top-requests {
        grid-template-columns: 1fr 1fr;
    }

    .srv-catalogue-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .srv-catalogue-search {
        flex: 1 1 100%;
    }
}

/* ── Tablet / Mobile (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {

    /* ─── HEADER COMPACT ─── */
    :root {
        --header-h: 56px;
    }

    .site-header {
        height: 56px;
    }

    .site-header .container {
        padding: 0 12px;
    }

    .nav-logo img {
        width: 32px;
        height: 32px;
    }

    .nav-logo {
        gap: 8px;
    }

    .nav-logo-name {
        font-size: 0.92rem;
    }

    .nav-logo-tagline {
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .hamburger {
        padding: 6px;
        z-index: 1002;
        position: relative;
    }

    .hamburger span {
        width: 22px;
    }

    /* ─── MENU MOBILE FULLSCREEN (même style que index) ─── */
    .nav-links.show {
        inset: auto;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 1001;
        background: rgba(7, 10, 8, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
    }

    .nav-links.show a {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-light, #f5f2ed);
        padding: 0.6rem 0;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .nav-links.show a:hover,
    .nav-links.show a.active {
        color: var(--gold, #c8a45c);
    }

    html {
        scroll-padding-top: 72px;
    }

    /* ─── MOBILE BAR — intelligent (show on scroll, hide near footer-cta) ─── */

    /* Barre — cachée par défaut, slide-up via JS */
    .mobile-bar {
        display: flex;
        padding: .6rem 1rem;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
        gap: .6rem;
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
        will-change: transform;
    }

    /* JS ajoute .mobile-bar--visible quand on scroll */
    .mobile-bar--visible {
        transform: translateY(0);
    }

    /* Quand la zone contact/footer est en vue — barre disparaît */
    .mobile-bar--hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    /* Boutons — zones de tap confortables */
    .mobile-bar__btn {
        min-height: 48px;
        padding: .6rem .35rem;
        font-size: .72rem;
        transition: all .25s ease;
    }

    .mobile-bar__btn svg {
        width: 20px;
        height: 20px;
        transition: all .25s ease;
    }

    /* Body padding pour ne pas masquer le contenu sous la barre */
    body {
        padding-bottom: 76px;
    }

    /* ─── HERO — box-sizing + anti-overflow ─── */
    .srv-hero *,
    .srv-hero *::before,
    .srv-hero *::after {
        box-sizing: border-box !important;
    }

    .srv-hero {
        min-height: auto !important;
        padding: calc(var(--header-h) + 0.5rem) 0 0.6rem !important;
        overflow: hidden;
    }

    .srv-hero .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
        overflow: hidden;
    }

    .srv-hero-content {
        max-width: 100% !important;
    }

    .srv-hero-overlay {
        background: linear-gradient(180deg,
            rgba(7, 10, 8, 0.55) 0%,
            rgba(7, 10, 8, 0.7) 35%,
            rgba(7, 10, 8, 0.96) 100%);
    }

    .srv-hero-badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.6rem !important;
        margin-bottom: 0.4rem !important;
        gap: 0.35rem;
    }

    .srv-availability-dot {
        width: 6px;
        height: 6px;
    }

    .srv-hero-title {
        font-size: 1.4rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.25rem !important;
    }

    .srv-hero-sub {
        font-size: 0.78rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3;
    }

    /* ─── HERO CTA — côte à côte ─── */
    .srv-hero-cta {
        flex-direction: row !important;
        gap: 0.4rem !important;
        margin-bottom: 0.5rem !important;
        width: 100%;
    }

    .srv-hero-cta .btn,
    .srv-hero-cta .btn.btn--lg,
    .srv-hero-cta .btn.btn--primary,
    .srv-hero-cta .btn.btn--ghost,
    .srv-hero-cta .btn.btn--primary.btn--lg,
    .srv-hero-cta .btn.btn--ghost.btn--lg {
        flex: 1 !important;
        justify-content: center !important;
        min-height: 40px !important;
        max-height: 40px !important;
        height: 40px !important;
        padding: 0 0.6rem !important;
        font-size: 0.75rem !important;
        gap: 0.3rem !important;
        border-width: 1.5px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .srv-hero-cta .btn svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0;
    }

    /* ─── SERVICE FINDER — masqué sur mobile ─── */
    .srv-finder {
        display: none !important;
    }

    /* ─── BARRE DE RECHERCHE ─── */
    .srv-search-wrap {
        margin-bottom: 0.4rem !important;
        width: 100% !important;
    }

    .srv-search-input {
        padding: 0 2.2rem !important;
        font-size: 16px !important;
        min-height: 42px !important;
        height: 42px !important;
        max-height: 42px !important;
        border-radius: 21px !important;
        width: 100% !important;
    }

    .srv-search-icon svg {
        width: 16px;
        height: 16px;
    }

    /* ─── AUTO-SUGGEST MOBILE ─── */
    .srv-suggest-item {
        padding: 0.55rem 0.75rem;
        gap: 0.5rem;
    }

    .srv-suggest-item__icon {
        width: 28px;
        height: 28px;
    }

    .srv-suggest-item__title {
        font-size: 0.82rem;
    }

    .srv-suggest-item__cat {
        font-size: 0.68rem;
    }

    .srv-suggest-kbd {
        display: none;
    }

    /* ─── TAG CHIPS — scroll horizontal avec animation ─── */
    .srv-tag-chips {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        padding-bottom: 0.15rem;
        gap: 0.25rem !important;
        margin-bottom: 0.5rem !important;
        scroll-behavior: smooth;
    }

    .srv-tag-chips::-webkit-scrollbar {
        display: none;
    }

    .srv-tag-chip {
        flex-shrink: 0;
        font-size: 0.8rem !important;
        padding: 0.3rem 0.7rem !important;
        min-height: 32px !important;
        height: 32px;
        animation: srv-fade-slide-in 0.4s ease both;
    }

    .srv-tag-chip:nth-child(1) { animation-delay: 0.05s; }
    .srv-tag-chip:nth-child(2) { animation-delay: 0.1s; }
    .srv-tag-chip:nth-child(3) { animation-delay: 0.15s; }
    .srv-tag-chip:nth-child(4) { animation-delay: 0.2s; }
    .srv-tag-chip:nth-child(5) { animation-delay: 0.25s; }

    /* ─── PILLS — scroll horizontal avec animation ─── */
    .srv-pills {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        padding-bottom: 0.15rem;
        scrollbar-width: none;
        gap: 0.25rem !important;
        margin-bottom: 0.5rem !important;
        scroll-behavior: smooth;
    }

    .srv-pills::-webkit-scrollbar {
        display: none;
    }

    .srv-pill {
        flex-shrink: 0;
        min-height: 34px !important;
        height: 34px;
        font-size: 0.82rem !important;
        padding: 0.3rem 0.75rem !important;
        animation: srv-fade-slide-in 0.4s ease both;
    }

    .srv-pill:nth-child(1) { animation-delay: 0s; }
    .srv-pill:nth-child(2) { animation-delay: 0.05s; }
    .srv-pill:nth-child(3) { animation-delay: 0.08s; }
    .srv-pill:nth-child(4) { animation-delay: 0.11s; }
    .srv-pill:nth-child(5) { animation-delay: 0.14s; }
    .srv-pill:nth-child(6) { animation-delay: 0.17s; }
    .srv-pill:nth-child(7) { animation-delay: 0.2s; }
    .srv-pill:nth-child(8) { animation-delay: 0.23s; }
    .srv-pill:nth-child(9) { animation-delay: 0.26s; }

    /* ─── TOP REQUESTS — scroll horizontal avec animation ─── */
    .srv-top-requests {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0.4rem !important;
        margin-bottom: 0.4rem !important;
        padding-bottom: 0.15rem;
        scroll-behavior: smooth;
    }

    .srv-top-requests::-webkit-scrollbar {
        display: none;
    }

    .srv-top-card {
        flex: 0 0 auto !important;
        min-width: 180px;
        max-width: 220px;
        scroll-snap-align: start;
        padding: 0.45rem 0.6rem !important;
        gap: 0.4rem;
        animation: srv-slide-in-right 0.5s ease both;
    }

    .srv-top-card:nth-child(1) { animation-delay: 0.1s; }
    .srv-top-card:nth-child(2) { animation-delay: 0.25s; }
    .srv-top-card:nth-child(3) { animation-delay: 0.4s; }

    .srv-top-card__icon {
        width: 28px !important;
        height: 28px !important;
    }

    .srv-top-card__icon svg {
        width: 14px !important;
        height: 14px !important;
    }

    .srv-top-card__text strong {
        font-size: 0.8rem !important;
    }

    .srv-top-card__text small {
        font-size: 0.68rem !important;
    }

    .srv-top-card__arrow {
        opacity: 1;
    }

    .srv-top-card__arrow svg {
        width: 12px;
        height: 12px;
    }

    /* ─── MICRO PREUVES — grille 2 colonnes ─── */
    .srv-hero-proofs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.3rem 0.6rem !important;
        margin-top: 0.35rem;
    }

    .srv-proof-item {
        font-size: 0.74rem !important;
        font-weight: 500;
    }

    .srv-proof-item svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* ─── SECTIONS ─── */
    .srv-section {
        padding: clamp(2.5rem, 8vw, 4rem) 0;
    }

    .srv-section .section-title {
        font-size: clamp(1.4rem, 5.5vw, 1.8rem);
    }

    .srv-section .section-title::after {
        width: 36px;
    }

    .srv-section .section-intro {
        font-size: 0.88rem;
    }

    .srv-section .section-header {
        margin-bottom: 1.75rem;
    }

    /* ─── FILTER BAR MOBILE ─── */
    .srv-filter-bar--visible {
        gap: 0.35rem 0.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.76rem;
        margin-bottom: 0.75rem;
    }

    .srv-filter-count {
        font-size: 0.78rem;
        width: 100%;
    }

    .srv-filter-active {
        font-size: 0.72rem;
        width: 100%;
    }

    .srv-filter-clear {
        margin-left: 0;
        font-size: 0.72rem;
    }

    /* ─── CARDS → CAROUSEL MOBILE ─── */
    .srv-cards {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        scrollbar-width: none;
        margin-bottom: 1rem;
    }

    .srv-cards::-webkit-scrollbar {
        display: none;
    }

    .srv-card {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: center;
        padding: 1.4rem 1.1rem 1.2rem;
    }

    .srv-card.is-hidden {
        display: none;
    }

    .srv-card:hover {
        transform: none;
    }

    .srv-card__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 0.75rem;
    }

    .srv-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .srv-card__title {
        font-size: 1rem;
    }

    .srv-card__desc {
        font-size: 0.82rem;
    }

    .srv-card__benefits {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .srv-card__price {
        font-size: 0.62rem;
        padding: 0.2rem 0.5rem;
    }

    .srv-card__chips {
        gap: 0.25rem;
    }

    .srv-chip {
        font-size: 0.65rem;
        padding: 0.25rem 0.55rem;
    }

    .srv-card__actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-top: 0.35rem;
    }

    .srv-card__cta--devis {
        min-height: 44px;
        font-size: 0.82rem;
        padding: 0.5rem 1rem;
        flex: 1 1 100%;
        justify-content: center;
        order: -1;
    }

    .srv-card__cta--voir {
        width: 36px;
        height: 36px;
        margin-left: auto;
        margin-right: auto;
    }

    .srv-card__detail p {
        font-size: 0.78rem;
    }

    .srv-card__badge {
        font-size: 0.58rem;
        padding: 0.15rem 0.5rem;
    }

    /* ─── MODE LISTE : vertical quand filtre/recherche actif ─── */
    .srv-cards--list {
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .srv-cards--list .srv-card {
        flex: 0 0 auto;
        max-width: 100%;
        scroll-snap-align: unset;
    }

    .srv-cards--list ~ .srv-carousel-dots {
        display: none;
    }

    /* ─── CAROUSEL DOTS ─── */
    .srv-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 0.35rem;
        margin-bottom: 1.5rem;
    }

    .srv-carousel-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: rgba(200, 164, 92, 0.2);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .srv-carousel-dot--active {
        background: var(--gold);
        width: 18px;
        border-radius: 4px;
    }

    /* ─── PROCESS ─── */
    .srv-process__line {
        left: 17px;
    }

    .srv-step {
        gap: 1rem;
    }

    .srv-step-num {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .srv-step-content h3 {
        font-size: 0.98rem;
    }

    .srv-step-content p {
        font-size: 0.82rem;
    }

    /* ─── FAQ ─── */
    .srv-faq-item summary {
        padding: 0.95rem 1.1rem;
        font-size: 0.85rem;
        min-height: 44px;
    }

    .srv-faq-item p {
        padding: 0 1.1rem 0.95rem;
        font-size: 0.82rem;
    }

    /* ─── FOOTER CTA ─── */
    .srv-footer-cta__actions {
        flex-direction: column;
        align-items: center;
    }

    .srv-footer-cta__actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    /* ─── MODAL ─── */
    .srv-modal-overlay {
        padding: 0.75rem;
    }

    .srv-modal-dialog {
        padding: 1.75rem 1.25rem;
        max-height: 85vh;
    }

    .srv-modal-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 1rem;
    }

    .srv-modal-title {
        font-size: 1.2rem;
    }

    .srv-modal-subtitle {
        font-size: 0.82rem;
        margin-bottom: 1.25rem;
    }

    .srv-modal-form-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .srv-modal-form input,
    .srv-modal-form select,
    .srv-modal-form textarea {
        padding: 0.7rem 0.9rem;
        font-size: 16px; /* prevent iOS zoom */
        min-height: 46px;
    }

    .srv-modal-trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    /* ─── REDIRECT POPUP ─── */
    .srv-redirect-overlay {
        padding: 0.75rem;
    }

    .srv-redirect-dialog {
        padding: 1.5rem 1.25rem;
    }

    .srv-redirect-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .srv-redirect-actions .btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }

    /* ─── NO RESULTS ─── */
    .srv-no-results-suggestions {
        font-size: 0.8rem;
    }

    .srv-suggestion-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.7rem;
        min-height: 36px;
    }

    /* ─── BOUTONS TACTILES ─── */
    .srv-section .btn {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    .srv-section .btn:active {
        transform: scale(0.965);
    }

    .srv-card:active,
    .srv-top-card:active {
        transform: scale(0.985);
    }

    .srv-pill:active,
    .srv-tag-chip:active,
    .srv-finder-btn:active {
        transform: scale(0.94);
        opacity: 0.8;
    }

    .srv-card__cta--devis:active {
        transform: scale(0.96);
        filter: brightness(0.92);
    }

    .srv-card__cta--voir:active {
        transform: scale(0.9);
        background: rgba(200, 164, 92, 0.12);
    }

    a, button, summary {
        -webkit-tap-highlight-color: transparent;
    }

    /* ─── BOUTON RETOUR EN HAUT au-dessus de la barre mobile ─── */
    #scroll-top {
        bottom: calc(76px + env(safe-area-inset-bottom) + 12px);
        right: 16px;
    }

    /* ─── DERNIÈRE SECTION : padding pour la barre mobile ─── */
    .srv-section:last-of-type {
        padding-bottom: calc(var(--section-py) + 56px);
    }

    /* ─── 8A LUXE MOBILE : lisibilité en extérieur ─── */

    /* 8A-1) Surfaces plus opaques pour la lisibilité en extérieur */
    .srv-finder {
        background: rgba(255, 255, 255, 0.035);
    }

    .srv-finder-btn {
        background: rgba(255, 255, 255, 0.045);
    }

    .srv-tag-chip {
        background: rgba(255, 255, 255, 0.04);
    }

    .srv-card {
        background: rgba(255, 255, 255, 0.035);
    }

    .srv-top-card {
        background: rgba(255, 255, 255, 0.035);
    }

    .srv-faq-item {
        background: rgba(255, 255, 255, 0.035);
    }

    /* 8A-2) Texte secondaire plus lumineux pour le contraste */
    .srv-finder__label,
    .srv-section .section-intro,
    .srv-card__desc,
    .srv-card__benefits li,
    .srv-step-content p,
    .srv-faq-item p {
        color: rgba(245, 242, 237, 0.68);
    }

    .srv-tag-chip,
    .srv-suggest-item__cat,
    .srv-card__price {
        color: rgba(245, 242, 237, 0.65);
    }

    /* 8A-3) Bordures plus subtiles */
    .srv-card {
        border-color: rgba(200, 164, 92, 0.06);
    }

    .srv-top-card {
        border-color: rgba(200, 164, 92, 0.06);
    }

    .srv-faq-item {
        border-color: rgba(200, 164, 92, 0.08);
    }

    /* ─── ANIMATIONS SCROLL MOBILE ─── */

    /* Apparition progressive depuis la droite (pills, chips) */
    @keyframes srv-fade-slide-in {
        0% {
            opacity: 0;
            transform: translateX(18px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Glissement depuis la droite (top cards) */
    @keyframes srv-slide-in-right {
        0% {
            opacity: 0;
            transform: translateX(40px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Apparition douce (cartes catalogue) */
    @keyframes srv-card-appear {
        0% {
            opacity: 0;
            transform: translateX(30px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }

    /* Conteneurs scrollables — flèche sticky à droite */
    .srv-pills::after,
    .srv-top-requests::after,
    .srv-tag-chips::after,
    .srv-cards::after {
        content: '';
        position: sticky;
        right: 0;
        flex-shrink: 0;
        width: 24px;
        min-width: 24px;
        height: 24px;
        align-self: center;
        background: var(--gold, #c8a45c);
        pointer-events: none;
        z-index: 5;
        opacity: 0.85;
        border-radius: 0;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        transition: opacity 0.3s ease;
    }

    /* Cacher la flèche quand l'utilisateur touche cette ligne */
    .srv-swipe-touched::after {
        opacity: 0 !important;
    }

    /* Animation sur le carousel de cartes */
    .srv-cards {
        scroll-behavior: smooth;
    }

    .srv-card {
        animation: srv-card-appear 0.5s ease both;
    }

    .srv-card:nth-child(1) { animation-delay: 0.1s; }
    .srv-card:nth-child(2) { animation-delay: 0.2s; }
    .srv-card:nth-child(3) { animation-delay: 0.3s; }

    /* Indicateur visuel de scroll (dégradé à droite) */
    .srv-pills,
    .srv-top-requests,
    .srv-tag-chips {
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
        mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    }

    /* Retirer le masque quand on a scrollé (via JS ou au focus) */
    .srv-pills:focus-within,
    .srv-top-requests:focus-within,
    .srv-tag-chips:focus-within,
    .srv-pills:active,
    .srv-top-requests:active,
    .srv-tag-chips:active {
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* ── Carte zone FAQ — adaptation mobile ── */
    .srv-faq-map-toggle {
        margin: 0 1rem 0.8rem;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    .srv-faq-zone {
        margin: 0.5rem 0.6rem 1rem;
    }

    .srv-faq-zone .zone-info-bar {
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.6rem 0.8rem;
    }

    .srv-faq-zone .zone-layout {
        flex-direction: column;
    }

    .srv-faq-zone .zone-map,
    .srv-faq-zone #srvZoneMap {
        min-height: 250px;
        height: 250px;
    }

    .srv-faq-zone .zone-villes {
        padding: 0.8rem;
    }

    .srv-faq-zone .zone-pills {
        gap: 0.3rem;
    }

    .srv-faq-zone .commune-pill {
        font-size: 0.72rem;
        padding: 0.3rem 0.6rem;
    }

    .srv-faq-zone .zone-villes-label {
        font-size: 0.75rem;
    }

    .srv-faq-zone .zone-note {
        font-size: 0.7rem;
    }
}

/* ── Petits téléphones (≤ 380px) ────────────────────────────── */
@media (max-width: 380px) {

    .nav-logo-name {
        font-size: 0.82rem;
    }

    .nav-logo-tagline {
        font-size: 0.52rem;
    }

    .nav-logo img {
        width: 28px;
        height: 28px;
    }

    .srv-hero .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .srv-hero-title {
        font-size: 1.25rem !important;
    }

    .srv-hero-sub {
        font-size: 0.72rem !important;
    }

    .srv-hero-badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.5rem !important;
    }

    /* CTA empilés sur très petits écrans */
    .srv-hero-cta {
        flex-direction: column !important;
        gap: 0.3rem !important;
    }

    .srv-hero-cta .btn,
    .srv-hero-cta .btn.btn--lg,
    .srv-hero-cta .btn.btn--primary.btn--lg,
    .srv-hero-cta .btn.btn--ghost.btn--lg {
        font-size: 0.72rem !important;
        min-height: 38px !important;
        max-height: 38px !important;
        height: 38px !important;
        padding: 0 0.5rem !important;
    }

    .srv-hero-cta .btn svg {
        width: 13px !important;
        height: 13px !important;
    }

    .srv-search-input {
        min-height: 38px !important;
        height: 38px !important;
        max-height: 38px !important;
    }

    .srv-section .section-title {
        font-size: 1.3rem;
    }

    .srv-pill {
        font-size: 0.74rem !important;
        padding: 0.25rem 0.6rem !important;
        min-height: 30px !important;
    }

    .srv-tag-chip {
        font-size: 0.72rem !important;
        padding: 0.25rem 0.6rem !important;
        min-height: 28px !important;
    }

    .srv-card {
        flex: 0 0 90%;
        max-width: 90%;
    }

    .srv-top-card {
        min-width: 160px;
        padding: 0.35rem 0.5rem !important;
    }

    .srv-top-card__icon {
        width: 26px !important;
        height: 26px !important;
    }

    .srv-top-card__text strong {
        font-size: 0.74rem !important;
    }

    .srv-top-card__text small {
        font-size: 0.62rem !important;
    }

    .srv-proof-item {
        font-size: 0.66rem !important;
    }

    .srv-hero-proofs {
        gap: 0.2rem 0.5rem !important;
    }

    .srv-proof-item svg {
        width: 11px !important;
        height: 11px !important;
    }
}