/*
 * Téléphone et petite tablette (chargée en dernier par le layout, après typographie.css).
 * Audit du 05/11/2026 sur 41 pages à 390 px : pages trop longues (10 000 à 17 000 px), rangées de 20 points sous
 * les carrousels de logos, paragraphes petits, gris et justifiés, marges latérales qui rétrécissent le texte,
 * cartes trop espacées. « :not(#bc) » donne la priorité sur les anciennes feuilles, comme dans typographie.css.
 */
@media (max-width: 767.98px) {
  html, body { overflow-x: clip; }

  /* --- Rythme vertical : moitié moins de vide entre les blocs --- */
  html body section:not(#bc) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 44px; padding-bottom: 44px; }
  html body #hero:not(#bc) { padding-top: 96px; padding-bottom: 36px; min-height: 0; }
  html body :is(.section-header, .section-header-2):not(#bc) { padding-bottom: 12px; margin-bottom: 18px !important; }
  html body .row[style*="margin-top"]:not(#bc) { margin-top: 24px !important; }
  html body .mt-5:not(#bc) { margin-top: 1.5rem !important; }
  html body .mb-5:not(#bc) { margin-bottom: 1.5rem !important; }

  /* --- Texte : lisible, aligné à gauche, pleine largeur --- */
  html body main p:not(#bc), html body main li:not(#bc) { font-size: 1rem !important; line-height: 1.65 !important; text-align: left !important; }
  html body main :is(.card, .bc-ia-carte) p:not(#bc) { font-size: .97rem !important; }
  html body main [style*="justify"]:not(#bc) { text-align: left !important; }
  html body main .container:not(#bc) { padding-left: 18px; padding-right: 18px; }
  html body main [class*="col-"]:not(#bc) { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); }
  html body main :is(.col-sm-10, .col-md-10, .col-lg-8, .col-lg-9):not(#bc) { width: 100%; }

  /* Titres de section : la « pastille » bleue ne doit pas déborder ni tout centrer en trois lignes */
  html body :is(.section-header, .section-header-2) h2 span:not(#bc) { display: inline; padding: 2px 10px; border-radius: 10px; line-height: 1.5; box-decoration-break: clone; -webkit-box-decoration-break: clone; transform: none !important; margin: 0 !important; }
  html body :is(.section-header, .section-header-2) h2 br:not(#bc) { display: none; }
  html body :is(.section-header, .section-header-2) h2:not(#bc) { font-size: 1.65rem !important; line-height: 1.35 !important; text-transform: none; }

  /* --- Hero --- */
  html body .hero h1:not(#bc) { font-size: 2.1rem !important; }
  html body .hero h2:not(#bc) { font-size: 1.02rem !important; margin-top: 12px; }
  html body .hero .btn-get-started:not(#bc) { width: 100%; margin-top: 18px; }
  html body .hero .departments:not(#bc) { margin-top: 14px !important; gap: 6px; }
  html body .hero .departments > div:not(#bc) { text-align: left !important; }
  html body .bc-ia-hero__actions:not(#bc) { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  html body .bc-ia-hero__actions .bc-ia-lien:not(#bc) { text-align: center; padding: 8px 0; }
  html body .hero .hero-img:not(#bc), html body .hero img.img-fluid:not(#bc) { max-height: 280px; width: auto; margin: 20px auto 0; display: block; }

  /* --- Carrousels : pas de rangée de 20 points, on fait glisser --- */
  html body .swiper-pagination:not(#bc) { display: none !important; }
  html body .owl-dots:not(#bc) { display: none !important; }

  /* --- Cartes et grilles --- */
  html body .card:not(#bc) { margin-left: auto; margin-right: auto; }
  html body .cardBordered:not(#bc) { width: 100% !important; max-width: 420px; }
  html body .bc-ia-carte:not(#bc) { padding: 20px; }
  html body .bc-ia-etapes li:not(#bc) { gap: 12px; }
  html body img:not(#bc) { max-width: 100%; height: auto; }
  html body iframe:not(#bc) { max-width: 100%; }
  html body table:not(#bc) { display: block; overflow-x: auto; }

  /* Boutons et liens : cibles tactiles de 44 px */
  html body main :is(.btn, .btn-outline-home):not(#bc) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  html body .bc-market__filtres:not(#bc) { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  html body .bc-market__filtre:not(#bc) { flex: none; }

  /* Fil conducteur : quatre étapes en liste compacte */
  html body .bc-fil__etape:not(#bc) { padding: 16px; }

  /* Conversation d'exemple : affichée en entier, sans boucle (voir bc-animations.js) */
  html body .bc-chat:not(#bc) { padding: 16px; }

  /* Pied de page */
  html body footer:not(#bc) { padding-top: 32px; }
  html body footer .row > div:not(#bc) { margin-bottom: 18px; }
}

@media (max-width: 380px) {
  html body .hero h1:not(#bc) { font-size: 1.85rem !important; }
}

/* Menu mobile : l'en-tête est « static » dans l'ancienne feuille, son z-index ne s'appliquait pas et le hero
   (positionné) passait au-dessus du bouton ☰ — le menu ne s'ouvrait pas au doigt. */
@media (max-width: 1200px) {
  html body #header:not(#bc) { position: relative; z-index: 1000; }
  html body #navbar > .mobile-nav-toggle:not(#bc), html body .navbar > .mobile-nav-toggle:not(#bc) { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 30px; line-height: 1; position: relative; z-index: 1001; }
  html body .navbar-mobile:not(#bc) { z-index: 9999; }
  html body #navbar.navbar-mobile > .mobile-nav-toggle:not(#bc) { position: absolute; left: auto; top: 8px; right: 10px; color: #fff; }
  /* Le lien « Expertise » du bureau ouvre le méga-menu : sur mobile, seul le menu déroulant reste. */
  html body .navbar-mobile #expertise-link:not(#bc), html body .navbar-mobile li:has(> #expertise-link):not(#bc) { display: none; }
  html body .navbar-mobile a:not(#bc) { min-height: 44px; display: flex; align-items: center; }
}

/* Accueil et pages services : illustrations plus petites, flèches décoratives masquées, cartes « cible » en 2 colonnes. */
@media (max-width: 767.98px) {
  html body .cardImg img:not(#bc) { max-height: 170px; width: auto; margin: 0 auto; display: block; }
  html body .arrowBox:not(#bc) { display: none !important; }
  html body .functCard .card-header img:not(#bc) { max-height: 150px; object-fit: cover; }
  html body .row:has(> [class*="col-"] > .functCard):not(#bc) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html body .row:has(> [class*="col-"] > .functCard) > [class*="col-"]:not(#bc) { width: auto; margin-bottom: 0 !important; padding: 0; }
  html body .functCard:not(#bc) { width: 100% !important; }
  html body .functCard p:not(#bc) { font-size: .88rem !important; }
  html body .cardEtape:not(#bc) { margin-bottom: 12px; }
  /* Grilles de cartes « techno / expertises » : deux par ligne */
  html body .row:has(> [class*="col-lg-3"] > .cardBordered):not(#bc) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html body .row:has(> [class*="col-lg-3"] > .cardBordered) > [class*="col-"]:not(#bc) { width: auto; margin-bottom: 0 !important; padding: 0; }
  html body .cardBordered:not(#bc) { max-width: none; height: 100%; }
  html body .cardBordered p:not(#bc) { font-size: .86rem !important; }
}