/* MakeHub · composants communs a TOUTES les pages : celles de MakeHub et celles de
   la forge chargent ce meme fichier. Il n'utilise que des variables --mh-*, que
   chaque cote relie a ses couleurs (makehub.css d'un cote, makehub-forge.css de
   l'autre). Une seule forme, donc une seule plateforme. */

/* ------------------------------------------------------------------ en-tete de projet */
.mh-projet { background: var(--mh-surface); padding: 16px 26px 2px; }
.mh-projet-tete { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.mh-projet-nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 19px; font-family: var(--mh-f-titre); font-weight: 700; letter-spacing: -.015em; color: var(--mh-encre); min-width: 0; }
.mh-projet-nom svg { color: var(--mh-doux); flex: none; }
.mh-projet-nom a { color: inherit; text-decoration: none; }
.mh-projet-nom a:hover { text-decoration: underline; }
.mh-projet-nom a.gris { color: var(--mh-doux); font-weight: 500; }
.mh-projet-nom .sep { color: var(--mh-pale); font-weight: 400; }
.mh-projet-nom .puce { font-family: var(--mh-f-ui); letter-spacing: 0; }
.mh-projet-info { margin-top: 4px; font-size: 12.5px; color: var(--mh-doux); }
.mh-projet-info a { color: var(--mh-encre-2); }

/* gestes : suivre, etoile, deriver (boutons de la forge ou de MakeHub, meme allure) */
.mh-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mh-gestes form { margin: 0; display: inline-flex; }
.mh-gestes .ui.labeled.button, .mh-geste { display: inline-flex !important; align-items: stretch; margin: 0 !important; box-shadow: none !important; border: 1px solid var(--mh-trait-fort); border-radius: 9px; overflow: hidden; background: var(--mh-surface); }
.mh-gestes .ui.labeled.button > .button, .mh-geste > button, .mh-geste > a.mh-geste-action {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 10px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: var(--mh-surface) !important; color: var(--mh-encre) !important; font: 600 12.5px var(--mh-f-ui) !important; cursor: pointer; text-decoration: none;
}
.mh-gestes .ui.labeled.button > .label, .mh-geste > .mh-geste-n {
  display: inline-flex !important; align-items: center; height: 30px !important; margin: 0 !important; padding: 0 9px !important;
  border: 0 !important; border-left: 1px solid var(--mh-trait) !important; border-radius: 0 !important;
  background: var(--mh-surface-2) !important; color: var(--mh-encre-2) !important; font: 600 12px var(--mh-f-code) !important; text-decoration: none;
}
.mh-gestes .ui.labeled.button > .button:hover, .mh-geste > button:hover, .mh-geste > a.mh-geste-action:hover { background: var(--mh-surface-2) !important; }
.mh-gestes svg { width: 16px; height: 16px; fill: currentColor; }
.mh-gestes > .ui.button { height: 30px; border-radius: 9px; }

/* ------------------------------------------------------------------ onglets du projet
   Une seule ligne, epinglee sous le bandeau : le contenu defile derriere. Ce qui
   ne tient pas sur la ligne passe dans le bouton « … » (makehub-commun.js). */
