/* Fromapp — Menu principal
   Cartes thématiques inspirées de Formulaires enregistrés et du module RH. */

:root{
  --menu-text:#172033;
  --menu-muted:#64748b;
  --menu-border:#dbe3ee;
  --menu-bg:#f3f6fb;
  --menu-shadow:0 16px 38px rgba(15,23,42,.08);
  --menu-shadow-soft:0 8px 22px rgba(15,23,42,.07);
}

body{
  min-height:100vh;
  padding:20px 20px 64px !important;
  background:
    radial-gradient(circle at 8% 0%,rgba(37,99,235,.08),transparent 30%),
    radial-gradient(circle at 94% 7%,rgba(34,197,94,.055),transparent 28%),
    var(--menu-bg) !important;
  color:var(--menu-text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  -webkit-overflow-scrolling:touch;
  overflow-y:auto;
  overscroll-behavior-y:auto;
}

/* En-tête */
.top-header{
  width:min(1480px,100%);
  min-height:112px;
  margin:0 auto 26px !important;
  padding:15px clamp(18px,3vw,32px) !important;
  display:grid !important;
  grid-template-columns:minmax(180px,1fr) minmax(190px,1fr) minmax(180px,1fr);
  border:1px solid var(--menu-border) !important;
  border-radius:21px !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:var(--menu-shadow) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.top-header .left{ justify-self:start; text-align:left; }
.top-header .center{ justify-self:center; width:auto !important; }
.top-header .right{ justify-self:end; display:flex; align-items:center; justify-content:flex-end; }
.top-header .left .menu-text{
  color:var(--menu-text) !important;
  font-size:clamp(22px,2.4vw,31px) !important;
  font-weight:850 !important;
  letter-spacing:-.035em;
}
.top-header .center .logo-fromapp{ width:auto; height:58px; max-width:210px; object-fit:contain; }
.top-header .right .logo-entreprise{ width:auto; height:82px; max-width:190px; object-fit:contain; }

/* Grille */
.grid{
  width:min(1480px,100%);
  max-width:1480px !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:20px !important;
  padding:0 0 48px !important;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch;
}

/* Identités des modules */
.module{
  --theme:#64748b;
  --theme-dark:#334155;
  --theme-soft:#f8fafc;
  --theme-mid:#e2e8f0;
  --theme-border:#cbd5e1;
  min-height:245px !important;
  justify-content:flex-start !important;
  padding:0 18px 18px !important;
  overflow:hidden;
  border:1px solid var(--theme-border) !important;
  border-radius:20px !important;
  background:linear-gradient(160deg,#fff 30%,var(--theme-soft)) !important;
  box-shadow:var(--menu-shadow) !important;
  transform:none !important;
  touch-action:pan-y;
}
.grid .module,
.grid .module *,
.grid a,
.grid button{
  touch-action:pan-y !important;
}
.module-entree{ --theme:#16a36a; --theme-dark:#065f46; --theme-soft:#ecfdf5; --theme-mid:#d1fae5; --theme-border:#a7e6c8; }
.module-production{ --theme:#d98b09; --theme-dark:#92400e; --theme-soft:#fff8e7; --theme-mid:#fdebc0; --theme-border:#f3cf83; }
.module-qualite{ --theme:#0f9c9c; --theme-dark:#115e59; --theme-soft:#ecfeff; --theme-mid:#cffafe; --theme-border:#9bdcdc; }
.module-sortie{ --theme:#2872c7; --theme-dark:#1e3a8a; --theme-soft:#eff6ff; --theme-mid:#dbeafe; --theme-border:#b5cef2; }
.module-administration{ --theme:#667085; --theme-dark:#344054; --theme-soft:#f6f7f9; --theme-mid:#e8ebef; --theme-border:#cbd1da; }
.module-rapports{ --theme:#6256c7; --theme-dark:#373078; --theme-soft:#f2f0ff; --theme-mid:#e3dfff; --theme-border:#c9c3f1; }
.module-livraison{ --theme:#d97706; --theme-dark:#9a3412; --theme-soft:#fff7ed; --theme-mid:#ffedd5; --theme-border:#f4c895; }
.module-rh{ --theme:#16836e; --theme-dark:#135f53; --theme-soft:#effaf7; --theme-mid:#d6f3eb; --theme-border:#a9dacd; }

.module::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:6px;
  background:var(--theme);
}
.module h2{
  min-height:66px;
  margin:0 -18px 15px !important;
  padding:20px 18px 13px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0 !important;
  border-bottom:1px solid var(--theme-border) !important;
  background:linear-gradient(135deg,#fff,var(--theme-soft));
  color:var(--menu-text);
  font-size:17px !important;
  font-weight:850;
  line-height:1.25;
  letter-spacing:-.015em;
}
.module ul{ justify-content:flex-start !important; gap:9px !important; }
.module li{ width:100%; }
.module .btn-link,.module .btn-disabled{
  min-height:41px;
  max-width:none !important;
  padding:9px 12px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  border:1px solid var(--theme-border) !important;
  border-radius:11px !important;
  background:rgba(255,255,255,.80) !important;
  color:var(--theme-dark) !important;
  box-shadow:0 3px 10px rgba(15,23,42,.035);
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.25;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.module .btn-link:hover{
  border-color:var(--theme) !important;
  background:var(--theme-mid) !important;
  box-shadow:0 7px 16px color-mix(in srgb,var(--theme) 14%,transparent);
  transform:translateY(-1px);
}
.module .btn-disabled{
  border-color:#d6dae1 !important;
  background:#f1f3f5 !important;
  color:#8a94a4 !important;
  box-shadow:none;
}
.module .preview-muted{ opacity:.25; justify-content:flex-start !important; }
.module .preview-footer{ margin-top:12px !important; }
.module .preview-footer .btn-link{
  border-color:var(--theme) !important;
  background:var(--theme) !important;
  color:#fff !important;
  box-shadow:0 8px 18px color-mix(in srgb,var(--theme) 22%,transparent);
}
.module:hover{
  border-color:var(--theme) !important;
  box-shadow:0 19px 42px color-mix(in srgb,var(--theme) 11%,rgba(15,23,42,.08)) !important;
}

/* Modales cohérentes avec RH */
.modal{ background:rgba(15,23,42,.42) !important; }
.modal-content{
  max-height:min(82vh,760px);
  overflow:auto;
  border:1px solid var(--menu-border) !important;
  border-radius:21px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 24px 65px rgba(15,23,42,.22) !important;
}
.modal-content h2{ color:var(--menu-text); font-weight:850; letter-spacing:-.025em; }
.modal-content .btn-link{
  min-height:41px;
  border:1px solid #cbd5e1;
  border-radius:11px !important;
  background:#f8fafc !important;
  color:#334155 !important;
  font-size:14px;
  font-weight:800;
}
.modal-content .btn-link:hover{ border-color:#94a3b8; background:#eef2f6 !important; }

/* Tablettes: deux colonnes et davantage de zones de glissement */
@media(max-width:1100px){
  body{ padding:14px 14px 82px !important; }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px 18px !important; }
  .module{ min-height:230px !important; }
  .module:hover{ transform:none !important; }
  .module h2{ touch-action:pan-y; user-select:none; }
  .grid{
    padding-bottom:96px !important;
    user-select:none;
    -webkit-user-select:none;
  }
}

@media(max-width:720px){
  .top-header{
    min-height:auto;
    grid-template-columns:1fr 1fr !important;
    padding:14px 16px !important;
  }
  .top-header .left{ grid-column:1/-1; grid-row:2; justify-self:center; text-align:center; }
  .top-header .center{ grid-column:1; grid-row:1; justify-self:start; }
  .top-header .right{ grid-column:2; grid-row:1; justify-self:end; width:auto !important; }
  .top-header .center .logo-fromapp{ height:45px; max-width:150px; }
  .top-header .right .logo-entreprise{ height:62px; max-width:135px; }
  .grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .module{ min-height:0 !important; }
}

@media(hover:none){
  .module:hover{ border-color:var(--theme-border) !important; box-shadow:var(--menu-shadow) !important; }
  .module .btn-link:hover{ transform:none; }
}