:root {
  --bg: #0f1115;
  --panel: #161a21;
  --panel-2: #12151b;
  --border: #262b35;
  --text: #e6e8eb;
  --muted: #8b93a1;
  --accent: #5b8cff;
  --accent-2: #7c5bff;
  --bubble-user: #2a3a63;
  --bubble-agent: #1c212b;
  --danger: #ff8a94;
}
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
button { font-family: inherit; }
a { color: var(--accent); }

.avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(91, 140, 255, 0.35);
}
.avatar svg { width: 17px; height: 17px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

/* ---------- Ecran auth (login.html) ---------- */
.auth-screen {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px;
}
.auth-card .avatar { width: 44px; height: 44px; margin: 0 auto 14px; }
.auth-card h2 { margin: 0 0 4px; text-align: center; font-size: 18px; }
.auth-card p.sub { margin: 0 0 20px; text-align: center; color: var(--muted); font-size: 13px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--accent); }
/* ---------- Systeme de boutons partage (toutes les pages) ---------- */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(91, 140, 255, 0.4); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }

/* Actions secondaires (annuler, retour...) : contour, pas de fond plein. */
.btn-secondary {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: #cfd8ff; }

/* Actions destructives (supprimer, revoquer...) : jamais un simple bouton nu. */
.btn-danger {
  background: rgba(255, 138, 148, 0.12);
  border: 1px solid rgba(255, 138, 148, 0.4);
  color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: rgba(255, 138, 148, 0.22); border-color: var(--danger); }

/* Actions tertiaires discretes (deconnexion, liens plats...). */
.btn-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 12px;
}
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }
.form-error {
  background: #3a1c22;
  border: 1px solid #6b2530;
  color: var(--danger);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
.form-error.show { display: block; }
.form-success {
  background: #17301f;
  border: 1px solid #2c5d3a;
  color: #8fe0a6;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
.form-success.show { display: block; }

/* ---------- Indicateur de robustesse de mot de passe (issue #100) ----------
   Confort uniquement : la regle qui fait foi reste celle du serveur. */
.password-strength { margin: -6px 0 12px; }
.password-strength-bar {
  height: 4px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.password-strength-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: var(--danger);
  transition: width 0.15s ease, background-color 0.15s ease;
}
.password-strength-label { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* ---------- Resultat d'une reinitialisation de mot de passe (issue #101) ----------
   Encart persistant ancre pres du bouton qui l'a declenche (pas un bandeau
   global en haut de page, hors du champ de vision sur un long tableau), tant
   que l'admin ne le ferme pas explicitement - le mot de passe n'est jamais
   reaffichable une fois quitte. */
.reset-password-result {
  background: #17301f;
  border: 1px solid #2c5d3a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.reset-password-result strong { display: block; color: #8fe0a6; }
.reset-password-value { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.reset-password-value code {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  user-select: all;
}
.reset-password-result p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

/* ---------- Landing page publique (index.html) ---------- */
.landing-hero {
  text-align: center;
  padding: 64px 20px 40px;
  max-width: 720px;
  margin: 0 auto;
}
.landing-hero .avatar { width: 56px; height: 56px; margin: 0 auto 18px; }
.landing-hero h1 { font-size: 32px; margin: 0 0 12px; letter-spacing: -0.3px; }
.landing-hero p.sub { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0 auto 28px; max-width: 560px; }
.landing-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.landing-cta-row .btn-primary, .landing-cta-row .btn-secondary { width: auto; margin-top: 0; padding: 13px 26px; }
.landing-section-title { text-align: center; margin: 8px auto 4px; max-width: 700px; }
.landing-section-title h2 { font-size: 22px; margin: 0 0 8px; }
.landing-section-title p { color: var(--muted); font-size: 14px; margin: 0; }
/* Formulaire de demande de devis (issue #59) */
.landing-quote {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 20px 24px;
}
.landing-quote h2 { font-size: 22px; margin: 0 0 6px; text-align: center; }
.landing-quote p.sub { color: var(--muted); font-size: 13.5px; margin: 0 0 20px; text-align: center; }
.quote-form-row { display: flex; gap: 12px; }
.quote-form-row .field { flex: 1; }
.landing-quote textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.landing-quote textarea:focus { border-color: var(--accent); }
/* Piege a robots : retire du flux ET de l'ordre de tabulation, jamais annonce
   aux lecteurs d'ecran (aria-hidden cote HTML) - un humain ne peut pas le remplir. */
.quote-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.landing-footer {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  padding: 40px 20px 30px;
}

@media (max-width: 560px) {
  .quote-form-row { flex-direction: column; gap: 0; }
}
.landing-footer a { color: var(--muted); text-decoration: underline; }

/* ---------- Choix d'agent (agents.html) ---------- */
.agents-screen {
  min-height: 100dvh;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}
.agents-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agents-header h2 { margin: 0; font-size: 22px; }
.agents-header .sub { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.agents-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.agent-card {
  --agent-color: var(--accent);
  --agent-color-2: var(--accent-2);
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}
.agent-card:hover { border-color: var(--agent-color); transform: translateY(-2px); }
.agent-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--agent-color), var(--agent-color-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--agent-color) 35%, transparent);
  margin-bottom: 14px;
}
.agent-card-icon svg { width: 24px; height: 24px; color: white; }
.agent-card-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.agent-card-label { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.agent-card-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---------- Layout commun chat.html / admin.html ---------- */
.layout {
  display: flex;
  height: 100dvh;
  max-width: 1080px;
  margin: 0 auto;
}
aside#sidebar {
  width: 250px;
  flex: none;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}
.sidebar-header { display: flex; align-items: center; gap: 8px; padding: 0 4px 14px; }
.sidebar-header .avatar { width: 26px; height: 26px; }
.sidebar-header span { font-size: 13.5px; font-weight: 600; }
.sidebar-link {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  margin-bottom: 10px;
}
.sidebar-link:hover { border-color: var(--accent); }
#conversation-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.conv-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 8px 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.conv-item-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item:hover { background: var(--panel); }
.conv-item.active { background: var(--panel); color: var(--text); }
.conv-item-delete {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.conv-item-delete svg { width: 14px; height: 14px; }
.conv-item:hover .conv-item-delete { display: flex; }
.conv-item-delete:hover { background: rgba(255, 138, 148, 0.16); color: var(--danger); }
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.sidebar-footer-user {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.sidebar-footer-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1px solid transparent;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover {
  color: #cfd8ff;
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.22), rgba(124, 91, 255, 0.22));
  border-color: var(--accent-2);
}
#logout-btn { flex: none; font-size: 12.5px; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0 16px; }
header {
  padding: 20px 4px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
header h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: 0.2px; }
header .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#export-btn {
  font-size: 12.5px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
#export-btn:hover { color: var(--text); border-color: var(--accent); }
header .status { font-size: 12px; color: var(--muted); }

/* ---------- Chat (chat.html) ---------- */
#messages { flex: 1; overflow-y: auto; padding: 20px 4px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.row.user { align-self: flex-end; flex-direction: row-reverse; }
.row.agent { align-self: flex-start; }
.msg {
  padding: 11px 14px;
  border-radius: 14px;
  line-height: 1.45;
  font-size: 14.5px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.user { background: var(--bubble-user); border-bottom-right-radius: 4px; }
.msg.agent { background: var(--bubble-agent); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.error { background: #3a1c22; border: 1px solid #6b2530; color: var(--danger); }
.msg.typing { background: var(--bubble-agent); border: 1px solid var(--border); color: var(--muted); font-style: italic; }
/* Rendu Markdown des reponses d'agent (issue #26, voir AGENT.renderMarkdown dans shared.js) */
.msg.agent ul { margin: 6px 0; padding-left: 20px; }
.msg.agent li { margin: 2px 0; }
.msg.agent code { background: rgba(255,255,255,0.08); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.msg.agent pre { background: rgba(255,255,255,0.08); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; }
.msg.agent pre code { background: none; padding: 0; }
.empty-hint { margin: auto; text-align: center; color: var(--muted); font-size: 14px; max-width: 320px; }

.attachment-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 4px 8px; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; color: var(--muted); width: fit-content;
}
.attachment-chip button {
  background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
}
.attachment-chip button:hover { color: var(--danger); }

form#composer { display: flex; gap: 10px; padding: 14px 4px 20px; border-top: 1px solid var(--border); align-items: flex-end; }
button#attach-btn {
  flex: none;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 12px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
button#attach-btn svg { width: 18px; height: 18px; }
button#attach-btn:hover { color: var(--text); border-color: var(--accent); }
#input {
  flex: 1; resize: none;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-family: inherit; outline: none;
}
#input:focus { border-color: var(--accent); }
button#send {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white; border: none; border-radius: 12px; padding: 0 20px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
button#send:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(91, 140, 255, 0.4); transform: translateY(-1px); }
button#send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Admin (admin.html) ---------- */
.admin-body { padding: 20px 4px; overflow-y: auto; flex: 1; }
.admin-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.admin-panel h2 { margin: 0 0 14px; font-size: 15px; }
table.users-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.users-table th, table.users-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
table.users-table th { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.role-badge.admin { background: rgba(124, 91, 255, 0.18); color: #b9a6ff; }
.role-badge.user { background: rgba(139, 147, 161, 0.18); color: var(--muted); }
.admin-form-row { display: flex; gap: 10px; align-items: flex-end; }
.admin-form-row .field { flex: 1; margin-bottom: 0; }
.admin-form-row .btn-primary { width: auto; margin-top: 0; padding: 10px 18px; white-space: nowrap; }

@media (max-width: 720px) {
  aside#sidebar { width: 200px; }
  .admin-form-row { flex-direction: column; align-items: stretch; }
}