.mh-onglets {
  position: sticky; top: var(--mh-barre, 58px); z-index: 20; display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0 2px;
  padding: 6px 26px 0; background: var(--mh-surface); border-bottom: 1px solid var(--mh-trait); min-width: 0;
}
.mh-onglets > a, .mh-onglets > .mh-plus > summary {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px 10px; white-space: nowrap; cursor: pointer;
  color: var(--mh-encre-2); font: 500 13.5px var(--mh-f-ui); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mh-onglets > a[hidden], .mh-onglets > .mh-plus[hidden] { display: none; }
.mh-onglets svg { width: 16px; height: 16px; fill: currentColor; color: var(--mh-doux); flex: none; }
.mh-onglets > a:hover, .mh-onglets > .mh-plus > summary:hover { color: var(--mh-encre); }
.mh-onglets > a.actif, .mh-onglets > .mh-plus.actif > summary { color: var(--mh-encre); font-weight: 700; border-bottom-color: var(--mh-ocre); }
.mh-onglets > a.actif svg, .mh-onglets > .mh-plus.actif > summary svg { color: var(--mh-ocre); }
.mh-onglets em { font-style: normal; font-family: var(--mh-f-code); font-size: 11px; padding: 0 6px; line-height: 18px; border-radius: 99px; background: var(--mh-surface-3); color: var(--mh-encre-2); }
.mh-onglets > .mh-onglet-droite { margin-left: auto; }
.mh-onglets > .mh-plus { flex: none; position: relative; }
.mh-onglets > .mh-plus > summary { padding-inline: 10px; }
.mh-onglets > .mh-plus > .menu-mh-liste { right: 0; }
.mh-onglets .menu-mh-liste a { display: flex; align-items: center; gap: 8px; }
.mh-onglets .menu-mh-liste a.actif { background: var(--mh-ocre-voile); color: var(--mh-ocre-texte); font-weight: 600; }
.mh-onglets .menu-mh-liste em { margin-left: auto; }
html { scroll-padding-top: calc(var(--mh-barre, 58px) + 56px); }

/* ------------------------------------------------------------------ menus deroulants */
.menu-mh { position: relative; }
.menu-mh > summary { list-style: none; }
.menu-mh > summary::-webkit-details-marker { display: none; }
.menu-mh-liste {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; z-index: 60; padding: 6px;
  background: var(--mh-surface); border: 1px solid var(--mh-trait-fort); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); display: grid;
}
.menu-mh-liste a { padding: 8px 10px; border-radius: 8px; color: var(--mh-encre); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.menu-mh-liste a:hover { background: var(--mh-surface-2); }
.mh-cloche { position: relative; padding: 0 10px !important; }
.mh-cloche em { font-style: normal; font-family: var(--mh-f-code); font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 99px; background: var(--mh-rupture); color: #fff; }

@media (max-width: 860px) {
  .mh-projet { padding: 12px 16px 2px; }
  .mh-onglets { padding: 4px 16px 0; }
  .mh-onglets > a span, .mh-onglets > .mh-plus > summary span { display: none; }
}

/* ------------------------------------------------------------------ le compte, en bas de la barre laterale */
.rail .bas { margin-top: auto !important; width: 62px; padding: 12px 0 6px !important; display: grid !important; place-items: center; gap: 0 !important; border-top: 1px solid var(--mh-trait); }
.rail a.mh-avatar-lien { display: flex !important; flex-direction: column; align-items: center; gap: 5px; width: 62px !important; padding: 6px 0 !important; border-radius: 10px; font-size: 10.5px; font-weight: 500; color: var(--mh-doux); text-decoration: none; }
.rail a.mh-avatar-lien:hover { color: var(--mh-encre); background: var(--mh-surface-3); }
.rail a.mh-avatar-lien .avatar { width: 38px !important; height: 38px !important; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--mh-surface), 0 0 0 4px var(--mh-ocre-voile); font-size: 13px; font-weight: 700; background: var(--mh-encre); color: var(--mh-surface); }
.rail a.mh-avatar-lien .avatar img { width: 38px !important; height: 38px !important; border-radius: 50%; object-fit: cover; margin: 0 !important; }

/* ------------------------------------------------------------------ contenus MakeHub poses dans une page de la forge */
.mh-fragment {
  --encre: var(--mh-encre); --encre-2: var(--mh-encre-2); --doux: var(--mh-doux); --pale: var(--mh-pale);
  --trait: var(--mh-trait); --trait-fort: var(--mh-trait-fort); --ocre: var(--mh-ocre); --ocre-vif: var(--mh-ocre);
  --ok: var(--mh-ok); --vivant: var(--mh-vivant); --ia: var(--mh-ia);
  display: block; margin-top: 14px; color: var(--mh-encre); font-size: 14px; font-family: var(--mh-f-ui);
}
.mh-fragment .grille-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,340px); gap: 18px; align-items: start; }
.mh-fragment .sur { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mh-pale); }
.mh-fragment .panneau { border: 1px solid var(--mh-trait); border-radius: 12px; background: var(--mh-surface); overflow: hidden; }
.mh-fragment .panneau-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--mh-trait); }
.mh-fragment .panneau-t h4 { margin: 0; font: 700 14px var(--mh-f-ui); letter-spacing: 0; color: var(--mh-encre); }
.mh-fragment .liste { width: 100%; border-collapse: collapse; }
.mh-fragment .liste td { padding: 9px 16px; border-top: 1px solid var(--mh-trait); font-size: 13px; }
.mh-fragment .liste tr:first-child td { border-top: 0; }
.mh-fragment .vide { padding: 20px 16px; text-align: center; color: var(--mh-doux); font-size: 13px; }
.mh-fragment .doux { color: var(--mh-doux); }
.mh-fragment .mono { font-family: var(--mh-f-code); }
.mh-fragment .lien { color: var(--mh-encre); text-decoration: none; }
.mh-fragment .lien:hover { text-decoration: underline; }
.mh-fragment .epingles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.mh-fragment .epingle { display: block; border: 1px solid var(--mh-trait); border-radius: 12px; padding: 14px 16px; background: var(--mh-surface); color: inherit; text-decoration: none; }
.mh-fragment .epingle:hover { border-color: var(--mh-trait-fort); }
.mh-fragment .epingle h5 { margin: 0; font: 700 14.5px var(--mh-f-ui); display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--mh-encre); }
.mh-fragment .epingle p { margin: 6px 0 10px; color: var(--mh-doux); font-size: 13px; }
.mh-fragment .bas-e { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mh-doux); align-items: center; }
.mh-fragment .point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.mh-fragment .puce.ok { background: var(--mh-ok-voile); color: var(--mh-ok); }
.mh-fragment .puce.viv { background: var(--mh-vivant-voile); color: var(--mh-vivant); }
.mh-fragment .puce.ocr { background: var(--mh-ocre-voile); color: var(--mh-ocre-texte); }
.mh-fragment .puce.ia { background: var(--mh-ia-voile); color: var(--mh-ia); }
.mh-fragment .pouls { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mh-fragment .legende-mini { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--mh-doux); }
.mh-fragment .legende-mini i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.mh-fragment .rythme svg { display: block; width: 100%; height: auto; }
.mh-fragment .rythme text { font-family: var(--mh-f-code); font-size: 10px; fill: var(--mh-pale); }
.mh-fragment .compteurs-rythme { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--mh-trait); }
.mh-fragment .compteurs-rythme div { padding: 12px 16px; border-left: 1px solid var(--mh-trait); display: grid; }
.mh-fragment .compteurs-rythme div:first-child { border-left: 0; }
.mh-fragment .compteurs-rythme b { font-family: var(--mh-f-titre); font-size: 22px; }
.mh-fragment .compteurs-rythme span { font-size: 12px; color: var(--mh-doux); }
@media (max-width: 1100px) { .mh-fragment .grille-2, .mh-fragment .epingles { grid-template-columns: 1fr; } }

