/* MakeHub · le squelette MakeHub porte sur les pages de la forge : la petite barre
   laterale et le bandeau du haut. Les composants communs (en-tete de projet,
   onglets, menus, pied) vivent dans makehub-commun.css. Ici, on relie les
   variables --mh-* aux couleurs du theme actif et on cale la forge dans le cadre. */

:root {
  --mh-fond: var(--color-body);
  --mh-surface: var(--color-box-body);
  --mh-surface-2: var(--color-box-header);
  --mh-surface-3: var(--color-secondary-button);
  --mh-trait: var(--color-secondary);
  --mh-trait-fort: var(--color-input-border);
  --mh-encre: var(--color-text-dark);
  --mh-encre-2: var(--color-text-light);
  --mh-doux: var(--color-text-light-2);
  --mh-pale: var(--color-text-light-3);
  --mh-ocre: var(--color-primary);
  --mh-ocre-vif: var(--color-primary);
  --mh-sur-ocre: var(--color-primary-contrast);
  --mh-ocre-voile: var(--color-small-accent);
  --mh-ocre-texte: var(--color-warning-text);
  --mh-rupture: var(--color-error-text);
  --mh-ok: var(--color-success-text);
  --mh-ok-voile: var(--color-success-bg);
  --mh-vivant: var(--color-info-text);
  --mh-vivant-voile: var(--color-info-bg);
  --mh-ia: #7A54C3;
  --mh-ia-voile: #7A54C31f;
  --mh-f-titre: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --mh-f-ui: var(--fonts-regular);
  --mh-f-code: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --mh-rail: 78px;
  --mh-barre: 58px;
}

/* ------------------------------------------------------------------ squelette */
/* la page grandit avec son contenu : sinon le cadre reste haut comme la fenetre,
   et le bandeau epingle s'en va avec le defilement en laissant un vide en haut */
html, body { height: auto !important; }
body { background: var(--mh-surface); min-height: 100vh; }
body > .full.height { margin-left: var(--mh-rail); min-height: 100vh; background: var(--mh-surface); }


#navbar.mh-coquille { display: block; position: sticky; top: 0; z-index: 25; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; }

.mh-coquille .rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--mh-rail); z-index: 30;
  background: var(--mh-surface-2); border-right: 1px solid var(--mh-trait);
  display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 2px; overflow-y: auto;
}
.mh-coquille .rail > a {
  width: 62px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px;
  border-radius: 10px; text-decoration: none; color: var(--mh-doux); font-size: 10.5px; font-weight: 500;
}
.mh-coquille .rail > a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mh-coquille .rail > a.mh-logo { padding: 0; margin-bottom: 12px; width: auto; }
.mh-coquille .rail > a.mh-logo svg { width: 34px; height: 34px; stroke: none; }
.mh-coquille .rail > a:hover { color: var(--mh-encre); }
.mh-coquille .rail > a.actif { background: var(--mh-ocre-voile); color: var(--mh-ocre-texte); }
.mh-coquille .rail .bas { margin-top: auto; display: grid; place-items: center; gap: 10px; }
.mh-coquille .rail .bas a { padding: 0; width: auto; }
.mh-coquille .avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.mh-coquille .avatar img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin: 0 !important; }

.mh-coquille .barre {
  position: relative; height: var(--mh-barre); background: var(--mh-surface);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,420px) minmax(0,1fr); align-items: center; gap: 18px;
  padding: 0 20px; border-bottom: 1px solid var(--mh-trait);
}
.mh-coquille .fil { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; color: var(--mh-encre); }
.mh-coquille .fil a { color: inherit; text-decoration: none; }
.mh-coquille .fil a:hover { text-decoration: underline; }
.mh-coquille .fil .sep { color: var(--mh-pale); font-weight: 400; }
.mh-coquille .fil .gris { color: var(--mh-doux); font-weight: 500; }
.mh-coquille .commande {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px;
  background: var(--mh-surface-2); border: 1px solid var(--mh-trait); color: var(--mh-pale); font-size: 13px;
}
.mh-coquille .commande input { flex: 1; border: 0 !important; background: transparent !important; font: inherit; color: var(--mh-encre); outline: none; box-shadow: none !important; padding: 0 !important; min-width: 0; }
.mh-coquille .commande kbd { font-family: var(--mh-f-code); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--mh-trait-fort); color: var(--mh-doux); background: var(--mh-surface); }
.mh-coquille .droite { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.mh-coquille .btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--mh-trait-fort); background: var(--mh-surface); color: var(--mh-encre);
  font: 600 13px var(--mh-f-ui); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.mh-coquille .btn:hover { border-color: var(--mh-encre-2); color: var(--mh-encre); }
.mh-coquille .btn-prim { background: var(--mh-ocre); border-color: var(--mh-ocre); color: var(--color-primary-contrast); }
.puce { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--mh-surface-3); color: var(--mh-encre-2); white-space: nowrap; }

/* ------------------------------------------------------------------ contenu : toute la largeur */
body > .full.height > .page-content { padding-top: 0; }
body > .full.height .page-content > .ui.container { width: auto !important; max-width: none !important; margin: 0 !important; padding: 20px 26px 28px; }
body > .full.height .page-content > .ui.tabs.divider { display: none; }

/* composants de la forge, a la maniere de MakeHub */
.full.height { font-size: 14px; }
.full.height h1, .full.height h2, .full.height h3, .full.height .ui.header { font-family: var(--mh-f-titre); letter-spacing: -.015em; }
.full.height .ui.segment, .full.height .ui.table, .full.height .ui.attached.segment { border-color: var(--mh-trait); box-shadow: none; }
.full.height .ui.segment:not(.attached), .full.height .ui.table:not(.attached) { border-radius: 12px; }
.full.height .ui.top.attached.header, .full.height .ui.top.attached.segment { border-radius: 12px 12px 0 0; }
.full.height .ui.bottom.attached.segment, .full.height .ui.bottom.attached.table { border-radius: 0 0 12px 12px; }
.full.height .ui.attached.header { background: var(--mh-surface-2); border-color: var(--mh-trait); font-size: 13.5px; font-weight: 700; }
.full.height .ui.button { border-radius: 9px; font-weight: 600; }
.full.height .ui.primary.button, .full.height .ui.primary.buttons .button { background: var(--mh-ocre); color: var(--color-primary-contrast); }
.full.height .ui.basic.button { border-color: var(--mh-trait-fort); }
.full.height .ui.label { border-radius: 99px; font-weight: 600; }
.full.height .ui.form input:not([type=checkbox]):not([type=radio]), .full.height .ui.input > input, .full.height .ui.form textarea, .full.height .ui.dropdown.selection { border-radius: 9px; border-color: var(--mh-trait-fort); }
.full.height .ui.secondary.pointing.menu .item.active { border-color: var(--mh-ocre); }
.full.height .flex-list > .flex-item { border-color: var(--mh-trait); }

/* ------------------------------------------------------------------ petits ecrans */
@media (max-width: 860px) {
  .mh-coquille .rail { display: none; }
  body > .full.height { margin-left: 0; }
  .mh-coquille .barre { grid-template-columns: minmax(0,1fr) auto; }
  :root { --mh-barre: 104px; }
  .mh-coquille .barre { row-gap: 8px; padding-block: 10px; align-content: center; }
  .mh-coquille .barre .commande { grid-column: 1 / -1; grid-row: 2; }
}