/* ============================================================
   LAYOUT SYSTEM v5.0 — JSL Distribution
   - Containers / grid policies / overflow policy / safe-area
   - “One scroll” policy mobile (page) + tables horizontal only
   ============================================================ */

/* Global box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* GLOBAL INVARIANTS (governance lock v6.0) */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

[class*="grid"] > *,
[class*="box"] > *,
[class*="card"] > * {
  min-width: 0;
}

html {
  font-size: var(--ui-font-base, 16px);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* garde-fou global anti scroll horizontal */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.page-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;

  /* Safe-area for iPhone notch (no-op elsewhere) */
  padding-top: calc(var(--ui-pad-y) + var(--ui-safe-t));
  padding-bottom: calc(var(--ui-pad-y) + var(--ui-safe-b));
  padding-left: var(--ui-safe-lr);
  padding-right: var(--ui-safe-lr);
}

/* Override hardened: neutralise any legacy overflow:auto !important on main */
html body main.page-content {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Unified containers */
.page-container {
  width: 100%;
  max-width: 80rem; /* 1280px @ 16px */
  margin-inline: auto;
  padding-inline: calc(clamp(0.75rem, 4vw, 1.5rem) + var(--ui-safe-lr));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap, 18px);
}
.page-container > * {
  min-width: 0;
  max-width: 100%;
}

.app-container {
  width: 100%;
  max-width: 100%;
}

/* Full-width invariants for sub-boxes (v8) */
:is(.card, .module, .section, .box, .kpi-card, .panel) {
  width: 100%;
  max-width: 100%;
}

main.page-content {
  width: 100%;
  overflow-x: hidden;
}

/* Enterprise grid/flex standards */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px */
  gap: var(--space-4, 16px);
  align-items: stretch;
  justify-items: stretch;
}

.auto-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4, 16px);
}
.auto-flex > * {
  flex: 1 1 17.5rem; /* 280px */
  max-width: 100%;
  min-width: 0;
}

/* Page containers (public + guided screens) */
.about-page,
.services-page,
.support-page,
.page-about,
.guided-center,
.container {
  max-width: var(--ui-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Accessibilité: focus visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-500) 45%, transparent);
  outline-offset: 2px;
}