/* image du projet ou de l'espace, dans l'en-tete */
.mh-projet-nom img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; display: block; }
.mh-projet-image { display: inline-flex; align-items: center; border-radius: 8px; }
.mh-projet-image:hover { box-shadow: 0 0 0 2px var(--mh-ocre-voile); text-decoration: none !important; }

/* ------------------------------------------------------------------ le compte, en haut a droite : une image ronde */
.menu-mh > summary.mh-compte { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.mh-compte .avatar { width: 34px !important; height: 34px !important; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--mh-encre); color: var(--mh-surface); box-shadow: 0 0 0 1px var(--mh-trait-fort); transition: box-shadow .15s; }
.mh-compte .avatar img { width: 34px !important; height: 34px !important; border-radius: 50%; object-fit: cover; margin: 0 !important; }
.menu-mh > summary.mh-compte:hover .avatar, .menu-mh[open] > summary.mh-compte .avatar { box-shadow: 0 0 0 2px var(--mh-surface), 0 0 0 4px var(--mh-ocre); }
.menu-mh-tete { display: grid; gap: 1px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--mh-trait); }
.menu-mh-tete b { color: var(--mh-encre); font-size: 13.5px; }
.menu-mh-tete span { color: var(--mh-doux); font-size: 12px; }
.menu-mh-themes { display: grid; gap: 6px; padding: 8px 10px 10px; margin: 4px 0; border-top: 1px solid var(--mh-trait); border-bottom: 1px solid var(--mh-trait); }
.menu-mh-themes > span { font-size: 11.5px; font-weight: 600; color: var(--mh-doux); }
.menu-mh-themes > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 9px; background: var(--mh-surface-2); }
.menu-mh-themes button { height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--mh-encre-2); font: 600 12px var(--mh-f-ui); cursor: pointer; }
.menu-mh-themes button:hover { color: var(--mh-encre); }
.menu-mh-themes button.actif { background: var(--mh-surface); color: var(--mh-encre); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* ------------------------------------------------------------------ le coin : le logo et le nom, d'un seul tenant
   La barre laterale et le bandeau ne font qu'une seule barre, de la meme couleur et
   sans trait entre elles : seul le bord qui les separe du contenu est trace. */
.rail {
  padding-top: 0 !important; border-right: 0 !important;
  background:
    linear-gradient(var(--mh-trait), var(--mh-trait)) right var(--mh-barre, 58px) / 1px calc(100% - var(--mh-barre, 58px)) no-repeat,
    var(--mh-surface) !important;
}
.rail > * { flex: none !important; }
.rail { scrollbar-width: none; }
.rail > a.mh-logo { width: 78px !important; height: var(--mh-barre, 58px) !important; padding: 0 !important; margin: 0 0 10px !important; display: grid !important; place-items: center; border-radius: 0 !important; background: none !important; }
.rail > a.mh-logo svg { width: 38px !important; height: 38px !important; margin: 0 !important; }
.barre { padding-left: 0 !important; }
.barre > .mh-gauche { justify-self: start; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mh-gauche > .mh-marque { font: 800 21px/1 var(--mh-f-titre); letter-spacing: -.035em; color: var(--mh-encre); text-decoration: none; white-space: nowrap; }
.mh-gauche > .mh-marque:hover { color: var(--mh-encre); }

/* ------------------------------------------------------------------ le bouton de langue, a cote de la marque */
.mh-langue > summary.mh-langue-bouton {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; margin: 0;
  border: 1px solid var(--mh-trait-fort); border-radius: 8px; background: var(--mh-surface); color: var(--mh-encre-2);
  font: 600 12px/1 var(--mh-f-ui); letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.mh-langue > summary.mh-langue-bouton:hover, .mh-langue[open] > summary.mh-langue-bouton { color: var(--mh-encre); border-color: var(--mh-encre-2); }
.mh-langue > summary.mh-langue-bouton:focus-visible { outline: 2px solid var(--mh-ocre); outline-offset: 2px; }
.mh-langue-code { text-transform: uppercase; }
.mh-langue > .mh-langue-liste { left: 0; right: auto; min-width: 230px; max-height: min(70vh, 520px); overflow-y: auto; gap: 1px; margin: 0; }
.mh-langue-titre { padding: 6px 10px 8px; font-size: 11.5px; font-weight: 600; color: var(--mh-doux); }
.mh-langue-liste button {
  display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: start;
  color: var(--mh-encre); font: 500 13.5px var(--mh-f-ui); cursor: pointer;
}
.mh-langue-liste button:hover, .mh-langue-liste button:focus-visible { background: var(--mh-surface-2); outline: none; }
.mh-langue-liste button.actif { background: var(--mh-ocre-voile); color: var(--mh-ocre-texte); font-weight: 600; }
.mh-langue-aide { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--mh-trait); font-size: 11.5px; line-height: 1.4; color: var(--mh-doux); }
@media (max-width: 860px) { .mh-langue > .mh-langue-liste { position: fixed; top: 56px; left: 12px; right: 12px; min-width: 0; } }
@media (max-width: 860px) { .barre { padding-left: 16px !important; } }
.mh-chrono { position: relative; padding: 0 10px !important; color: var(--mh-ocre-texte) !important; }
.mh-chrono svg { fill: currentColor; }
.mh-chrono .header-stopwatch-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--mh-ocre); }

