/* ══════════════════════════════════════════════════════════════════════════════
   HOME-MOBILE.CSS — Styles mobile-only pour index.html
   Moulin Jérémie Paysage — Isère (38)

   Chargé APRÈS style.css + robot-section.css → surcharge les breakpoints existants.
   Tout ici est wrappé dans @media (max-width: …).
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── Masquer les formules pricing sur TOUTES les tailles d'écran (index.html only) ── */
.robot-pricing-section {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE STICKY BAR — base (hidden on desktop, visible via media query)
   ═══════════════════════════════════════════════════════════════ */
.mobile-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    background: rgba(7, 10, 8, 0.95);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid rgba(200, 164, 92, 0.1);
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
}

.mobile-bar__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55rem 0.25rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 0.2s;
}

.mobile-bar__btn svg {
    flex-shrink: 0;
}

.mobile-bar__btn--tel {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.mobile-bar__btn--tel:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-bar__btn--wa {
    color: #25d366;
    background: rgba(37, 211, 102, 0.08);
}

.mobile-bar__btn--wa:hover {
    background: rgba(37, 211, 102, 0.15);
}

.mobile-bar__btn--cta {
    color: var(--forest);
    background: var(--gold);
    font-weight: 800;
    flex: 1.6;
    box-shadow: 0 2px 12px rgba(200, 164, 92, 0.3);
}

.mobile-bar__btn--cta:hover {
    background: var(--gold-light);
    box-shadow: 0 4px 16px rgba(200, 164, 92, 0.4);
}


/* ── \u00c9l\u00e9ments mobile-only masqu\u00e9s sur desktop ── */
.mob-quick-contact { display: none; }
.mob-contact-reassure { display: none; }
.services-swipe-hint { display: none; }
.services-dots { display: none; }
.mob-carousel-dots { display: none; }


/* ── Anti-d\u00e9bordement + confort global (\u2264 900px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */

@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;
    }
}


/* ── Tablet / Mobile  (≤ 768px) ──────────────────────────────────────────── */