/* Mouvement: perf + a11y */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Tables: horizontal uniquement (interdire viewport vertical interne) */
.table-container {
  max-height: none !important;
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Mobile policy: un seul scroll vertical (page) + aucune boîte scroll interne */
@media (max-width: 768px) {
  main.page-content {
    display: block !important;
    overflow-x: hidden !important;
  }
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* No internal vertical scroll boxes on mobile (public) */
  .login-card,
  .container-box,
  .summary-box,
  .reputation__summary,
  .reputation__grid,
  .reviews-summary,
  .reviews-grid,
  .reviews-list,
  .footerxxxl__grid {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    overflow: visible !important;
  }

  /* Neutraliser Safari iOS hover-on-tap */
  .table-container:hover {
    overflow: visible !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* iPhone: neutralize hover-on-tap transforms (prevents stacking-context oddities) */
  .login-card:hover,
  .summary-card:hover,
  .kpi-card:hover,
  .review-card:hover,
  .sidebar-box:hover,
  .depot-summary:hover,
  .resume-box:hover {
    transform: none !important;
  }

  /* ERP: remove internal scroll boxes in sidebar + tables */
  .app-layout { flex-direction: column !important; }
  /* IMPORTANT:
     Ne pas écraser le drawer off-canvas de l'app.
     Le drawer mobile est géré par `internal_menu_responsive.css` sur l'élément
     `<aside class="app-sidebar ..." data-internal-menu-drawer>`. */
  .app-sidebar:not([data-internal-menu-drawer]),
  .app-sidebar.enterprise-sidebar:not([data-internal-menu-drawer]) {
    position: static !important;
    top: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .enterprise-sidebar:not([data-internal-menu-drawer]) .sidebar-nav {
    overflow-y: visible !important;
    max-height: none !important;
  }
  .internal-shell .table-scroll-xy {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    overscroll-behavior: auto !important;
    touch-action: pan-x !important;
  }
}

/* iPhone-specific viewport (390px exact): tighten padding */
@media (max-width: 390px) {
  .page-container {
    padding-inline: calc(clamp(0.625rem, 4vw, 1.25rem) + var(--ui-safe-lr));
  }
  .login-card {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ============================================================
   SUB-BOX FULL OCCUPATION ENFORCER (v5.0)
   - Zéro trous blancs (stretch + shrink)
   - Grilles auto-fit/minmax pour remplissage continu
   ============================================================ */

/* 1) Empêcher les éléments de dépasser leur colonne */
.summary-box > *,
.kpi-strip > *,
.reputation__grid > *,
.services-grid > *,
.service-grid > *,
.about-cards > *,
.about-team > *,
.about-gallery > *,
.footerxxxl__grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* 2) Forcer le stretch des parents */
.summary-box,
.kpi-strip.kpi-responsive,
.reputation__grid,
.services-grid,
.service-grid,
.about-cards,
.about-team,
.about-gallery,
.footerxxxl__grid {
  width: 100% !important;
  align-items: stretch !important;
}

/* 3) Neutraliser les centrages qui créent des trous */
.summary-box,
.kpi-strip.kpi-responsive,
.reputation__grid,
.services-grid,
.service-grid,
.about-cards,
.about-team,
.about-gallery {
  justify-content: stretch !important;
}

/* 4) Interdire toute max-width interne sur les sous-cartes */
.summary-card,
.kpi-card,
.reputation__card,
.service-card,
.service-box,
.about-card,
.team-card,
.gallery-card {
  max-width: 100% !important;
}

/* 5) Empêcher marges auto sur les sous-boîtes */
.summary-box > *,
.kpi-strip > *,
.reputation__grid > *,
.services-grid > *,
.service-grid > *,
.about-cards > *,
.about-team > *,
.about-gallery > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 6) Normalisation grilles (enterprise, sans “trous” sur grands écrans)
   Objectif: éviter les rendus 4+1 / 4+2 quand le nombre d’items ne remplit pas la dernière ligne.
   Le parent décide des colonnes; les enfants ne fixent pas leur largeur. */
.kpi-strip.kpi-responsive {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)) !important; /* 200px */
  gap: var(--grid-gap) !important;
  overflow: visible !important;
  max-height: none !important;
}
.summary-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--grid-gap) !important;
  align-items: stretch !important;
}
.summary-box > * {
  flex: 1 0 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.reputation__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--grid-gap) !important;
  align-items: stretch !important;
}
.reputation__grid > * {
  flex: 1 0 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.services-grid,
.service-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)) !important; /* 260px */
  gap: var(--grid-gap) !important;
}
.about-cards,
.about-team {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; /* 240px */
  gap: var(--grid-gap) !important;
}
.about-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)) !important; /* 200px */
  gap: var(--grid-gap) !important;
}

@media (min-width: 48rem) { /* 768px */
  .summary-box > * { flex: 1 0 calc((100% - var(--grid-gap)) / 2) !important; min-width: 0 !important; max-width: 100% !important; }
  .reputation__grid > * { flex: 1 0 calc((100% - var(--grid-gap)) / 2) !important; min-width: 0 !important; max-width: 100% !important; }
}

@media (min-width: 64rem) { /* 1024px */
  .summary-box > * { flex: 1 0 calc((100% - (2 * var(--grid-gap))) / 3) !important; min-width: 0 !important; max-width: 100% !important; }
  .reputation__grid > * { flex: 1 0 calc((100% - (2 * var(--grid-gap))) / 3) !important; min-width: 0 !important; max-width: 100% !important; }
}

/* 7) Égalisation hauteurs (sans trous) */
.summary-card,
.kpi-card,
.reputation__card,
.service-card,
.service-box,
.about-card,
.team-card,
.gallery-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}