/* ------------------------------------------------------------------ sur telephone : la barre laterale passe en bas */
@media (max-width: 860px) {
  .rail {
    display: flex !important; position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: auto !important; height: 60px !important; flex-direction: row !important; align-items: stretch !important; justify-content: space-around;
    padding: 0 !important; gap: 0 !important; z-index: 40 !important; overflow-x: auto; overflow-y: hidden;
    background: var(--mh-surface) !important; border-top: 1px solid var(--mh-trait);
  }
  .rail > a { flex: 1 0 auto !important; width: auto !important; min-width: 58px; padding: 7px 4px 5px !important; border-radius: 0 !important; justify-content: center; }
  .rail > a.mh-logo { display: none !important; }
  body { padding-bottom: 60px; }
}

/* ------------------------------------------------------------------ les deux vues d'une meme realite */
.mh-vues { display: flex; justify-content: flex-end; padding: 12px 26px 0; }
.mh-vues + .ui.container, .mh-vues + .bande, .mh-vues + .zone { padding-top: 12px !important; }
.mh-vues > a {
  padding: 6px 12px; font: 600 12.5px var(--mh-f-ui); color: var(--mh-encre-2); text-decoration: none;
  border: 1px solid var(--mh-trait-fort); background: var(--mh-surface);
}
.mh-vues > a:first-child { border-radius: 9px 0 0 9px; }
.mh-vues > a:last-child { border-radius: 0 9px 9px 0; border-left: 0; }
.mh-vues > a:hover { color: var(--mh-encre); background: var(--mh-surface-2); }
.mh-vues > a.actif { background: var(--mh-encre); border-color: var(--mh-encre); color: var(--mh-surface); }
@media (max-width: 860px) { .mh-vues { padding: 10px 16px 0; } }

