/* === IPAI — mire Authelia : fond techno + logo + écosystème (sobre) ===
   100% same-origin (CSS + JS servis par Nginx) : OK avec la CSP
   (style-src 'self', script-src 'self'). Logo : .MuiBox-root[alt*="Logo"]. */

body {
  background-color: #20242c !important;
  background-image:
    radial-gradient(circle at 22% 26%,
      rgba(58,86,230,.14), transparent 38%),
    radial-gradient(circle at 80% 70%,
      rgba(130,171,228,.10), transparent 40%),
    radial-gradient(ellipse at 50% 38%,
      rgba(24,28,36,.85), rgba(24,28,36,.15) 55%, transparent 75%),
    linear-gradient(rgba(174,182,198,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,182,198,.05) 1px, transparent 1px),
    linear-gradient(160deg, #2f3540, #282d37 55%, #20242c) !important;
  background-size:
    100% 100%, 100% 100%, 100% 100%,
    64px 64px, 64px 64px, 100% 100% !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat:
    no-repeat, no-repeat, no-repeat,
    repeat, repeat, no-repeat !important;
}

/* Logo IPAI agrandi (Authelia le bride à ~64px par défaut) */
.MuiBox-root[alt*="Logo"] {
  content: url('/hivolvia-logo.png') !important;
  object-fit: contain !important;
  width: 240px !important;
  height: auto !important;
  max-width: 72vw !important;
  margin-bottom: 0.4em !important;
}
h5.MuiTypography-root { font-weight: 600 !important; }

/* ====== Écosystème IPAI — bande sobre injectée sous la mire ====== */
#ipai-eco{
  --foundry:#e08fb0; --learn:#82abe4; --code:#83c79a; --serve:#e3c06a;
  --ink:#f5f7fb; --muted:#aeb6c6; --line:rgba(174,182,198,.16);
  font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--ink);
  width:100%;padding:54px 24px 60px;
  display:flex;flex-direction:column;align-items:center;
  border-top:1px solid var(--line);
}
#ipai-eco .eco-hive svg{width:52px;height:52px;display:block}
#ipai-eco .eco-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
#ipai-eco .eco-bars{display:flex;flex-direction:column;gap:3px}
#ipai-eco .eco-bars i{display:block;width:26px;height:4px;border-radius:1px}
#ipai-eco .eco-bars i:nth-child(1){background:var(--serve)}
#ipai-eco .eco-bars i:nth-child(2){background:var(--foundry)}
#ipai-eco .eco-bars i:nth-child(3){background:var(--learn)}
#ipai-eco .eco-bars i:nth-child(4){background:var(--code)}
#ipai-eco .eco-title{font-size:21px;font-weight:600;letter-spacing:.3px}
#ipai-eco .eco-sub{color:var(--muted);font-size:14px;margin-bottom:34px}
#ipai-eco .eco-grid{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;width:100%;max-width:1080px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
#ipai-eco .eco-card{background:#333945;padding:26px 22px 24px;transition:background .18s ease}
#ipai-eco .eco-card:hover{background:#3a4150}
#ipai-eco .eco-top{height:3px;width:38px;border-radius:2px;background:var(--accent);margin-bottom:18px}
#ipai-eco .eco-ic{
  width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:rgba(255,255,255,.02);margin-bottom:16px;
}
#ipai-eco .eco-ic svg{width:26px;height:26px}
#ipai-eco .eco-kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
#ipai-eco .eco-name{font-size:18px;font-weight:600;letter-spacing:.3px}
#ipai-eco .eco-desc{color:var(--muted);font-size:13px;line-height:1.55;margin-top:8px}
#ipai-eco .m-doc{--accent:#ab98da}
#ipai-eco .m-foundry{--accent:var(--foundry)}
#ipai-eco .m-learn{--accent:var(--learn)}
#ipai-eco .m-code{--accent:var(--code)}
#ipai-eco .m-serve{--accent:var(--serve)}
#ipai-eco .eco-foot{margin-top:26px;color:var(--muted);font-size:12px;letter-spacing:.4px}

/* ====== Split-screen desktop : tout tient sur une page (≥980px) ====== */
@media (min-width:980px){
  body{display:flex !important;flex-direction:row !important;align-items:stretch !important}
  #root{flex:1 1 56% !important}
  #ipai-eco{
    flex:1 1 44% !important;min-height:100vh;justify-content:center;
    border-top:none !important;border-left:1px solid var(--line);
    padding:40px 44px !important;
  }
  /* panneau droit : liste verticale compacte (pas de trou) */
  #ipai-eco .eco-grid{grid-template-columns:1fr !important;max-width:440px}
  #ipai-eco .eco-card{
    display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;
    column-gap:16px;align-items:center;padding:16px 20px;
  }
  #ipai-eco .eco-top{display:none}
  #ipai-eco .eco-ic{grid-column:1;grid-row:1 / 4;align-self:center;margin-bottom:0;width:44px;height:44px}
  #ipai-eco .eco-kicker{grid-column:2;grid-row:1;margin-bottom:0}
  #ipai-eco .eco-name{grid-column:2;grid-row:2}
  #ipai-eco .eco-desc{grid-column:2;grid-row:3;margin-top:2px}
}