/* =========================================================
   ATLAS NUMÉRIQUE — RESPONSIVE MOBILE COMPLET V10.2
   Les visuels desktop ne sont plus miniaturisés : ils sont
   recomposés en grilles réellement adaptées au mobile.
   ========================================================= */

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body,
main,
section {
  max-width: 100%;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 18px);
}

@media (max-width: 760px) {
  /* Aucun débordement horizontal caché ne doit servir de rustine. */
  body {
    width: 100%;
    overflow-x: clip;
  }
.main-nav {
    max-width: 100vw;
  }

  .contact-hero,
  .about-hero,
  .portfolio-hero,
  .creation-hero,
  .seo-hero,
  .service-hero {
    overflow: clip;
  }

  .hero {
    overflow: visible;
  }

  /* -------------------------------------------------------
     ACCUEIL
     ------------------------------------------------------- */
  .hero-visual {
    width: 100%;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: stretch;
    gap: 10px;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero-visual .visual-grid,
  .hero-visual .system-orbit {
    display: none;
  }

  .hero-visual .system-core {
    grid-column: 1 / -1;
    position: relative;
    width: 170px;
    height: 170px;
    justify-self: center;
    margin-bottom: 8px;
    border-radius: 42px;
  }

  .hero-visual .system-node {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    min-height: 100px;
    gap: 10px;
    padding: 13px;
    transform: none !important;
  }

  .hero-visual .system-node strong {
    font-size: .75rem;
  }

  .hero-visual .system-node small {
    font-size: .58rem;
    line-height: 1.45;
  }

  .hero-visual .floating-status {
    grid-column: 1 / -1;
    position: static;
    justify-self: center;
    margin-top: 4px;
  }

  /* -------------------------------------------------------
     VISUELS CONSOLE : CONTACT, À PROPOS, PORTFOLIO,
     CRÉATION DE SITE ET RÉFÉRENCEMENT
     ------------------------------------------------------- */
  .contact-hero-visual,
  .about-hero-visual,
  .portfolio-hero-visual,
  .creation-hero-visual,
  .seo-hero-visual {
    width: 100%;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: stretch;
    gap: 10px;
    margin: 25px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .contact-hero-visual .contact-orbit,
  .about-hero-visual .about-orbit,
  .portfolio-hero-visual .portfolio-orbit,
  .creation-hero-visual .creation-orbit,
  .seo-hero-visual .seo-orbit {
    display: none;
  }

  .contact-console,
  .profile-console,
  .portfolio-console,
  .creation-browser,
  .search-console {
    grid-column: 1 / -1;
    position: relative;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 18px;
    transform: none !important;
  }

  .creation-browser {
    padding: 0;
  }

  .contact-float,
  .about-float,
  .portfolio-float,
  .creation-float,
  .seo-float {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    padding: 13px;
    transform: none !important;
  }

  .contact-float:last-child,
  .about-float:last-child,
  .portfolio-float:last-child,
  .creation-float:last-child,
  .seo-float:last-child {
    grid-column: 1 / -1;
  }

  .contact-console-flow article {
    grid-template-columns: 28px minmax(0, 1fr) 42px;
    gap: 9px;
    padding: 11px;
  }

  .profile-identity {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
  }

  .profile-monogram {
    width: 76px;
    height: 76px;
    border-radius: 23px;
    font-size: 1.55rem;
  }

  .profile-identity strong {
    font-size: 1.1rem;
  }

  .portfolio-map {
    min-height: 245px;
  }

  .map-core {
    width: 105px;
    height: 105px;
  }

  .map-node {
    min-width: 82px;
    padding: 10px;
  }

  .creation-browser-body {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .creation-browser-main {
    padding: 15px;
  }

  .mock-title {
    max-width: 90%;
  }

  .seo-metrics {
    grid-template-columns: 1fr;
  }

  .seo-chart {
    height: 165px;
  }

  /* -------------------------------------------------------
     PAGE SERVICES : véritable composition mobile 2 × 2
     ------------------------------------------------------- */
  .services-overview-page .service-hero-visual {
    width: 100%;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .services-overview-page .service-orbit {
    display: none;
  }

  .services-overview-page .service-hub {
    grid-column: 1 / -1;
    position: relative;
    width: 190px;
    height: 190px;
    justify-self: center;
    margin-bottom: 8px;
    border-radius: 46px;
    transform: none !important;
  }

  .services-overview-page .service-node {
    position: static !important;
    width: 100%;
    min-width: 0;
    min-height: 105px;
    padding: 14px;
    transform: none !important;
  }

  /* -------------------------------------------------------
     APPLICATION MÉTIER ET MAINTENANCE
     ------------------------------------------------------- */
  .app-service-page .service-hero-visual,
  .maintenance-page .service-hero-visual {
    width: 100%;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .app-service-page .app-hero-orbit,
  .maintenance-page .maintenance-radar {
    display: none;
  }

  .app-dashboard-hero,
  .maintenance-console {
    grid-column: 1 / -1;
    position: relative;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    min-height: 0;
    padding: 17px;
    transform: none !important;
  }

  .app-dashboard-body {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 9px;
  }

  .app-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .app-kpi-row article {
    min-width: 0;
    padding: 9px 7px;
  }

  .app-kpi-row strong {
    font-size: .88rem;
  }

  .app-chart-panel {
    height: 125px;
  }

  .app-float,
  .maintenance-float {
    position: static !important;
    width: 100% !important;
    min-width: 0;
    padding: 13px;
    transform: none !important;
  }

  .app-float:last-child,
  .maintenance-float:last-child {
    grid-column: 1 / -1;
  }

  .health-score {
    padding: 20px 0;
  }

  .health-lines article {
    grid-template-columns: 78px minmax(0, 1fr) 54px;
    gap: 7px;
  }

  /* -------------------------------------------------------
     AUTRES VISUELS COMPLEXES DANS LE CORPS DES PAGES
     ------------------------------------------------------- */
  .app-security-visual,
  .maintenance-audit-visual,
  .founder-visual,
  .local-studio-map,
  .portfolio-process-visual,
  .seo-proof-visual,
  .creation-project-visual,
  .portfolio-card-visual {
    overflow: clip;
  }

  .security-node,
  .node-admin,
  .node-team,
  .node-client {
    max-width: 42%;
  }

  .service-strip-grid,
  .about-strip-grid,
  .status-strip-grid,
  .creation-trust-grid,
  .seo-trust-grid {
    max-width: 100%;
    overflow: hidden;
  }

  .trust-track {
    max-width: none;
    overflow: visible;
  }

  .service-strip-grid span,
  .about-strip-grid span,
  .creation-trust-grid span,
  .seo-trust-grid span {
    padding-inline: 12px;
    text-align: center;
    white-space: normal;
  }

  /* Les contenus interactifs ne doivent jamais imposer une largeur desktop. */
  .app-composer-result,
  .configurator-result,
  .seo-audit-result,
  .role-result,
  .service-choice-card,
  .app-security-card,
  .maintenance-audit-card,
  .portfolio-card,
  .portfolio-card-wide {
    min-width: 0;
    max-width: 100%;
  }

  .app-composer-console,
  .configurator-dashboard,
  .seo-audit-dashboard,
  .role-console {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 430px) {
  .hero-visual,
  .contact-hero-visual,
  .about-hero-visual,
  .portfolio-hero-visual,
  .creation-hero-visual,
  .seo-hero-visual,
  .services-overview-page .service-hero-visual,
  .app-service-page .service-hero-visual,
  .maintenance-page .service-hero-visual {
    grid-template-columns: 1fr;
  }

  .hero-visual .system-core,
  .contact-console,
  .profile-console,
  .portfolio-console,
  .creation-browser,
  .search-console,
  .services-overview-page .service-hub,
  .app-dashboard-hero,
  .maintenance-console,
  .contact-float:last-child,
  .about-float:last-child,
  .portfolio-float:last-child,
  .creation-float:last-child,
  .seo-float:last-child,
  .app-float:last-child,
  .maintenance-float:last-child {
    grid-column: 1;
  }

  .hero-visual .system-node,
  .contact-float,
  .about-float,
  .portfolio-float,
  .creation-float,
  .seo-float,
  .services-overview-page .service-node,
  .app-float,
  .maintenance-float {
    min-height: 82px;
  }

  .services-overview-page .service-hub {
    width: 170px;
    height: 170px;
  }

  .contact-console,
  .profile-console,
  .portfolio-console,
  .search-console,
  .app-dashboard-hero,
  .maintenance-console {
    padding: 15px;
    border-radius: 20px;
  }

  .app-dashboard-body {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .app-dashboard-body aside {
    padding-inline: 4px;
  }

  .app-list-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   V10.4.1 — correctif régression mobile
   - le fond du hero d'accueil doit pouvoir dépasser .section-shell
   - le menu mobile fixe ne doit jamais être coupé par le header
   ========================================================= */
@media (max-width: 760px) {
  .site-header,
  .site-header.is-scrolled {
    contain: none !important;
    overflow: visible !important;
  }

  .hero {
    overflow: visible !important;
  }

  .main-nav {
    z-index: 1000;
  }
}