/* ================================================================
   responsive.css — Builko Site — Mobile / Tablet / Desktop
   Breakpoints: 480px / 640px / 768px / 900px / 1024px
   ================================================================ */

/* ── Reset helpers ── */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; }

/* navbar styles → navbar.css */

/* ================================================================
   GLOBAL SECTIONS — padding réduit sur mobile
   ================================================================ */
@media (max-width: 768px) {
  section, .section { padding-left: 18px !important; padding-right: 18px !important; }
  .section-header { margin-bottom: 36px !important; }
}
@media (max-width: 480px) {
  section, .section { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ================================================================
   INDEX — HERO
   ================================================================ */
@media (max-width: 768px) {
  #hero {
    padding: 88px 18px 36px !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .hero-content { text-align: center !important; max-width: 100% !important; }
  .hero-badge { font-size: 0.72rem !important; }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
  .hero-sub { font-size: 1rem !important; margin-bottom: 28px !important; }
  .hero-actions { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
  .hero-actions a, .hero-actions button { width: 100% !important; max-width: 320px !important; text-align: center !important; }
  .hero-orbs, .hi-icons, .hero-icons { display: none !important; }
  .scroll-hint { margin-top: 24px !important; }
}

/* ================================================================
   INDEX — SCROLL ANIMATION / FRAME CANVAS (mobile)
   Animation scroll activée sur mobile — cartes repositionnées
   ================================================================ */
@media (max-width: 768px) {
  .scroll-animation { height: 260vh !important; }
  /* Annotation cards : bas de l'écran, pleine largeur */
  .annotation-card {
    left: 14px !important;
    right: 14px !important;
    bottom: 64px !important;
    max-width: none !important;
    padding: 14px 16px !important;
  }
  .annotation-card:nth-child(even) {
    left: 14px !important;
    right: 14px !important;
  }
  .card-title      { font-size: 0.95rem !important; }
  .card-desc       { font-size: 0.78rem !important; margin-bottom: 10px !important; }
  .card-stat-number{ font-size: 1.4rem !important; }
  .phone-mockup-wrap { transform: none !important; position: relative !important; }
}

/* ================================================================
   INDEX — SPECS
   ================================================================ */
@media (max-width: 480px) {
  .specs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .spec-number { font-size: 2.2rem !important; }
}

/* ================================================================
   INDEX — FEATURES GRID
   ================================================================ */
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .feature-card { padding: 22px !important; }
}

/* ================================================================
   INDEX — TESTIMONIALS
   ================================================================ */
@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr !important; }
  .testimonial-featured { grid-column: 1 !important; }
}

/* ================================================================
   INDEX — CTA
   ================================================================ */
@media (max-width: 640px) {
  #cta { padding: 80px 18px !important; }
  .cta-title { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  .cta-actions { flex-direction: column !important; align-items: center !important; }
  .cta-actions a, .cta-actions button { width: 100% !important; max-width: 320px !important; text-align: center !important; }
}

/* ================================================================
   FOOTER
   ================================================================ */
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  footer { padding: 60px 18px 32px !important; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr !important; }
}

/* ================================================================
   IOT-POS — HERO
   ================================================================ */
@media (max-width: 768px) {
  .iot-hero, #iot-hero { padding: 100px 18px 60px !important; text-align: center !important; }
  .iot-hero .hero-icons, .hero-orb { display: none !important; }
}

/* ================================================================
   BTP — HERO
   ================================================================ */
@media (max-width: 768px) {
  .btp-hero { padding: 100px 18px 60px !important; min-height: auto !important; }
}

/* ================================================================
   PEPPOL — HERO
   ================================================================ */
@media (max-width: 768px) {
  .peppol-hero { padding: 100px 18px 60px !important; min-height: auto !important; }
}

/* ================================================================
   CONTACT — HERO
   ================================================================ */
@media (max-width: 768px) {
  .contact-hero { padding: 100px 18px 60px !important; }
}

/* ================================================================
   IOT-POS — PRODUCTS
   ================================================================ */
@media (max-width: 860px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .product-card { flex-direction: column !important; }
  .product-img { width: 100% !important; height: 220px !important; }
}
@media (max-width: 480px) {
  .product-img { height: 180px !important; }
}

/* ================================================================
   IOT-POS — ARCHITECTURE
   ================================================================ */
