/* Accueil AI-DEVHUB : panneau client (barre latérale + services). */
.console-page {
  --console-sidebar: 268px;
  --console-border: rgba(154, 177, 244, .18);
  --console-surface: rgba(13, 18, 36, .84);
  background:
    radial-gradient(circle at 8% 0%, rgba(26, 148, 255, .18), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(164, 54, 255, .14), transparent 32%),
    #080b15;
}

.console-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(14px, 3vw, 26px);
  border-bottom: 1px solid var(--console-border);
  background: rgba(8, 11, 21, .92);
  backdrop-filter: blur(14px);
}
.console-topbar__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.console-topbar__brand img { border-radius: 10px; }
.console-search { flex: 1 1 320px; max-width: 460px; margin-left: 8px; }
.console-search input { padding: 10px 14px; border-radius: 10px; font-size: .92rem; }
.console-topbar__actions { display: flex; gap: 10px; margin-left: auto; }
.console-burger {
  display: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--console-border);
  color: #dce5fb;
  font-weight: 700;
}

.console-layout {
  display: grid;
  grid-template-columns: var(--console-sidebar) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
  width: min(1440px, calc(100% - 2 * clamp(14px, 3vw, 26px)));
  margin: 0 auto;
  padding: clamp(16px, 2.6vw, 28px) 0 60px;
}

.console-sidebar {
  position: sticky;
  top: 76px;
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--console-border);
  border-radius: 18px;
  background: var(--console-surface);
}
.console-sidebar__group { display: grid; gap: 6px; }
.console-sidebar__title { margin: 0 0 4px; color: #72d7ff; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.console-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #c6d0ea;
  font-size: .93rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.console-sidebar a:hover, .console-sidebar a:focus-visible { background: rgba(97, 207, 255, .10); border-color: rgba(97, 207, 255, .28); color: #fff; }
.console-sidebar a[aria-current="page"] { background: rgba(97, 207, 255, .14); border-color: rgba(97, 207, 255, .34); color: #fff; }
.console-sidebar__icon { width: 26px; text-align: center; color: #9edfff; }
.console-sidebar__note { margin: 0; color: #93a1c3; font-size: .78rem; line-height: 1.5; }

.console-main { display: grid; gap: clamp(16px, 2.2vw, 24px); min-width: 0; }

.console-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--console-border);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(38, 185, 237, .14), rgba(124, 85, 245, .14)), var(--console-surface);
}
.console-welcome h1 { margin: 6px 0 10px; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -.03em; }
.console-welcome p { margin: 0; color: #bcc8e6; line-height: 1.6; max-width: 46rem; }
.console-welcome__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.console-chief-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(97, 207, 255, .26);
  border-radius: 16px;
  background: rgba(10, 15, 31, .86);
}
.console-chief-card__head { display: flex; align-items: center; gap: 12px; }
.console-chief-card__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(130deg, #26b9ed, #7c55f5);
  font-weight: 800;
}
.console-chief-card small { color: #97a4c4; }
.console-chief-card p { margin: 0; color: #cdd7ef; font-size: .92rem; line-height: 1.55; }

.console-block {
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid var(--console-border);
  border-radius: 20px;
  background: var(--console-surface);
}
.console-block > h2 { margin: 4px 0 8px; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.console-block__lead { color: #b6c2e0; line-height: 1.6; max-width: 48rem; }

.console-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin-top: 18px; }
.console-service {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--console-border);
  border-radius: 16px;
  background: rgba(9, 13, 27, .78);
}
.console-service:hover { border-color: rgba(97, 207, 255, .34); }
.console-service__icon { font-size: 1.3rem; color: #9edfff; }
.console-service h3 { margin: 0; font-size: 1.02rem; }
.console-service p { margin: 0; color: #b4c0de; font-size: .89rem; line-height: 1.55; }
.console-service a { justify-self: start; margin-top: 4px; color: #9edfff; font-size: .89rem; font-weight: 700; text-decoration: none; }
.console-service a:hover { text-decoration: underline; }
.console-service--free { border-color: rgba(143, 227, 188, .34); }
.console-empty { margin: 16px 0 0; color: #b4c0de; }

.console-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.console-steps li { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--console-border); border-radius: 16px; background: rgba(9, 13, 27, .78); }
.console-steps span { color: #b4c0de; font-size: .88rem; line-height: 1.55; }

.console-trust { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.console-trust li { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid var(--console-border); border-radius: 15px; background: rgba(9, 13, 27, .78); }
.console-trust span { color: #b4c0de; font-size: .87rem; line-height: 1.5; }

.console-page .auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 16px; }
.console-page .panel { margin-top: 0; }

.console-faq { display: grid; gap: 10px; margin-top: 16px; }
.console-faq details { padding: 15px 17px; border: 1px solid var(--console-border); border-radius: 14px; background: rgba(9, 13, 27, .78); }
.console-faq summary { cursor: pointer; font-weight: 700; }
.console-faq p { margin: 10px 0 0; color: #b6c2e0; line-height: 1.6; }

.console-page .button-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 11px 17px;
  background: linear-gradient(110deg, #26b9ed, #7c55f5);
  color: #fff;
  font-weight: 800;
  font-size: .93rem;
  text-decoration: none;
}
.console-page .button-link:hover { filter: brightness(1.08); }
.console-page .button-link.secondary { background: rgba(255, 255, 255, .06); border-color: rgba(154, 177, 244, .3); color: #dce5fb; }

.console-footer { border-top: 1px solid var(--console-border); background: rgba(8, 11, 21, .86); }
.console-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  width: min(1440px, calc(100% - 2 * clamp(14px, 3vw, 26px)));
  margin: 0 auto;
  padding: 26px 0;
}
.console-footer p { margin: 6px 0 0; color: #9aa7c7; font-size: .86rem; max-width: 42rem; }
.console-footer nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.console-footer a { color: #b9c5e2; font-size: .88rem; text-decoration: none; }
.console-footer a:hover { color: #fff; }

@media (max-width: 1080px) {
  .console-welcome { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .console-burger { display: inline-flex; }
  .console-search { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .console-topbar { flex-wrap: wrap; }
  .console-layout { grid-template-columns: minmax(0, 1fr); }
  .console-sidebar { position: static; }
  .console-sidebar[data-collapsed="true"] { display: none; }
}