/* ------------------------------------------------------------------ la veille en direct */
#mh-notifications { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 8px; width: min(380px, calc(100vw - 36px)); }
.mh-notif {
  display: grid; gap: 3px; padding: 12px 14px 11px; border-radius: 12px; text-decoration: none; color: var(--mh-encre);
  background: var(--mh-surface); border: 1px solid var(--mh-trait-fort); border-left: 4px solid var(--mh-ocre);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.4); animation: mh-entree .25s ease-out; transition: opacity .35s, transform .35s;
}
.mh-notif.rupture { border-left-color: var(--mh-rupture); }
.mh-notif.conflit { border-left-color: var(--mh-ocre); }
.mh-notif.resolu { border-left-color: var(--mh-ok); }
.mh-notif b { font-size: 13.5px; }
.mh-notif span { font-size: 12.5px; color: var(--mh-encre-2); overflow-wrap: anywhere; }
.mh-notif small { font-size: 11.5px; color: var(--mh-doux); }
.mh-notif.part { opacity: 0; transform: translateY(6px); }
@keyframes mh-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mh-notif { animation: none; transition: none; } }
@media (max-width: 860px) { #mh-notifications { bottom: 72px; } }

.mh-alertes { margin-bottom: 18px; }
.mh-direct { list-style: none; margin: 0; padding: 0; }
.mh-direct:empty { display: none; }
.mh-alerte { border-top: 1px solid var(--mh-trait); }
.mh-alerte:first-child { border-top: 0; }
.mh-alerte > a { display: grid; gap: 2px; padding: 11px 16px 2px 20px; text-decoration: none; color: var(--mh-encre); position: relative; }
.mh-alerte > a::before { content: ""; position: absolute; left: 8px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--mh-ocre); }
.mh-alerte.rupture > a::before { background: var(--mh-rupture); }
.mh-alerte > a b { font-size: 13.5px; }
.mh-alerte > a span { font-size: 12.5px; color: var(--mh-encre-2); overflow-wrap: anywhere; }
.mh-alerte > small { display: block; padding: 0 16px 10px 20px; font-size: 11.5px; color: var(--mh-doux); }
.mh-alerte > a:hover b { text-decoration: underline; }
.mh-alerte.nouveau { animation: mh-entree .3s ease-out; background: var(--mh-ocre-voile); }
.mh-notif.livraison { border-left-color: var(--mh-ok); }
.mh-notif.echec { border-left-color: var(--mh-rupture); }
.mh-notif.secret { border-left-color: var(--mh-rupture); }
.mh-alerte.secret > a::before { background: var(--mh-rupture); }
.mh-notif.faille { border-left-color: var(--mh-rupture); }

/* ---- recherche dans les pages de la forge ---- */
/* Page Recherche : aide a la requete, reglages (vue, contexte, casse),
   extraits avec contexte et liens vers la ligne. A fusionner dans makehub.css
   (le lien vers ce fichier dans recherche.tmpl pourra alors etre retire). */

.rch-aide{border:1px solid var(--trait);border-radius:10px;background:var(--surface-2);padding:9px 14px;margin-bottom:12px;font-size:13px;display:grid;gap:6px}
.rch-aide.rch-erreur{border-color:var(--rupture);background:var(--rupture-voile);color:var(--encre)}
.rch-aide.rch-erreur b{color:var(--rupture)}
.rch-position{font-size:12.5px;white-space:pre-wrap;word-break:break-all}
.rch-position mark{background:var(--rupture);color:var(--surface);border-radius:3px;padding:0 2px}

