/* ===============================
   FMC IA — styles.css (v14)
   Thème sombre, layout responsive,
   sidebar tiroir mobile, bulles chat,
   modales, cookies, boutons.
   =============================== */

:root{
  --bg: #0f1020;
  --panel: #12132a;
  --card-bg: #141633;
  --text: #e7e7f0;
  --text-muted: #b2b3c7;
  --border: #24264a;
  --accent: #8b5cf6;   /* violet */
  --accent-2: #00f5a0; /* vert */
  --danger: #ff5577;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --gap: 14px;
}

/* Reset léger */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 15.5px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Liens */
a{ color:#9cc8ff; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Titres */
h1,h2,h3,h4{ margin:0 0 8px; line-height:1.2; }
h1{ font-size:22px; }
h2{ font-size:20px; }
h3{ font-size:18px; }

/* Layout principal */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.head{
  position:sticky; top:0; z-index:5;
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:12px 14px; display:flex; align-items:center; gap:10px;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.layout{
  display:grid; grid-template-columns: 280px 1fr; gap:0;
  min-height: calc(100vh - 60px);
}

/* Sidebar */
.sidebar{
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:14px; overflow:auto;
}
.sidebar h3{ margin-bottom:8px; font-size:16px; }
.conv{ list-style:none; margin:8px 0 10px; padding:0; display:flex; flex-direction:column; gap:8px; }
.conv li{
  background:#15173b; border:1px solid var(--border); border-radius:12px;
  padding:8px 10px; color:var(--text-muted); cursor:default;
}
.clear{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:7px 10px; border-radius:10px; cursor:pointer;
}
.clear:hover{ border-color:#3a3d70; }

/* Zone chat */
.chatcard{ display:flex; flex-direction:column; min-width:0; }
.card{
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.stream{
  flex:1; overflow:auto; padding:10px 12px 14px; min-height:220px;
}
.inputbar{
  position:sticky; bottom:0; z-index:3;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--panel) 35%);
  border-top:1px solid var(--border); padding:10px 12px 14px;
}
.ibox{ display:flex; gap:10px; align-items:center; }
.chat-input{
  flex:1; min-height:44px; border-radius:12px; border:1px solid var(--border);
  background:#0e0f24; color:var(--text); padding:10px 12px; outline:none;
}
.chat-input:focus{ border-color:#3b3f75; box-shadow:0 0 0 2px rgba(139,92,246,.15); }
.send{
  background:linear-gradient(180deg, #9b5ef9, #7b46e5);
  border:none; color:white; padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow: 0 6px 20px rgba(139,92,246,.35);
}
.send:hover{ filter:brightness(1.05); }

/* Messages */
.msg{ display:flex; align-items:flex-start; gap:10px; margin:8px 0; }
.avatar{
  min-width:26px; min-height:26px; border-radius:50%;
  background:linear-gradient(180deg, #00f5a0, #00bbf9);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
.msg.user .avatar{ background:linear-gradient(180deg,#8b5cf6,#5330d5); }
.b{
  max-width:980px; background:#15173b; border:1px solid var(--border);
  border-radius:16px; padding:12px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.msg.user .b{ background:#10123a; }
.content p{ margin:0 0 8px; }
.content ul{ margin:6px 0 8px 22px; }
.content pre{
  margin:10px 0; padding:12px; border-radius:12px; overflow:auto;
  background:#0e0f24; border:1px solid #2a2d55;
}
.typing{ color:var(--text-muted); font-size:13px; }
.muted{ color:var(--text-muted); }

/* Badge */
.badge{
  margin-left:auto; background:#1b1e46; color:#c7c8e5;
  border:1px solid var(--border); padding:6px 10px; border-radius:12px;
  font-size:12.5px;
}

/* Boutons */
.btn{
  background:linear-gradient(180deg,#9b5ef9,#7b46e5);
  border:none; color:#fff; padding:9px 12px; border-radius:10px; cursor:pointer;
  box-shadow: 0 6px 20px rgba(139,92,246,.35); font-weight:600;
}
.btn:hover{ filter:brightness(1.05); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-outline{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:9px 12px; border-radius:10px; cursor:pointer;
}
.btn-outline:hover{ border-color:#3a3d70; }

/* Footer */
.footer{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  align-items:center; color:var(--text-muted); padding:16px 12px;
  border-top:1px solid var(--border); background:var(--panel);
}
.footer a{ color:#c6d8ff; }

/* Table comparatif */
.compare th, .compare td{
  border-bottom:1px solid var(--border);
}

/* Modales */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50; }
.modal.hidden{ display:none; }
.modal__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.modal__panel{
  position:relative; z-index:1; background:var(--card-bg); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius); padding:18px;
  max-width:560px; width:96vw; box-shadow:var(--shadow);
}
.modal__panel h3{ margin-bottom:6px; }
.modal__actions{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }

/* Cookies */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:10px 12px;
  box-shadow: var(--shadow);
}
.cookie-banner.hidden{ display:none; }
.cookie-actions{ display:flex; gap:8px; }

/* Hamburger + tiroir mobile */
.hamburger{
  display:none; margin-right:8px; background:transparent;
  border:1px solid var(--border); border-radius:10px; padding:6px 10px; color:var(--text);
  cursor:pointer;
}
.drawer-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(1px); z-index:39; display:none;
}
.drawer-backdrop.show{ display:block; }

/* ===============================
   Responsive
   =============================== */

@media (max-width: 980px){
  .hamburger{ display:inline-flex; }
  .layout{ grid-template-columns: 1fr; min-height: calc(100vh - 60px); }

  /* sidebar en tiroir */
  .sidebar{
    position: fixed; inset: 0 auto 0 0;
    width: 84vw; max-width: 320px; transform: translateX(-105%);
    transition: transform .25s ease; z-index:40; box-shadow: var(--shadow);
  }
  .sidebar.open{ transform: translateX(0); }

  .card{ padding:12px; }
  .stream{ padding:8px 10px 12px; }
  .ibox{ gap:8px; }
  .chat-input{ min-height:42px; }
  .send{ white-space:nowrap; }

  /* bulles plus compactes */
  .msg .avatar{ width:22px; height:22px; }
  .b{ padding:10px 12px; border-radius:14px; }
  .content{ font-size:15px; line-height:1.45; }

  /* table en scroll si dépasse */
  .compare{ display:block; overflow:auto; }
  .compare th, .compare td{ white-space:nowrap; padding:8px 10px; }
}

@media (max-width: 380px){
  .content{ font-size:14.5px; }
  .send{ padding:8px 10px; }
}

/* iOS: hauteur viewport stable avec clavier */
@supports (height: 100svh){
  .layout{ min-height: calc(100svh - 60px); }
}