/* Habillage iD Solution des Studios (Specsheet Studio, Manuel Studio).
   Reprend l'identité du site i-dsolution.com : logo Signal, bleu Signal, fonds sombres, Plus Jakarta Sans.
   Chargé en dernier : il remplace les couleurs et l'allure de app.css et manuals-app.css sans les réécrire. */

:root {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --surface2: #f5f7fb;
  --line: #e2e7ef;
  --line2: #d2d9e4;
  --text: #0f1726;
  --muted: #5d687b;
  --primary: #2f7bff;
  --primary-ink: #ffffff;
  --primary-soft: #e8f0ff;
  --primary-ink-soft: #1b5fd6;
  --danger: #d23b30;
  --ok: #17895a;
  --stage: #0d1119;
  --radius: 10px;
  /* barre du haut et accueil, comme la navigation du site */
  --night: #05070a;
  --night-2: #0f1218;
  --night-3: #161b24;
  --night-line: rgba(255, 255, 255, .08);
  --night-text: #e8edf6;
  --night-muted: #93a0b5;
  --signal: linear-gradient(135deg, #5493ff, #2f7bff 55%, #1d5fe0);
  --studio-specsheet: linear-gradient(135deg, #5493ff, #2f7bff 55%, #1d5fe0);
  --studio-manuels: linear-gradient(135deg, #3ad0c1, #14a99a 55%, #0b8277);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
h1, h2, h3, .phead-n, .studio-card b { letter-spacing: -.015em; }

/* ---------- barre du haut ---------- */
.topbar { height: 58px; gap: 22px; background: var(--night); border-bottom: 1px solid var(--night-line); color: var(--night-text); }
.brand-logo { display: flex; align-items: center; flex: none; padding-right: 4px; }
.brand-logo img { height: 24px; width: auto; display: block; }
.studio-sw { background: var(--night-2); border-color: var(--night-line); }
.studio-sw button { color: var(--night-muted); }
.studio-sw button:hover { color: #fff; background: var(--night-3); }
.studio-sw .studio-home svg { width: 15px; height: 15px; }
.app[data-studio="specsheet"] .studio-sw [data-studio-go="specsheet"],
.app[data-studio="manuels"] .studio-sw [data-studio-go="manuels"] { color: #fff; background: var(--night-3); box-shadow: inset 0 0 0 1px var(--night-line); }
.studio-tile { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--studio-specsheet); box-shadow: 0 2px 8px rgba(47, 123, 255, .35); }
.studio-tile.m { background: var(--studio-manuels); box-shadow: 0 2px 8px rgba(20, 169, 154, .35); }
.studio-tile svg { width: 12px; height: 12px; color: #fff; stroke-width: 2.4; }
.nav button { color: var(--night-muted); border-radius: 8px; }
.nav button:hover { background: var(--night-3); color: #fff; }
.nav button.on { background: rgba(47, 123, 255, .16); color: #9cc0ff; }
.nav-n { background: #2f7bff; color: #fff; }
.qsearch { background: var(--night-2); border-color: var(--night-line); color: var(--night-muted); }
.qsearch:hover { border-color: rgba(255, 255, 255, .18); color: #fff; }
.qsearch kbd { background: var(--night-3); color: var(--night-muted); border-color: var(--night-line); }
.status, .me { color: var(--night-muted); }
.me-av { background: var(--signal); }
.topbar .btn.ghost { color: var(--night-muted); }
.topbar .btn.ghost:hover { background: var(--night-3); color: #fff; }

/* ---------- boutons, champs, sélections ---------- */
.btn { border-radius: 9px; }
.btn.primary { background: var(--primary); border-color: var(--primary); box-shadow: 0 2px 10px rgba(47, 123, 255, .28); }
.btn.primary:hover { filter: none; background: #1f6af0; border-color: #1f6af0; }
.btn.primary:disabled { background: #9db9ea; border-color: #9db9ea; color: #fff; box-shadow: none; }
.btn.icon.on { background: var(--primary-soft); color: var(--primary-ink-soft); }
.lang-sw button.on { background: var(--primary); }
.item.on, .titem.on, .rv-it.on { background: var(--primary-soft); }
.item.on .meta strong { color: var(--primary-ink-soft); }
.search:focus, .side-top select:focus, .f input:focus, .f select:focus, .f textarea:focus, .man-in:focus, .rt:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 123, 255, .15); }
.tip { background: #eef4ff; color: #2c4a7c; }
.spark, .askbar .spark, .assist-h .spark { background: linear-gradient(135deg, #2f7bff, #7a5cff); }
.modal { border-radius: 16px; box-shadow: 0 24px 60px rgba(5, 7, 10, .28); }
.modal-bg { background: rgba(5, 7, 10, .55); backdrop-filter: blur(3px); }
.toast { background: var(--night-2); border: 1px solid var(--night-line); }
.dd-menu { border-radius: 12px; box-shadow: 0 18px 44px rgba(5, 7, 10, .18); }

/* ---------- zone d'aperçu (fiche ou manuel) ---------- */
.stage-bar { background: var(--night-2); border-bottom-color: var(--night-line); color: var(--night-text); }
.stage-bar .btn.ghost { color: var(--night-muted); }
.stage-bar .btn.ghost:hover { background: var(--night-3); color: #fff; }
.btn.ghost-dark { border-color: rgba(255, 255, 255, .16); color: var(--night-text); }
.btn.ghost-dark:hover { background: var(--night-3); }

/* ---------- Manuel Studio ---------- */
.man-node.on { background: var(--primary-soft); color: var(--primary-ink-soft); }
.man-k-c, .man-k-p { background: #e8f0ff; color: #1b5fd6; }
.man-ai { border-color: #d6defa; background: #f4f7ff; }
.man-ai summary b, .man-ai summary::before { color: #3d5bd9; }
.man-fix-go { color: #3d5bd9; border-color: #d6defa; background: #f4f7ff; }

/* ---------- accueil des studios et connexion : fond sombre, comme le site ---------- */
.main:has(> .studios), .main:has(> .login) {
  background: radial-gradient(1100px 520px at 50% -10%, rgba(47, 123, 255, .22), transparent 60%), var(--night);
}
.studios { color: var(--night-text); padding-top: 72px; }
.studios-kicker { display: inline-flex; align-items: center; gap: 8px; color: #9cc0ff; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; }
.studios h1 { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.studios-sub { color: var(--night-muted); font-size: 15px; max-width: 620px; }
.studio-grid { gap: 18px; }
.studio-card { background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)); border: 1px solid var(--night-line); color: var(--night-text); border-radius: 18px; padding: 28px; }
.studio-card:hover { border-color: rgba(47, 123, 255, .55); box-shadow: 0 0 0 1px rgba(47, 123, 255, .25), 0 20px 50px rgba(47, 123, 255, .14); }
.studio-card.s-manuels:hover { border-color: rgba(20, 169, 154, .6); box-shadow: 0 0 0 1px rgba(20, 169, 154, .25), 0 20px 50px rgba(20, 169, 154, .14); }
.studio-card .studio-ic { width: 52px; height: 52px; border-radius: 15px; background: var(--studio-specsheet); box-shadow: 0 10px 26px rgba(47, 123, 255, .35); }
.studio-card.s-manuels .studio-ic { background: var(--studio-manuels); box-shadow: 0 10px 26px rgba(20, 169, 154, .35); }
.studio-card .studio-ic svg { width: 26px; height: 26px; color: #fff; stroke-width: 2; }
.studio-card b { color: #fff; font-size: 22px; font-weight: 800; }
.studio-card .studio-d { color: var(--night-muted); }
.studio-card .studio-k { background: rgba(255, 255, 255, .06); color: var(--night-text); border: 1px solid var(--night-line); }
.studio-card .studio-go { color: #7fb0ff; font-weight: 700; }
.studio-card.s-manuels .studio-go { color: #4fd8c9; }
.login-card { border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.login-card .brand-logo img { height: 26px; content: url("../assets/brands/id-solution-signal-print.svg"); }

/* barre du haut : tout sur une ligne (le logo ramène déjà à l'accueil) */
.studio-sw .studio-home { display: none; }
.nav { gap: 2px; }
.nav button, .qsearch, .qsearch span, .status, .me { white-space: nowrap; }
.nav button { display: inline-flex; align-items: center; padding: 8px 12px; }
.qsearch { gap: 10px; }
@media (max-width: 1360px) {
  .topbar { gap: 14px; }
  .studio-sw .studio-b { font-size: 0; gap: 0; padding: 6px; }
  .app[data-studio="specsheet"] .studio-sw [data-studio-go="specsheet"],
  .app[data-studio="manuels"] .studio-sw [data-studio-go="manuels"] { font-size: 13px; gap: 8px; padding: 6px 10px; }
}

/* Manuel Studio : la liste des manuels montre leur couverture */
.man-page h1 { font-size: 30px; font-weight: 800; }
.man-site-h { color: var(--text); font-size: 13px; text-transform: uppercase; letter-spacing: .8px; margin-top: 18px; }
.man-mgrid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.man-mcard { border-radius: 16px; transition: box-shadow .15s, border-color .15s, transform .15s; }
.man-mcard:hover { border-color: #c5d3ee; box-shadow: 0 16px 40px rgba(15, 23, 38, .10); transform: translateY(-2px); }
.man-mcov { display: block; width: 100%; height: 178px; overflow: hidden; border: 0; padding: 0; cursor: pointer; background: #0f1b2d; position: relative; }
.man-mcov .man-doc { width: 880px; zoom: .4; pointer-events: none; background: transparent; }
.man-mcov .cover-page { margin: 0; border-radius: 0; min-height: 445px; }
.man-mk { color: var(--primary-ink-soft); }
.man-back, .lnk.man-back { color: var(--primary-ink-soft); }
.lnk { color: var(--primary-ink-soft); }

/* écran de connexion */
.login-card { gap: 12px; }
.login-card .brand-logo { margin-bottom: 6px; }
.login-google { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; background: #fff; border: 1px solid var(--line2); padding: 9px 12px; }
.login-google:hover { background: var(--surface2); border-color: #b8c3d6; }
.login-google svg { width: 18px; height: 18px; }
.login-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.login-or[hidden], .login-google[hidden] { display: none; }
.login-link { align-self: center; text-align: center; font-size: 12.5px; }
.login-note { font-size: 12px !important; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.login { background: transparent; }