.rch-reglages{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px;font-size:12.5px}
.rch-groupe{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--trait);border-radius:8px;padding:2px;background:var(--surface)}
.rch-groupe .doux{padding:0 6px}
.rch-groupe a{padding:3px 9px;border-radius:6px;text-decoration:none;color:var(--doux);font-weight:500}
.rch-groupe a:hover{color:var(--encre)}
.rch-groupe a.on{background:var(--ocre-voile);color:var(--ocre-texte);font-weight:700}
.rch-casse{margin-left:auto}
.rch-casse a{font-family:var(--f-code)}

.rch-puces{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.resultat.rch-fichier header{border-bottom:0}
.extrait div.rch-contexte span:last-child{color:var(--doux)}
.extrait div.rch-saut span{color:var(--pale)}
.extrait div span:first-child a{color:inherit;text-decoration:none}
.extrait div span:first-child a:hover{color:var(--ocre-texte);text-decoration:underline}
.rch-coupe{font-size:12.5px}
.rch-frais{color:var(--vivant);font-weight:600}

@media (max-width:640px){
  .rch-casse{margin-left:0}
  .resultat header{flex-wrap:wrap;gap:6px}
}

/* Recherche limitee a un projet, usages d'un nom */
.rch-portee{display:flex;flex-wrap:wrap;gap:6px 16px}

/* Champ de recherche d'une page de projet (Contrats) */

/* Page Proposition : usages ailleurs des fonctions modifiees */
.rch-impact{margin-bottom:14px}
.rch-impact ul{list-style:none;margin:0;padding:0}
.rch-impact li{padding:10px 16px;border-top:1px solid var(--trait);display:grid;gap:6px}
.rch-impact li:first-child{border-top:0}
.rch-impact-nom{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.rch-impact-nom .lien{margin-left:auto;font-size:12.5px}
.rch-impact .extrait{margin:0}
.rch-impact-plus{margin:0;font-size:12.5px}

/* ---- Pages de code de la forge (variables --mh-* : les deux cotes les definissent) ---- */

.mh-symbole{position:absolute;z-index:1000;min-width:210px;display:grid;padding:6px;border:1px solid var(--mh-trait-fort);border-radius:10px;background:var(--mh-surface);box-shadow:0 8px 24px rgba(0,0,0,.14);font:13px var(--mh-f-ui)}
.mh-symbole-nom{padding:4px 8px 6px;font:500 12.5px var(--mh-f-code);color:var(--mh-doux);border-bottom:1px solid var(--mh-trait);margin-bottom:4px;overflow-wrap:anywhere}
.mh-symbole a{padding:6px 8px;border-radius:6px;color:var(--mh-encre);text-decoration:none}
.mh-symbole a:hover,.mh-symbole a:focus{background:var(--mh-surface-2);outline:0}

.mh-plan{position:relative;margin-left:10px;font:13px var(--mh-f-ui)}
.mh-plan > summary{cursor:pointer;list-style:none;padding:2px 9px;border:1px solid var(--mh-trait);border-radius:7px;color:var(--mh-encre-2);font-weight:600}
.mh-plan > summary::-webkit-details-marker{display:none}
.mh-plan > summary em{font-style:normal;color:var(--mh-doux);margin-left:4px;font-weight:500}
.mh-plan > ol{position:absolute;z-index:900;left:0;top:calc(100% + 6px);width:min(360px,80vw);max-height:60vh;overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--mh-trait-fort);border-radius:10px;background:var(--mh-surface);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.mh-plan li a{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:6px;color:var(--mh-encre);text-decoration:none}
.mh-plan li a:hover{background:var(--mh-surface-2)}
.mh-plan li a span{font-family:var(--mh-f-code);overflow-wrap:anywhere}
.mh-plan li a small{color:var(--mh-doux);white-space:nowrap}
.mh-plan li.mh-plan-enfant a{padding-left:22px}

/* l'en-tete de fichier de la forge coupe ce qui depasse : le plan doit pouvoir s'ouvrir par-dessus le code */
.file-header:has(.mh-plan){overflow:visible}

/* ---- recherche (vague 3) : suggestions sous la barre du haut, sur toutes les pages ---- */
form.commande[role=search]{position:relative}
.mh-suggestions{position:absolute;z-index:1100;left:0;right:0;top:calc(100% + 6px);max-height:min(70vh,520px);overflow:auto;display:grid;padding:6px;border:1px solid var(--mh-trait-fort);border-radius:10px;background:var(--mh-surface);box-shadow:0 10px 28px rgba(0,0,0,.16);font:13px var(--mh-f-ui);text-align:left}
.mh-suggestions p{margin:6px 8px 2px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mh-doux)}
.mh-suggestions a{display:grid;gap:1px;padding:6px 8px;border-radius:6px;color:var(--mh-encre);text-decoration:none;min-width:0}
.mh-suggestions a b{font:500 13px var(--mh-f-code);overflow-wrap:anywhere}
.mh-suggestions a small{color:var(--mh-doux);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-suggestions a:hover,.mh-suggestions a.on{background:var(--mh-surface-2);outline:0}
.mh-suggestions .mh-suggestions-tout{margin-top:4px;border-top:1px solid var(--mh-trait);border-radius:0 0 6px 6px;color:var(--mh-encre-2)}
.mh-suggestions .mh-suggestions-avance{margin-top:2px;border-top:1px solid var(--mh-trait);border-radius:0 0 6px 6px}
.mh-suggestions .mh-suggestions-avance b{font-family:var(--mh-f-ui);color:var(--mh-ocre-texte,var(--mh-encre))}
.mh-suggestions-aide{display:grid;gap:5px;padding:8px 10px 10px;color:var(--mh-encre-2);line-height:1.45}
.mh-suggestions-aide b{font:600 13.5px var(--mh-f-ui);color:var(--mh-encre)}
.mh-suggestions-touches,.mh-suggestions .mh-suggestions-rien{color:var(--mh-doux);font-size:12px;text-transform:none;letter-spacing:0;font-weight:400}
.mh-suggestions kbd{font-family:var(--mh-f-code);font-size:11px;padding:0 5px;border-radius:5px;border:1px solid var(--mh-trait-fort);background:var(--mh-surface-2)}

/* ---- une seule recherche : la puce de portee, dans la barre du haut ---- */
form.commande .mh-portee{display:inline-flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;max-width:55%;height:24px;padding:0 2px 0 9px;border-radius:99px;background:var(--mh-ocre-voile);color:var(--mh-ocre-texte,var(--mh-encre));font:500 12px var(--mh-f-ui);white-space:nowrap}
form.commande .mh-portee-nom{overflow:hidden;text-overflow:ellipsis}
form.commande .mh-portee-nom b{font-weight:700}
form.commande .mh-portee-retirer{flex:none;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;color:inherit;font:600 11px var(--mh-f-ui);cursor:pointer}
form.commande .mh-portee-retirer:hover,form.commande .mh-portee-retirer:focus-visible{background:color-mix(in srgb,currentColor 16%,transparent);outline:0}
form.commande.mh-mode-fichiers{border-color:var(--mh-ocre)}
form.commande:focus-within{border-color:var(--mh-ocre)}

/* ---- le bouton « Code » d'un projet, le meme sur toutes les pages ---- */
.mh-code > summary{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--mh-ocre-vif,var(--mh-ocre));background:var(--mh-ocre-vif,var(--mh-ocre));color:var(--mh-sur-ocre,#16150F);font:600 13px var(--mh-f-ui);cursor:pointer;white-space:nowrap}
.mh-code > summary svg{width:16px;height:16px;fill:currentColor}
.mh-code-liste{min-width:340px;gap:2px;z-index:60;text-align:left}
.mh-code-liste a{display:flex;align-items:center;gap:9px}
.mh-code-liste a[hidden]{display:none}
.mh-code-liste svg{width:16px;height:16px;fill:currentColor;color:var(--mh-doux);flex:none}
.mh-code-liste hr{border:0;border-top:1px solid var(--mh-trait);margin:4px 0}
.mh-code-titre{display:flex;align-items:center;gap:8px;padding:6px 10px 4px;font:700 13px var(--mh-f-ui);color:var(--mh-encre)}
.mh-code-protos{display:flex;gap:4px;margin:2px 10px 0}
.mh-code-protos button{height:24px;padding:0 10px;border:1px solid var(--mh-trait);border-radius:7px;background:none;color:var(--mh-encre-2);font:600 12px var(--mh-f-ui);cursor:pointer}
.mh-code-protos button.actif{background:var(--mh-surface-2);border-color:var(--mh-trait-fort);color:var(--mh-encre)}
.mh-code-champ{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:6px 10px 2px;border:1px solid var(--mh-trait-fort);border-radius:9px;overflow:hidden}
.mh-code-champ input{min-width:0;border:0!important;padding:8px 10px!important;font:12.5px var(--mh-f-code)!important;color:var(--mh-encre)!important;background:var(--mh-surface)!important;outline:none;box-shadow:none!important}
.mh-code-champ button{display:grid;place-items:center;width:36px;border:0;border-left:1px solid var(--mh-trait);background:var(--mh-surface-2);color:var(--mh-encre-2);cursor:pointer}
.mh-code-champ button:hover{color:var(--mh-encre)}
.mh-code-champ button.copie{color:var(--mh-ok)}
.mh-code-aide{margin:0 10px 6px;font:12px var(--mh-f-ui);color:var(--mh-doux)}
.mh-code-aide .mono{font-family:var(--mh-f-code)}

/* ------------------------------------------------------------------ paquets (vague 4) : la securite posee sur la fiche d'une version */
.mh-securite-paquet { margin: 0 0 16px; }
.mh-fragment .puce.rup { background: var(--color-error-bg, rgba(200,60,60,.12)); color: var(--mh-rupture); }
.mh-securite .panneau-t form { margin: 0 0 0 8px; }
.mh-securite .mh-bouton { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--mh-trait-fort); border-radius: 8px; background: var(--mh-surface); color: var(--mh-encre); font: 600 12.5px var(--mh-f-ui); text-decoration: none; cursor: pointer; }
.mh-securite .mh-bouton:hover { background: var(--mh-surface-2); }
.mh-securite .mh-bilan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--mh-trait); }
.mh-securite .mh-erreur { margin: 0; padding: 10px 16px; color: var(--mh-rupture); font-size: 13px; }
.mh-securite .mh-plateformes { padding: 12px 16px; }
.mh-securite .mh-plateforme { border: 1px solid var(--mh-trait); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.mh-securite .mh-plateforme > summary { cursor: pointer; padding: 9px 14px; background: var(--mh-surface-2); font-size: 13px; }
.mh-securite .mh-gestes-paquet { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; font-size: 12.5px; }
.mh-securite .liste details summary { cursor: pointer; font-size: 12.5px; }
.mh-securite .liste ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.mh-securite .mh-onglet-config { border-top: 1px solid var(--mh-trait); }
.mh-securite .mh-onglet-config > summary { cursor: pointer; padding: 9px 14px; font-weight: 600; font-size: 13px; }
.mh-securite .mh-conseil { margin: 6px 14px 10px; font-size: 12.5px; }
.mh-securite .mh-licences { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mh-securite .mh-licences .sur { margin: 0 8px 0 0; }

/* La barre de recherche porte maintenant la portee (puce) : elle a besoin de place.
   Elle garde toujours la meme largeur : s'elargir au clic poussait les boutons de
   droite et cachait la langue. C'est la liste des suggestions qui peut etre plus
   large, par-dessus la page, sans rien decaler. Meme regle sur toutes les pages. */
@media (min-width:861px){body .barre,body .mh-coquille .barre{grid-template-columns:minmax(auto,1fr) minmax(220px,560px) minmax(auto,1fr)}
form.commande .mh-suggestions{left:50%;right:auto;width:max(100%,min(720px,92vw));transform:translateX(-50%)}}
.barre form.commande{width:100%}
@media (prefers-reduced-motion:reduce){body .barre,body .mh-coquille .barre{transition:none}}

/* La zone de saisie de la barre n'est pas un champ de formulaire (aucun
   gestionnaire de mots de passe ne s'y accroche) : une zone editable d'une
   ligne, texte brut, qui a l'air d'un champ. Son texte d'aide est simule. */
form.commande .mh-saisie{flex:1 1 auto;display:block;align-self:center;min-width:0;padding:5px 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;color:var(--mh-encre);font:inherit;line-height:1.35;text-align:left;cursor:text;outline:none;caret-color:var(--mh-ocre-texte,var(--mh-encre))}
form.commande .mh-saisie::-webkit-scrollbar{display:none}
form.commande .mh-saisie br{display:none}
form.commande .mh-saisie:empty::before{content:attr(aria-placeholder);color:var(--mh-pale);pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
form.commande .mh-saisie:focus-visible{outline:0}
form.commande .mh-suggestions a:focus{outline:0}