@media (max-width: 768px) {

    /* ══════════════════════════════════════════════════════════
       Header — fix mobile (toujours visible)
       ══════════════════════════════════════════════════════════ */

    .site-header.header-hidden {
        transform: none;
    }

    .hamburger {
        position: relative;
        z-index: 1002;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links.show {
        inset: auto;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        z-index: 1001;
    }


    /* ══════════════════════════════════════════════════════════
       Promo banner — compact mobile
       ══════════════════════════════════════════════════════════ */

    .promo-banner {
        padding: .45rem .75rem;
    }

    .promo-text {
        font-size: .72rem;
        line-height: 1.3;
    }


    /* ══════════════════════════════════════════════════════════
       HERO — compact + centré (override #hero de style.css)
       ══════════════════════════════════════════════════════════ */

    #hero {
        min-height: auto;
        min-height: unset;
        padding: calc(var(--header-h, 72px) + 1.5rem) 16px 2rem;
        display: flex;
        align-items: flex-start;
    }

    #hero .container {
        width: 100%;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-badge {
        font-size: .68rem;
        padding: .35rem .9rem;
        margin-bottom: 1rem;
    }

    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        text-align: center;
        line-height: 1.12;
        margin-bottom: 1rem;
    }

    .hero-title em {
        display: inline;
    }

    .hero-subtitle--desktop {
        display: none !important;
    }

    .hero-subtitle--mobile {
        display: block !important;
    }

    .hero-subtitle {
        font-size: .92rem;
        line-height: 1.55;
        max-width: 280px;
        text-align: center;
        margin-bottom: 1.5rem;
        margin-left: auto;
        margin-right: auto;
        color: rgba(255, 255, 255, 0.85);
        letter-spacing: 0.01em;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: .6rem;
        margin-bottom: 1.25rem;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        font-size: .88rem;
    }

    .hero-trust {
        justify-content: center;
        text-align: center;
        margin-top: .75rem;
        gap: .5rem;
    }

    .hero-trust-stars {
        font-size: 1rem;
    }

    .hero-trust-text {
        font-size: .8rem;
    }

    /* Cacher l'indicateur de scroll (déjà fait dans style.css mais on renforce) */
    .hero-scroll-indicator {
        display: none !important;
    }

    /* Couches décoratives : réduire */
    .hero-bg {
        inset: -10px;
    }


    /* ══════════════════════════════════════════════════════════
       Trust bar — 2×2 compact
       ══════════════════════════════════════════════════════════ */

    .trust-bar {
        padding: 1.5rem 16px;
    }

    .trust-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1rem;
    }

    .trust-divider {
        display: none;
    }

    .trust-item:last-child {
        display: none;
    }

    .trust-number {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .trust-label {
        font-size: .72rem;
        letter-spacing: .06em;
    }

    .trust-plus,
    .trust-percent,
    .trust-unit {
        font-size: clamp(1.1rem, 3vw, 1.5rem);
    }


    /* ══════════════════════════════════════════════════════════
       Sections — padding compact
       ══════════════════════════════════════════════════════════ */

    .section {
        padding: clamp(40px, 8vw, 60px) 0;
    }

    .section-header {
        margin-bottom: 1.5rem;
    }

    .section-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .section-intro {
        font-size: .88rem;
        line-height: 1.55;
    }

    .section-tag {
        font-size: .68rem;
    }


    /* ══════════════════════════════════════════════════════════
       Services — Carousel scroll-snap manuel (swipe horizontal)
       ══════════════════════════════════════════════════════════ */

    .services-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 0 4px 1rem;
        scrollbar-width: none;
    }

    .services-grid::-webkit-scrollbar {
        display: none;
    }

    .services-grid .svc-card {
        flex: 0 0 80vw;
        max-width: 80vw;
        scroll-snap-align: center;
    }

    .svc-card-img {
        aspect-ratio: 16 / 9;
    }

    .svc-card-body {
        padding: 1.1rem;
    }

    .svc-card-body h3 {
        font-size: 1.1rem;
        margin-bottom: .5rem;
    }

    .svc-card-body p {
        font-size: .82rem;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .svc-tags {
        gap: .35rem;
    }

    .svc-tags span {
        font-size: .65rem;
        padding: .2rem .55rem;
    }

    .svc-card-overlay {
        opacity: 0;
    }

    /* ── Hero cards mobile ── */
    .svc-card--hero {
        min-height: 320px;
    }

    .svc-card__cta {
        opacity: 1;
        transform: translateY(0);
    }

    .svc-card--hero::before {
        transform: scaleX(1);
    }

    .svc-card__content {
        padding: 1.5rem 1.25rem;
    }

    /* Hint swipe — incite à glisser */
    .services-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        margin-top: .75rem;
        color: var(--forest, #1a2e12);
        opacity: .55;
        font-size: .75rem;
        font-weight: 500;
        animation: hintPulse 2s ease-in-out infinite;
    }

    .services-swipe-hint svg {
        animation: hintSlide 1.5s ease-in-out infinite;
    }

    /* Dots pour services */
    .services-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: .75rem;
    }

    .services-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--forest, #1a2e12);
        opacity: .4;
        border: 1px solid rgba(0, 0, 0, .08);
        padding: 0;
        cursor: pointer;
        transition: all .3s ease;
    }

    .services-dot--active {
        opacity: 1;
        width: 24px;
        height: 10px;
        border-radius: 5px;
        background: var(--gold, #c8a45c);
    }


    /* ══════════════════════════════════════════════════════════
       Citation parallaxe — compact
       ══════════════════════════════════════════════════════════ */

    .quote-parallax {
        min-height: 250px;
        padding: 3rem 16px;
    }

    .quote-text {
        font-size: clamp(1.15rem, 4vw, 1.6rem);
        line-height: 1.35;
    }

    .quote-author {
        font-size: .8rem;
    }


    /* ══════════════════════════════════════════════════════════
       Portfolio — Carousel automatique avec dots
       ══════════════════════════════════════════════════════════ */

    .portfolio-filters {
        display: none;
    }

    .portfolio-grid {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .portfolio-item {
        display: none;
        width: 100%;
    }

    .portfolio-showmore-wrap {
        display: none !important;
    }

    .portfolio-item.mob-carousel-active {
        display: block;
        animation: mobCarouselIn .4s ease forwards;
    }

    .portfolio-item.mob-carousel-out {
        display: block;
        animation: mobCarouselOut .35s ease forwards;
    }

    .portfolio-item--large {
        grid-column: span 1;
    }

    .portfolio-image {
        aspect-ratio: 16 / 10;
        border-radius: 14px;
        overflow: hidden;
    }

    .portfolio-info {
        transform: translateY(0);
        padding: 1rem;
    }

    .portfolio-info h3 {
        font-size: .95rem;
    }

    .portfolio-info p {
        font-size: .72rem;
    }

    .portfolio-cta {
        padding-top: 1.5rem;
    }

    .portfolio-cta-text {
        font-size: clamp(1.05rem, 4vw, 1.4rem);
        margin-bottom: 1rem;
    }

    /* Dots carousel (partagés portfolio + avis) */
    .mob-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 1rem;
    }

    .mob-carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--forest, #1a2e12);
        opacity: .4;
        border: 1px solid rgba(255, 255, 255, .15);
        padding: 0;
        cursor: pointer;
        transition: all .3s ease;
    }

    .mob-carousel-dot--active {
        opacity: 1;
        width: 24px;
        height: 10px;
        border-radius: 5px;
        background: var(--gold, #c8a45c);
        border-color: rgba(255, 255, 255, .25);
    }


    /* ══════════════════════════════════════════════════════════
       Robot section (dans index.html) — compact mobile
       ══════════════════════════════════════════════════════════ */

    .robot-section {
        padding: clamp(40px, 8vw, 60px) 0;
    }

    .robot-header {
        margin-bottom: 2rem;
    }

    .robot-main-title {
        font-size: clamp(1.5rem, 5vw, 2.2rem);
        line-height: 1.2;
    }

    .robot-main-subtitle {
        font-size: .88rem;
        line-height: 1.5;
    }

    .robot-tag {
        font-size: .7rem;
        padding: 8px 16px;
        margin-bottom: 1rem;
    }

    .robot-split-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .robot-visual-section {
        position: relative;
        top: 0;
    }

    /* Badges flottants → pyramide inversée (2 haut, 1 bas centré) */
    .robot-main-visual {
        padding: 16px;
        border-radius: 16px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .robot-image-container {
        border-radius: 12px;
        min-height: 200px;
        width: 100%;
        flex-shrink: 0;
    }

    .robot-image-placeholder svg {
        width: 60px;
        height: 60px;
    }

    .robot-image-placeholder span {
        font-size: .75rem;
    }

    .robot-floating-badge {
        position: relative;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-flex;
        margin: 0;
        padding: 8px 14px;
        border-radius: 10px;
        font-size: .8rem;
        flex: 0 0 auto;
    }

    /* 3e badge → seul sur sa ligne, centré */
    .robot-floating-badge.robot-badge-3 {
        flex-basis: auto;
    }

    .robot-floating-badge strong {
        font-size: .75rem;
    }

    .robot-floating-badge span {
        font-size: .62rem;
    }

    .robot-quick-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 1rem;
    }

    .quick-stat-item {
        padding: 12px 8px;
        border-radius: 10px;
    }

    .stat-value {
        font-size: 1.3rem;
        margin-bottom: 4px;
    }

    .stat-label {
        font-size: .6rem;
    }

    /* Benefits grid compact — 2×2 sur mobile */
    .robot-benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 1.5rem;
    }

    .benefit-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: .9rem .7rem;
        border-radius: 14px;
        gap: .5rem;
        min-height: 0;
    }

    .benefit-icon-wrapper {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin: 0 0 2px;
        border-radius: 10px;
    }

    .benefit-icon-wrapper svg {
        width: 18px;
        height: 18px;
    }

    .benefit-content h3 {
        font-size: .82rem;
        margin-bottom: 3px;
        line-height: 1.25;
    }

    .benefit-content p {
        font-size: .72rem;
        line-height: 1.4;
        opacity: .8;
    }

    /* Pricing section — masquée via règle globale au-dessus */

    /* CTAs robot section */
    .robot-cta-buttons {
        flex-direction: column;
        gap: .6rem;
    }

    .robot-cta-buttons .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }


    /* ══════════════════════════════════════════════════════════
       Témoignages — Carousel automatique avec dots
       ══════════════════════════════════════════════════════════ */

    .testimonials-grid {
        display: block;
        position: relative;
        min-height: 200px;
        overflow: hidden;
    }

    .testimonial {
        display: none;
        width: 100%;
        padding: 1.25rem;
        border-radius: 14px;
    }

    .testimonial.mob-carousel-active {
        display: block;
        animation: mobCarouselIn .4s ease forwards;
    }

    .testimonial.mob-carousel-out {
        display: block;
        animation: mobCarouselOut .35s ease forwards;
    }

    .testimonial-stars {
        font-size: .82rem;
        margin-bottom: .6rem;
    }

    .testimonial-quote {
        font-size: .85rem;
        line-height: 1.5;
        margin-bottom: 1rem;
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .testimonial-author {
        padding-top: .75rem;
        gap: .6rem;
    }

    .author-avatar {
        width: 36px;
        height: 36px;
        font-size: .75rem;
    }

    .author-name {
        font-size: .82rem;
    }

    .author-details {
        font-size: .68rem;
    }

    .testimonials-cta {
        margin-top: .5rem;
    }

    .google-reviews-link {
        padding: .75rem 1.2rem;
        border-radius: 12px;
        gap: .5rem;
    }

    .google-reviews-link svg {
        width: 18px;
        height: 18px;
    }

    .google-reviews-text > span:first-child {
        font-size: .8rem;
    }

    .google-rating {
        font-size: .75rem;
    }


    /* ══════════════════════════════════════════════════════════
       À propos — 1 colonne, photo 16/10
       ══════════════════════════════════════════════════════════ */

    .about-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .about-photo img {
        aspect-ratio: 16 / 10;
        border-radius: 16px;
    }

    .about-badge {
        bottom: auto;
        top: .75rem;
        right: .75rem;
        padding: .5rem .8rem;
        border-radius: 8px;
    }

    .badge-number {
        font-size: 1.4rem;
    }

    .badge-region {
        font-size: .6rem;
    }

    .about-content .section-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        text-align: center;
    }

    .about-content .section-tag {
        text-align: center;
        display: block;
    }

    .about-lead {
        font-size: .92rem !important;
        line-height: 1.6 !important;
        text-align: center;
    }

    /* Desktop / Mobile texte toggle */
    .about-text--desktop {
        display: none;
    }

    .about-text--mobile {
        display: block;
    }

    .about-text--mobile .about-lead {
        text-align: center;
        margin-bottom: 1.25rem !important;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Checklist ✅ */
    .about-checklist {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem 0;
        display: flex;
        flex-direction: column;
        gap: .75rem;
    }

    .about-checklist li {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        font-size: .88rem;
        line-height: 1.5;
        color: rgba(255, 255, 255, .88);
    }

    .about-checklist li::before {
        content: '\2705';
        flex-shrink: 0;
        font-size: .95rem;
        margin-top: .05rem;
    }

    .about-cta-text {
        text-align: center;
        font-size: .88rem !important;
        line-height: 1.55 !important;
        color: rgba(255, 255, 255, .85) !important;
        margin-top: .5rem;
    }

    .about-cta-text strong {
        color: var(--gold) !important;
        font-size: .95rem;
    }

    .about-content p {
        font-size: .88rem;
        line-height: 1.55;
        text-align: center;
    }

    /* Valeurs — design créatif cards dégradées */
    .about-values {
        gap: 1rem;
        margin-top: 2rem;
    }

    .value-item {
        position: relative;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1.25rem 1.25rem 1.25rem 1rem;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(140,179,105,.08) 0%, rgba(200,164,92,.06) 100%);
        border: 1px solid rgba(140,179,105,.15);
        overflow: hidden;
    }

    .value-item::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,164,92,.12), transparent 70%);
        pointer-events: none;
    }

    .value-item:nth-child(2) {
        background: linear-gradient(135deg, rgba(200,164,92,.08) 0%, rgba(26,46,18,.05) 100%);
        border-color: rgba(200,164,92,.15);
    }

    .value-item:nth-child(2)::before {
        background: radial-gradient(circle, rgba(140,179,105,.12), transparent 70%);
        top: auto;
        bottom: -20px;
        right: auto;
        left: -20px;
    }

    .value-item:nth-child(3) {
        background: linear-gradient(135deg, rgba(26,46,18,.06) 0%, rgba(181,216,154,.08) 100%);
        border-color: rgba(181,216,154,.15);
    }

    .value-item:nth-child(3)::before {
        background: radial-gradient(circle, rgba(26,46,18,.1), transparent 70%);
    }

    .about-values .value-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--forest, #1a2e12), rgba(140,179,105,.8));
        color: white;
    }

    .value-item:nth-child(2) .value-icon {
        background: linear-gradient(135deg, var(--gold, #c8a45c), rgba(200,164,92,.7));
    }

    .value-item:nth-child(3) .value-icon {
        background: linear-gradient(135deg, var(--leaf, #8cb369), rgba(181,216,154,.8));
    }

    .about-values .value-icon svg {
        width: 24px;
        height: 24px;
        color: white;
    }

    .value-text {
        flex: 1;
    }

    .value-text strong {
        font-size: 1rem;
        text-align: left;
        display: block;
        margin-bottom: .2rem;
        color: var(--text-light, #f5f2ed);
    }

    .value-text p {
        font-size: .82rem;
        text-align: left;
        line-height: 1.45;
        opacity: .8;
    }


    /* ══════════════════════════════════════════════════════════
       Zone d'intervention — compact mobile
       ══════════════════════════════════════════════════════════ */

    .zone-map {
        height: 260px;
        border-radius: 14px;
    }

    .zone-map::after {
        border-radius: 14px;
    }

    #zoneMap {
        border-radius: 14px;
    }

    .zone-recenter {
        bottom: 8px;
        right: 8px;
        font-size: .7rem;
        padding: .35rem .7rem;
    }

    .zone-badge,
    .zone-rayon {
        font-size: .75rem;
        padding: .45rem .9rem;
    }

    .zone-villes {
        padding: 1.1rem;
        border-radius: 14px;
    }

    .zone-villes-label {
        font-size: .72rem;
        text-align: center;
    }

    .zone-pills {
        justify-content: center;
        gap: .4rem;
    }

    .commune-pill {
        font-size: .7rem;
        padding: .35rem .7rem;
    }

    .commune-pill::before {
        width: 5px;
        height: 5px;
    }

    .zone-note {
        font-size: .75rem;
        text-align: center;
    }


    /* ══════════════════════════════════════════════════════════
       FAQ — compact, 3 visibles + "voir plus"
       ══════════════════════════════════════════════════════════ */

    .faq-list {
        gap: .5rem;
    }

    .faq-item {
        border-radius: 10px;
    }

    /* Masquer les questions au-delà de 3 par défaut */
    .faq-item:nth-child(n+4) {
        display: none;
    }

    .faq-item.faq-show {
        display: block;
    }

    .faq-question {
        padding: 1rem 2.5rem 1rem 1rem;
        font-size: .85rem;
    }

    .faq-question::before,
    .faq-question::after {
        right: 1rem;
    }

    .faq-answer {
        padding: 0 1rem 1rem;
        font-size: .82rem;
        line-height: 1.55;
    }

    /* Bouton "Voir plus" — injecté via JS */
    .faq-show-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        width: 100%;
        padding: .8rem;
        margin-top: .5rem;
        background: rgba(140, 179, 105, 0.1);
        border: 1px solid rgba(140, 179, 105, 0.2);
        border-radius: 10px;
        color: var(--leaf, #8cb369);
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
        transition: background .2s ease;
    }

    .faq-show-more:hover {
        background: rgba(140, 179, 105, 0.18);
    }


    /* ══════════════════════════════════════════════════════════
       Contact — mobile-first, friction minimale
       ══════════════════════════════════════════════════════════ */

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Boutons rapides contact — injectés par JS au-dessus du formulaire */
    .mob-quick-contact {
        display: flex;
        gap: .5rem;
        margin-bottom: .75rem;
    }

    .mob-quick-contact a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 50px;
        padding: .75rem .5rem;
        border-radius: 12px;
        font-size: .85rem;
        font-weight: 600;
        text-decoration: none;
        transition: transform .15s ease;
    }

    .mob-quick-contact a:active {
        transform: scale(.97);
    }

    .mob-quick-contact .mob-qc-call {
        background: var(--forest, #1a2e12);
        color: white;
    }

    .mob-quick-contact .mob-qc-wa {
        background: #25d366;
        color: white;
    }

    .mob-quick-contact a svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Message rassurance mobile */
    .mob-contact-reassure {
        text-align: center;
        font-size: .78rem;
        font-weight: 600;
        color: var(--forest, #1a2e12);
        opacity: .7;
        padding: .3rem 0 .5rem;
    }

    .mob-contact-reassure strong {
        color: var(--gold, #c8a45c);
    }

    /* Info cards — bandeau horizontal compact */
    .contact-info-column {
        display: flex;
        overflow-x: auto;
        gap: .5rem;
        padding-bottom: .5rem;
        scrollbar-width: none;
    }

    .contact-info-column::-webkit-scrollbar {
        display: none;
    }

    .info-card {
        flex: 0 0 auto;
        min-width: 130px;
        padding: .65rem .75rem;
        border-radius: 10px;
        gap: .4rem;
    }

    .info-icon {
        font-size: 1.1rem;
    }

    .info-text strong {
        font-size: .68rem;
    }

    .info-text span,
    .info-text a {
        font-size: .72rem;
    }

    .info-subtext {
        display: none;
    }

    .contact-social {
        display: none;
    }

    /* Formulaire compact */
    .contact-form-column {
        padding: 1.25rem;
        border-radius: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: .6rem;
        margin-bottom: .6rem;
    }

    .form-field {
        margin-bottom: .6rem;
    }

    .form-field label {
        font-size: .75rem;
        margin-bottom: .35rem;
    }

    /* 16px = empêche le zoom iOS */
    .form-field input,
    .form-field select,
    .form-field textarea {
        padding: .75rem .85rem;
        font-size: 16px;
        border-radius: 10px;
        min-height: 46px;
    }

    .form-field textarea {
        min-height: 90px;
    }

    /* Upload masqué sur mobile */
    .file-upload-label {
        display: none;
    }

    .contact-form button[type="submit"] {
        min-height: 50px;
        font-size: .95rem;
        font-weight: 700;
        border-radius: 10px;
    }

    .form-legal {
        font-size: .65rem;
    }

    /* Toast de redirection robot */
    .mob-redirect-toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        background: var(--forest, #1a2e12);
        color: white;
        padding: 1.5rem 2rem;
        border-radius: 16px;
        text-align: center;
        max-width: 320px;
        box-shadow: 0 12px 40px rgba(0,0,0,.3);
        animation: toastIn .35s ease;
    }

    .mob-redirect-toast p {
        font-size: .88rem;
        line-height: 1.5;
        margin: 0 0 .25rem;
    }

    .mob-redirect-toast small {
        font-size: .75rem;
        opacity: .7;
    }

    .mob-redirect-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 9998;
        animation: toastFade .3s ease;
    }

    @keyframes toastIn {
        from { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes toastFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }


    /* ══════════════════════════════════════════════════════════
       Footer — compact, centré
       ══════════════════════════════════════════════════════════ */

    .site-footer {
        padding: 2rem 16px 1.5rem;
        padding-bottom: calc(1.5rem + 56px + env(safe-area-inset-bottom));
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .footer-col--brand {
        grid-column: 1;
    }

    .footer-col--brand .footer-logo {
        justify-content: center;
    }

    .footer-col h4 {
        font-size: .75rem;
        margin-bottom: .6rem;
    }

    .footer-links {
        align-items: center;
        gap: .4rem;
    }

    .footer-links a {
        font-size: .78rem;
    }

    .footer-contact {
        align-items: center;
        gap: .5rem;
    }

    .footer-contact-link {
        font-size: .78rem;
    }

    .footer-bottom {
        padding-top: 1.25rem;
        gap: .4rem;
    }

    .footer-copyright,
    .footer-legal,
    .footer-links-legal {
        font-size: .7rem;
    }




    /* ══════════════════════════════════════════════════════════
       Scroll-to-top — repositionner au-dessus de la barre
       ══════════════════════════════════════════════════════════ */

    .scroll-top-btn {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 14px);
        right: 16px;
        width: 42px;
        height: 42px;
    }

    .scroll-top-btn svg {
        width: 20px;
        height: 20px;
    }




    /* ══════════════════════════════════════════════════════════
       Boutons — tap-friendly (min 44px)
       ══════════════════════════════════════════════════════════ */

    .btn {
        min-height: 44px;
        padding: .7rem 1.4rem;
        font-size: .85rem;
    }

    .btn--lg {
        min-height: 48px;
        padding: .85rem 1.8rem;
        font-size: .88rem;
    }

    .btn--sm {
        min-height: 40px;
        padding: .45rem 1rem;
        font-size: .75rem;
    }

    /* Active state pour le tactile */
    .btn:active {
        transform: scale(.97);
        transition: transform .1s ease;
    }


    /* ══════════════════════════════════════════════════════════
       Animations — réduire sur mobile
       ══════════════════════════════════════════════════════════ */

    [data-reveal] {
        transform: translateY(20px);
    }

    /* Benefit cards — pas d'animation individuelle sur mobile (apparaissent d'un bloc) */
    .benefit-card[data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Désactiver hover transforms sur mobile */
    .svc-card:hover,
    .testimonial:hover,
    .info-card:hover,
    .benefit-card:hover,
    .pricing-plan:hover,
    .value-item:hover {
        transform: none;
    }

    /* ══════════════════════════════════════════════════════════
       Mobile bar — intelligent (show on scroll, hide near contact)
       ══════════════════════════════════════════════════════════ */

    /* 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 #contact est en vue — barre disparaît vers le bas */
    .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;
    }
}


/* ── Très petit écran (≤ 480px) ───────────────────────────────────────────── */

@media (max-width: 480px) {

    /* Hero encore plus compact */
    #hero {
        padding: calc(var(--header-h, 72px) + 1rem) 12px 1.5rem;
    }

    .hero-title {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    .hero-subtitle {
        font-size: .82rem;
        -webkit-line-clamp: 2;
    }

    .hero-badge {
        font-size: .62rem;
        padding: .3rem .7rem;
    }

    /* Trust bar */
    .trust-number {
        font-size: 1.4rem;
    }

    .trust-label {
        font-size: .62rem;
    }

    /* Section titles */
    .section-title {
        font-size: clamp(1.35rem, 6vw, 1.8rem);
    }

    /* Services (old cards) */
    .svc-card-body h3 {
        font-size: .95rem;
    }

    .svc-card-body p {
        font-size: .78rem;
        -webkit-line-clamp: 2;
    }

    /* Services (hero cards) */
    .svc-card--hero {
        min-height: 280px;
    }

    .svc-card__title {
        font-size: 1.2rem;
    }

    .svc-card__desc {
        font-size: .82rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .svc-card__chips {
        gap: .35rem;
    }

    .svc-chip {
        font-size: .65rem;
        padding: .25rem .6rem;
    }

    /* Robot section */
    .robot-main-title {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
    }

    .robot-quick-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .stat-label {
        font-size: .55rem;
    }

    /* Benefits grid — 2×2 compact sur petit écran, masque descriptions */
    .robot-benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .benefit-card {
        padding: .7rem .5rem;
        gap: .35rem;
    }

    .benefit-icon-wrapper {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    .benefit-content p {
        display: none;
    }

    .benefit-content h3 {
        font-size: .78rem;
    }

    /* Témoignages */
    .testimonial-quote {
        -webkit-line-clamp: 3;
    }

    /* Contact : info cards empilées */
    .contact-info-column {
        flex-direction: column;
    }

    .info-card {
        min-width: auto;
    }

    /* Quick contact : empilé */
    .mob-quick-contact {
        flex-direction: column;
    }

    /* About */
    .about-content .section-title {
        font-size: clamp(1.3rem, 6vw, 1.7rem);
    }

    .about-lead {
        font-size: .85rem !important;
    }

    .about-content p {
        font-size: .82rem;
    }

    /* Services carousel — cards plus petites */
    .services-grid .svc-card {
        flex: 0 0 85vw;
        max-width: 85vw;
    }

    /* Footer */
    .footer-col h4 {
        font-size: .7rem;
    }

    .footer-links a {
        font-size: .72rem;
    }
}


/* ── Keyframes — Carousels mobile ──────────────────────────────────────── */

@keyframes mobCarouselIn {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes mobCarouselOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-30px); }
}

@keyframes hintPulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: .85; }
}

@keyframes hintSlide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}