@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root{
  --bg:#EEF1F4;
  --panel:#FFFFFF;
  --panel-2:#F1F4F7;
  --border:#DBE2E8;
  --text:#1B2530;
  --text-dim:#5B6B7A;
  --green:#00915E;
  --green-tint:#D7F0E5;
  --orange:#F58220;
  --red:#D6393E;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Space Grotesk", var(--sans);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100%;}

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

header.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--border);background:var(--panel);
}
.brand{display:flex;flex-direction:column;line-height:1.2;}
.brand .name{font-family:var(--display);font-weight:700;font-size:18px;}
.brand .name .ob{color:var(--green);}
.brand .name .groupe{color:var(--orange);}
.brand .tagline{font-size:11px;color:var(--text-dim);letter-spacing:.02em;}

.lang-toggle{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.lang-toggle button{
  border:none;background:var(--panel);color:var(--text-dim);font-family:var(--mono);
  font-size:12px;padding:7px 12px;cursor:pointer;
}
.lang-toggle button.active{background:var(--green);color:#fff;}

.top-minimal{justify-content:flex-end;}
.top-minimal .brand{display:none;}
@media (max-width:480px){ .top-minimal .brand{display:block;} .top-minimal .tagline{font-size:11px;} }

.login-stack{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;}
.login-logo{width:100%;max-width:260px;height:auto;margin-bottom:20px;}

main.center{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}

.card{
  background:var(--panel);border:none;border-radius:12px;
  padding:32px;width:100%;max-width:400px;box-shadow:none;
}
.card h1{font-family:var(--display);font-size:22px;margin:0 0 4px;text-align:center;}
.card .subtitle{color:var(--text-dim);font-size:13px;margin:0 0 24px;text-align:center;}

.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tabs button{
  flex:1;background:none;border:none;padding:10px 4px;font-family:var(--sans);font-size:13px;
  font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs button.active{color:var(--green);border-bottom-color:var(--green);}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:5px;}
.field input{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;
  font-family:var(--sans);font-size:14px;background:var(--panel-2);color:var(--text);
}
.field input:focus{outline:none;border-color:var(--green);background:var(--panel);}

.btn-primary{
  width:100%;padding:11px;border:none;border-radius:6px;background:var(--green);color:#fff;
  font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;margin-top:6px;
}
.btn-primary:hover{background:#007A4F;}
.btn-primary:disabled{opacity:.6;cursor:default;}

.btn-link{
  background:none;border:none;color:var(--green);font-family:var(--sans);font-size:12.5px;
  cursor:pointer;padding:4px 0;text-decoration:underline;
}

.form-msg{font-size:12.5px;padding:9px 11px;border-radius:6px;margin-bottom:14px;display:none;}
.form-msg.error{display:block;background:#FBE8E8;color:var(--red);}
.form-msg.success{display:block;background:var(--green-tint);color:#00623F;}

.hidden{display:none !important;}

footer.bottom{padding:14px 24px;text-align:center;font-size:11px;color:var(--text-dim);font-family:var(--mono);}

/* ---------- Dashboard ---------- */
.dash-hero{padding:28px 24px 8px;max-width:1000px;margin:0 auto;width:100%;}
.dash-hero h1{font-family:var(--display);font-size:24px;margin:0 0 4px;}
.dash-hero p{color:var(--text-dim);margin:0;font-size:14px;}

.dash-grid{
  max-width:1000px;margin:20px auto 40px;width:100%;padding:0 24px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden;
}
@media (max-width:720px){ .dash-grid{grid-template-columns:1fr;} }

.mod-card{
  background:var(--panel);padding:22px;display:flex;gap:16px;align-items:flex-start;
  text-decoration:none;color:var(--text);
}
a.mod-card:hover{background:var(--panel-2);}
.mod-card.disabled{opacity:.55;}

.mod-bubble{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  border:2px solid var(--green);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:14px;color:var(--green);
}
.mod-card.disabled .mod-bubble{border-color:var(--border);color:var(--text-dim);}

.mod-status{font-family:var(--mono);font-size:10px;color:var(--green);margin-bottom:5px;}
.mod-card.disabled .mod-status{color:var(--text-dim);}
.mod-card h2{font-size:15px;margin:0 0 5px;}
.mod-card p{font-size:12.5px;color:var(--text-dim);margin:0;line-height:1.45;}

.user-bar{display:flex;align-items:center;gap:12px;}
.user-email{font-size:12.5px;color:var(--text-dim);font-family:var(--mono);}
.btn-logout{
  background:none;border:1px solid var(--border);border-radius:6px;padding:7px 12px;
  font-family:var(--sans);font-size:12.5px;color:var(--text-dim);cursor:pointer;
}
.btn-logout:hover{border-color:var(--red);color:var(--red);}