@media (max-width: 900px) {
  .arch-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
  .arch-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   IOT-POS — PARTNERS GRID
   ================================================================ */
@media (max-width: 480px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ================================================================
   IOT-POS — ROI SECTION
   ================================================================ */
@media (max-width: 800px) {
  .roi-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ================================================================
   IOT-POS — HOW IT WORKS
   ================================================================ */
@media (max-width: 480px) {
  .how-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   IOT-POS — TABS
   ================================================================ */
@media (max-width: 640px) {
  .tab-btns { flex-wrap: wrap !important; gap: 6px !important; }
  .tab-btn { font-size: 0.8rem !important; padding: 8px 14px !important; }
  .tab-pane.active { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BTP — SOLUTION BLOCKS
   ================================================================ */
@media (max-width: 900px) {
  .solution-block { flex-direction: column !important; gap: 32px !important; }
  .solution-block.reverse { flex-direction: column !important; }
  .use-case-img { width: 100% !important; min-height: 260px !important; }
}
@media (max-width: 480px) {
  .use-case-img { min-height: 200px !important; }
  .kpi-row { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
}

/* ================================================================
   BTP — MODULES GRID
   ================================================================ */
@media (max-width: 480px) {
  .modules-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BTP — DASHBOARD / DB LAYOUT
   ================================================================ */
@media (max-width: 700px) {
  .db-layout { grid-template-columns: 1fr !important; }
  .db-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .db-features-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 400px) {
  .db-kpi-row { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BTP — ROI CALCULATOR
   ================================================================ */
@media (max-width: 640px) {
  .roi-form { padding: 24px 16px !important; }
  .roi-inputs { grid-template-columns: 1fr !important; gap: 16px !important; }
  .roi-results { grid-template-columns: 1fr !important; }
}

/* ================================================================
   BLOG
   ================================================================ */
@media (max-width: 768px) {
  .page-header { padding: 100px 18px 40px !important; }
  .featured-card { grid-template-columns: 1fr !important; }
  .featured-img { height: 240px !important; border-radius: 16px 16px 0 0 !important; }
  .featured-right { padding: 24px !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .blog-hero { padding: 100px 18px 50px !important; text-align: center !important; }
}

/* ================================================================
   PARTNERS
   ================================================================ */
@media (max-width: 1024px) {
  .partners-layout { grid-template-columns: 1fr !important; }
  .globe-wrap { height: 380px !important; }
}
@media (max-width: 640px) {
  .partner-cards { grid-template-columns: 1fr !important; }
  .globe-wrap { height: 280px !important; }
}

/* ================================================================
   GENERAL — boutons, cards, titres
   ================================================================ */
@media (max-width: 640px) {
  .btn-primary, .btn-outline, .btn-secondary {
    width: 100% !important; text-align: center !important;
  }
  /* sauf ceux dans des flex-rows */
  .btn-row .btn-primary,
  .btn-row .btn-outline,
  .card-actions .btn-primary,
  .card-actions .btn-outline,
  .card-actions .btn-secondary,
  .popup-actions .btn-primary,
  .popup-actions .btn-outline { width: auto !important; }
}

@media (max-width: 480px) {
  h1, .hero-title { font-size: clamp(1.7rem, 7vw, 2.6rem) !important; }
  h2, .section-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .section-sub { font-size: 0.92rem !important; }
}

/* ================================================================
   USECASE CARDS (BTP & IOT)
   ================================================================ */
@media (max-width: 640px) {
  .usecase-grid, .uc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .usecase-card { padding: 18px 14px !important; }
}
@media (max-width: 400px) {
  .usecase-grid, .uc-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   MOBILE TOUCH — remove hover-only transforms
   ================================================================ */
@media (hover: none) {
  .feature-card:hover,
  .usecase-card:hover,
  .partner-card:hover,
  .blog-card:hover { transform: none !important; }
}

/* ================================================================
   ADMIN PANEL — already has its own responsive, just in case
   ================================================================ */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s; position: fixed !important; z-index: 200; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0 !important; }
}

/* ================================================================
   SENIOR UX MOBILE OVERHAUL
   Breakpoints: 768px / 640px / 480px / 380px
   ================================================================ */

/* ── 1. SERVICE PAGES HERO — min-height: 100vh trop haute sur mobile ── */
@media (max-width: 768px) {
  .page-hero {
    min-height: auto !important;
    padding: 96px 20px 56px !important;
  }
  /* Sous-titre hero: taille lisible */
  .hero-sub {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }
  /* Badges hero: compacts */
  .hero-badge-row {
    gap: 6px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
  }
  .hero-badge {
    font-size: 0.7rem !important;
    padding: 5px 10px !important;
    gap: 5px !important;
  }
  /* CTA hero: pleine largeur empilé */
  .hero-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-ghost {
    text-align: center !important;
    justify-content: center !important;
  }
  /* Stats hero: 2×2 */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 24px !important;
    margin-top: 28px !important;
    padding-top: 24px !important;
  }
  .stat-num { font-size: 1.6rem !important; }
  .stat-label { font-size: 0.7rem !important; }
}

/* ── 2. SECTIONS DE SERVICE — padding 96px → 52px mobile ── */
@media (max-width: 768px) {
  .services-section,
  .stack-section,
  .usecases-section,
  .how-section,
  .why-section {
    padding: 52px 0 !important;
  }
  .multicloud-section {
    padding: 48px 20px !important;
  }
  /* Headers de section */
  .services-header,
  .stack-header,
  .usecases-header,
  .how-header,
  .why-header {
    margin-bottom: 32px !important;
  }
  /* Grid tech stack: 2 colonnes sur mobile */
  .stack-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .stack-item {
    padding: 18px 14px !important;
  }
  .stack-item h4 { font-size: 0.82rem !important; }
  .stack-item p  { font-size: 0.7rem !important; }
  /* Cards "Why" */
  .why-card {
    padding: 24px 20px !important;
  }
  /* Cards provider (multi-cloud) */
  .provider-card {
    padding: 16px 18px !important;
  }
  .provider-card:hover { transform: none !important; }
  /* CTA final empilé */
  .final-cta {
    padding: 60px 20px !important;
  }
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cta-row .btn-white,
  .cta-row .btn-outline-white {
    text-align: center !important;
    justify-content: center !important;
  }
  /* Section container padding uniforme */
  .section-container {
    padding: 0 18px !important;
  }
  /* How-steps (IA page): 1 colonne */
  .how-steps {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .how-step {
    padding: 20px 18px !important;
    text-align: left !important;
  }
  .step-num {
    font-size: 2.5rem !important;
    top: -4px !important;
    right: 12px !important;
  }
}

/* ── 3. BLOG — filter pills en scroll horizontal ── */
@media (max-width: 640px) {
  .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    justify-content: flex-start !important;
    padding: 16px 14px !important;
    gap: 7px !important;
    scrollbar-width: none !important;
    border-bottom: 1px solid var(--border);
  }
  .filter-tabs::-webkit-scrollbar { display: none !important; }
  .filter-tab {
    scroll-snap-align: start !important;
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 7px 15px !important;
    min-height: 36px !important;
  }
}

/* ── 4. BOOKING — stepper lisible, paddings réduits ── */
@media (max-width: 640px) {
  /* Hero booking */
  .booking-hero {
    padding: 84px 18px 24px !important;
  }
  .booking-hero h1 {
    font-size: clamp(1.4rem, 6vw, 1.8rem) !important;
  }
  /* Stepper */
  .stepper-wrap {
    padding: 0 14px 28px !important;
  }
  .stepper {
    max-width: 100% !important;
  }
  .step-circle {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.72rem !important;
  }
  /* Labels du stepper: plus lisibles, meilleur contraste */
  .step-label {
    font-size: 0.55rem !important;
    letter-spacing: 0.04em !important;
    margin-top: 6px !important;
    color: rgba(255,255,255,0.28) !important;
    white-space: nowrap !important;
  }
  .step-item.active .step-label {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 700 !important;
  }
  .step-item.done .step-label {
    color: rgba(255,255,255,0.45) !important;
  }
  /* Section booking */
  .booking-section {
    padding: 40px 16px 64px !important;
  }
  .step-title {
    font-size: 1.3rem !important;
    margin-bottom: 6px !important;
  }
  .step-sub {
    margin-bottom: 28px !important;
  }
  /* Meeting cards */
  .meeting-card {
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  .meeting-name { font-size: 0.95rem !important; }
  .meeting-desc { font-size: 0.78rem !important; }
  /* Bouton "Choisir un créneau" */
  .booking-nav {
    padding-top: 24px !important;
  }
}

/* ── 5. CONTACT — réduire l'espacement sur mobile ── */
@media (max-width: 768px) {
  .contact-hero {
    padding: 88px 18px 48px !important;
  }
  .contact-main {
    padding: 44px 18px 64px !important;
  }
  .contact-grid {
    gap: 32px !important;
  }
}

/* ── 6. COOKIE BANNER — compact sur mobile ── */
@media (max-width: 640px) {
  #builko-cookie-banner .cookie-inner {
    padding: 12px 14px !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  #builko-cookie-banner .cookie-text strong {
    font-size: 0.8rem !important;
  }
  #builko-cookie-banner .cookie-text p {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
  }
  #builko-cookie-banner .cookie-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  #builko-cookie-banner .cookie-btn {
    padding: 7px 12px !important;
    font-size: 0.72rem !important;
  }
  #builko-cookie-banner .cookie-btn-reject {
    padding: 7px 8px !important;
    font-size: 0.68rem !important;
  }
}

/* ── 7. FLOATING BUTTONS — empilement correct sur mobile ── */
@media (max-width: 480px) {
  /* WhatsApp vers le bas */
  #wa-float {
    bottom: 18px !important;
    right: 14px !important;
  }
  /* Bouton RDV au-dessus de WhatsApp */
  #bk-open-btn {
    bottom: 88px !important;
    right: 14px !important;
    font-size: 0.75rem !important;
    padding: 9px 14px 9px 10px !important;
  }
}

/* ── 8. MOBILE — désactiver les animations de scroll-reveal ──
   Sur mobile : opacity:0 initial + IntersectionObserver = contenu
   invisible si le JS est lent ou si le seuil n'est pas atteint.
   On montre tout directement et on laisse le JS ajouter .visible
   sans effet visible (transition:none). ── */
@media (max-width: 768px) {
  .fade-in,
  .stack-item,
  .how-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── ACCESSIBILITÉ — prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .stack-item,
  .how-step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 9. SCROLL HINT — homepage ── */
@media (max-width: 768px) {
  .scroll-hint {
    margin-top: 32px !important;
  }
}

/* ── BTP & IOT-POS — réduire padding: 100px → 52px sur mobile ── */
@media (max-width: 768px) {
  /* BTP héros */
  .btp-hero {
    min-height: auto !important;
    padding: 96px 18px 52px !important;
  }
  /* BTP sections */
  .ps-section,
  .modules-section,
  .solutions-section,
  .dashboard-section,
  .testimonial-section,
  .page-cta {
    padding: 52px 18px !important;
  }
  #roi-calc {
    padding: 52px 18px !important;
  }
  /* BTP solution blocks: réduire l'espacement inter-blocs */
  .solution-block {
    margin-bottom: 36px !important;
    padding-bottom: 36px !important;
    gap: 24px !important;
  }
  /* Image use-case: aspect-ratio plus court sur mobile */
  .use-case-img {
    aspect-ratio: 16/9 !important;
    min-height: auto !important;
  }
  /* KPI row BTP */
  .kpi-item { flex: 1 1 calc(50% - 8px) !important; }

  /* IoT-POS héros */
  .iot-hero {
    min-height: auto !important;
    padding: 96px 18px 52px !important;
  }
  /* IoT stats row */
  .hero-stats-row {
    gap: 24px !important;
    padding: 20px 18px !important;
    justify-content: space-between !important;
  }
  /* IoT-POS sections */
  .products-section,
  .architecture-section,
  .partners-section,
  .usecases-section,
  .how-section,
  .roi-section,
  .demo-section {
    padding: 52px 18px !important;
  }
  .demo-section .demo-inner {
    padding: 40px 22px !important;
  }
  /* Peppol */
  .peppol-section,
  .faq-section,
  .cta-section {
    padding: 52px 18px !important;
  }
}

/* Architecture IoT: grille sur mobile */
@media (max-width: 768px) {
  .arch-grid {
    gap: 12px !important;
  }
  .arch-card {
    padding: 16px !important;
  }
  /* Tabs IoT */
  .tab-btns {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    justify-content: flex-start !important;
  }
  .tab-btns::-webkit-scrollbar { display: none !important; }
  .tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
}

/* ── 10. BOUTONS TOUCH — taille minimale 44px ── */
@media (max-width: 768px) {
  .cal-day {
    min-height: 40px !important;
  }
  .slot-btn {
    min-height: 44px !important;
    font-size: 0.82rem !important;
  }
  .cal-nav {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ── 11. HOMEPAGE TESTIMONIALS — spacing mobile ── */
@media (max-width: 600px) {
  .testimonial-featured-inner {
    padding: 28px 22px !important;
  }
  .testimonial-featured-text {
    font-size: 0.95rem !important;
  }
}

/* ── 12. PAGE LABEL (kicker) — lisible sur mobile ── */
@media (max-width: 480px) {
  .page-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.14em !important;
    padding: 5px 10px !important;
  }
}

/* ================================================================
   DESKTOP LARGE SCREENS (≥1280px)
   Optimisations pour profiter pleinement de l'espace sur grand écran
   ================================================================ */
@media (min-width: 1280px) {
  /* ── Conteneurs de section plus larges ── */
  .section-container {
    max-width: 1200px !important;
    padding: 0 40px !important;
  }

  /* ── Titres de section légèrement plus grands ── */
  .section-title {
    font-size: clamp(2rem, 2.8vw, 3.2rem) !important;
  }

  /* ── Feature cards : plus de padding et d'air ── */
  .feature-card,
  .service-card,
  .usecase-card {
    padding: 36px 32px !important;
  }

  /* ── Step cards (Peppol "3 étapes") : padding généreux ── */
  .step-card {
    padding: 44px 36px !important;
  }

  /* ── Why cards (sections "Pourquoi choisir Builko") ── */
  .why-card {
    padding: 40px 36px !important;
  }

  /* ── Grilles de features : gap légèrement plus large ── */
  .services-grid,
  .usecases-grid,
  .features-grid,
  .steps-grid,
  .why-grid {
    gap: 32px !important;
  }

  /* ── Stats hero : valeurs plus grandes ── */
  .stat-num {
    font-size: 2.8rem !important;
  }
}

/* ── LARGE SCREEN hero heading boost (≥1440px) ── */
@media (min-width: 1440px) {
  .hero-title,
  .btp-hero h1,
  .iot-hero h1,
  .peppol-hero h1,
  .page-hero h1 {
    font-size: clamp(3.2rem, 5vw, 5rem) !important;
  }
}

/* ================================================================
   MOBILE — BTP & IoT-POS : réduction hauteur de page (≤768px)
   Toutes les sections à padding:100px 32px ramenées à 48px 16px
   ================================================================ */
@media (max-width: 768px) {
  /* ── Sections page-spécifiques non couvertes ailleurs ── */
  .ps-section,
  .modules-section,
  .solutions-section,
  .dashboard-section,
  .products-section,
  .architecture-section,
  .partners-section,
  .roi-section,
  .demo-section,
  .testimonial-section,
  .page-cta { padding: 48px 16px !important; }

  #roi-calc,
  #roi-calc-pos { padding: 48px 16px !important; }

  /* ── BTP : réduction espacement interne des cartes problème/solution ── */
  .ps-card { padding: 20px 16px !important; }
  .ps-grid { gap: 16px !important; margin-bottom: 16px !important; }
  .ps-divider { margin-bottom: 16px !important; }

  /* ── BTP : grille modules reste sur 2 colonnes (pas 1) ── */
  .modules-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .module-tile { padding: 18px 14px !important; }

  /* ── IoT-POS : product cards moins hautes ── */
  .product-img { height: 120px !important; }
  .product-emoji { font-size: 3rem !important; }
  .product-body { padding: 16px !important; }
  .product-tagline { margin-bottom: 12px !important; }
  .product-features { gap: 6px !important; margin-bottom: 12px !important; }

  /* ── IoT-POS : architecture section — colonnes moins espacées ── */
  .arch-col { gap: 10px !important; }
  .arch-diagram { gap: 16px !important; }

  /* ── BTP solution blocks : cacher l'image placeholder + KPIs ── */
  .use-case-img { display: none !important; }
  .kpi-row { display: none !important; }
  .solution-block { margin-bottom: 24px !important; padding-bottom: 24px !important; }
  .solution-desc { margin-bottom: 14px !important; }

  /* ── IoT-POS : cacher l'image placeholder dans les product cards ── */
  .product-img { display: none !important; }

  /* ── IoT-POS : section how/demo mobile (non couverts par règle existante) ── */
  .page-cta .section-title { font-size: 1.6rem !important; }

  /* ── BTP : cacher le mockup CSS dashboard (inutile sur mobile) ── */
  .db-mockup { display: none !important; }

  /* ── BTP : db-features-grid en 2 colonnes compactes ── */
  .db-features-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }
  .db-feat { padding: 16px 12px !important; }
  .db-feat h3 { font-size: 0.85rem !important; margin-bottom: 4px !important; }
  .db-feat p { font-size: 0.78rem !important; line-height: 1.45 !important; }
  .db-feat-icon { font-size: 1.4rem !important; margin-bottom: 6px !important; }

  /* ── BTP modules : texte plus petit pour réduire la hauteur des tuiles ── */
  .modules-section .section-title { font-size: 1.5rem !important; }
  .modules-section .section-sub { font-size: 0.85rem !important; }
  .module-tile h3 { font-size: 0.85rem !important; margin-bottom: 4px !important; }
  .module-tile p { font-size: 0.78rem !important; line-height: 1.45 !important; }
  .module-tile ul li { font-size: 0.75rem !important; }

  /* ── BTP solutions : texte plus compact ── */
  .solution-title { font-size: 1.25rem !important; margin-bottom: 8px !important; }
  .solution-desc { font-size: 0.84rem !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
  .solution-features li { font-size: 0.8rem !important; }
  .solution-features { gap: 6px !important; margin-bottom: 16px !important; }

  /* ── Global : réduire le margin-bottom des section-headers ── */
  .section-header { margin-bottom: 32px !important; }

  /* ── IoT-POS : stats-bar compact (5 stats en flex-wrap serré) ── */
  .stats-bar { gap: 10px 20px !important; padding: 16px !important; }
  .stat-num { font-size: 1.5rem !important; }

  /* ── IoT-POS : product cards — texte plus compact ── */
  .product-name { font-size: 1.05rem !important; }
  .product-tagline { font-size: 0.8rem !important; margin-bottom: 10px !important; }

  /* ── IoT-POS : tab-bar horizontal scrollable ── */
  .tab-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 6px !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }
  .tab-bar::-webkit-scrollbar { display: none !important; }
  .tab-btn { white-space: nowrap !important; font-size: 0.78rem !important; padding: 7px 14px !important; }

  /* ── IoT-POS : how-steps en 2 colonnes ── */
  .how-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }

  /* ── IoT-POS : demo-card compact ── */
  .demo-card { padding: 32px 20px !important; }
  .demo-play-btn { width: 56px !important; height: 56px !important; margin-bottom: 16px !important; }
  .demo-card h2 { font-size: 1.4rem !important; margin-bottom: 10px !important; }
  .demo-card p { font-size: 0.88rem !important; margin-bottom: 20px !important; }
  .demo-features { gap: 12px !important; flex-direction: column !important; align-items: flex-start !important; padding: 0 0 0 8px !important; margin-bottom: 20px !important; }

  /* ── IoT-POS : partner cards plus petites ── */
  .partner-card { padding: 16px 12px !important; }
  .partner-logo-wrap,
  .partner-initial { width: 52px !important; height: 52px !important; margin-bottom: 10px !important; }
  .partner-name { font-size: 0.88rem !important; margin-bottom: 4px !important; }
  .partner-desc { font-size: 0.72rem !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  .partners-grid { gap: 12px !important; }

  /* ── IoT-POS : arch-center moins de padding ── */
  .arch-center { padding: 0 !important; }
  .arch-center-card { padding: 20px 16px !important; }
  .arch-center-card .arch-center-icon { font-size: 1.8rem !important; margin-bottom: 8px !important; }
  .arch-center-card h3 { font-size: 0.95rem !important; }

  /* ── IoT-POS : arch-cards (colonnes hardware/cloud) plus compactes ── */
  .arch-card { padding: 12px 14px !important; }
  .arch-card-icon { width: 36px !important; height: 36px !important; flex-shrink: 0 !important; }

  /* ── BTP : ps-cards — réduire la taille du texte ── */
  .ps-card h3 { font-size: 1rem !important; }
  .ps-card p { font-size: 0.82rem !important; line-height: 1.55 !important; }
  .ps-card ul li { font-size: 0.8rem !important; }

  /* ── BTP modules : réduire la section-header ── */
  .modules-section .section-header { margin-bottom: 20px !important; }

  /* ── IoT hero : padding légèrement réduit ── */
  .iot-hero { padding: 80px 18px 40px !important; }
  .btp-hero { padding: 80px 18px 40px !important; }

  /* ── Peppol hero : réduire le padding top ── */
  .peppol-hero { padding: 80px 16px 44px !important; min-height: auto !important; }

  /* ── Index specs : réduire padding des stat-items pour serrer les 2 rangées ── */
  .spec-item { padding: 12px 16px !important; }
}