/* ============================================================
   Portail HER — ergonomie de la page d'accueil et du cadre commun.
   Deuxième feuille greffée sur her.css, qui reste la base du reste du
   portail (menu des favoris, formulaires, pages d'administration).

   A — les quatre périmètres deviennent une navigation permanente :
       rail à gauche sur ordinateur, barre d'onglets en bas sur mobile.
       MÊME élément du DOM, deux présentations : c'est ce qui garantit
       qu'on retrouve d'un appareil à l'autre les repères acquis.
   D — la tuile porte sa description et sa disponibilité. Rendue en CSS
       pur (content: attr(data-tip)), donc elle survit même si le
       JavaScript ne s'exécute pas.
   ============================================================ */

body.ui-v2 {
  --v2-rail: 232px;
  --v2-tabs: 0px;
}

/* Pleine largeur sur ordinateur : le contenu n'a plus a se serrer au centre
   pendant que les cotes restent vides. On garde des marges lisibles. */
body.ui-v2 main.her-main {
  max-width: none;
  margin: 26px 0 40px;
  padding: 0 26px;
}

/* ---------- En-tête : plus mince, collant, hiérarchie plus nette ---------- */

body.ui-v2 .her-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 10px 22px;
  gap: 18px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

body.ui-v2 .her-title { font-size: 16px; letter-spacing: -.01em; }
body.ui-v2 .her-logo  { height: 30px; }

/* L'adresse complète mangeait la barre. On garde l'identité, on retire le
   bruit : le rôle passe en pastille, l'adresse est réservée aux grands écrans. */
body.ui-v2 .her-user {
  font-size: 13px;
  opacity: .95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.ui-v2 .her-nav a {
  padding: 6px 10px;
  border-radius: 7px;
  transition: background .15s ease;
}
body.ui-v2 .her-nav a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }

/* « Aide » passe AVANT « Déconnexion » : on ne touche pas au gabarit, on repousse
   simplement la déconnexion en dernier (ordre visuel, DOM inchangé). */
body.ui-v2 .her-nav a[href="/deconnexion"] { order: 2; }

/* Le blanc entre « Paramètres » et « Aide » n'était pas une marge : c'était le
   lien « Environnement de test », écrit en rouge sur fond rouge — invisible mais
   occupant sa place. On le rend lisible plutôt que de laisser un trou. */
body.ui-v2 .her-nav a[href^="https://test."] {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12.5px;
  font-weight: 400;
  opacity: .9;
}

/* ---------- Menus d'accès rapide par espace (en-tête) ---------- */

/* Reprend le composant « Favoris » : mêmes classes, donc même comportement.
   Quatre menus de plus tiennent mal dans la barre : on resserre, et l'adresse
   complète s'efface la première puisqu'elle n'est qu'informative. */
body.ui-v2 .her-nav { gap: 8px; flex-wrap: wrap; }
body.ui-v2 .v2-esp .her-fav-btn { font-size: 13px; padding: 4px 11px; }
body.ui-v2 .v2-esp .her-fav-menu { min-width: 260px; }

@media (max-width: 1500px) {
  body.ui-v2 .her-user { display: none; }
}

/* Sur mobile, la barre devient un panneau déplié : les menus s'y empilent
   comme le fait déjà celui des favoris. */
@media (max-width: 760px) {
  body.ui-v2 .v2-esp { width: 100%; }
  body.ui-v2 .v2-esp .her-fav-btn { width: 100%; text-align: left; }
}

/* ---------- Rail des périmètres (ordinateur) ---------- */

body.ui-v2 .v2-rail {
  /* Une seule colonne BORNEE : sans minmax(0,…), la piste s'elargit au
     contenu le plus long et le compteur sort de l'encadre. */
  grid-template-columns: minmax(0, 1fr);
  position: sticky;
  top: 74px;
  align-self: start;
  display: grid;
  gap: 3px;
  align-content: start;
  background: var(--her-white);
  border: 1px solid var(--her-line);
  border-radius: var(--her-radius);
  padding: 10px 8px;
  box-shadow: var(--her-shadow);
}

body.ui-v2 .v2-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--her-ink-soft);
  font: 14px/1.3 inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-width: 0;          /* autorise l'element a retrecir sous son contenu */
  overflow: hidden;
}
body.ui-v2 .v2-rail-item:hover { background: #F7F7F8; color: var(--her-ink); }
body.ui-v2 .v2-rail-item[aria-current="true"] {
  background: #FDEBED;
  color: var(--her-red);
  font-weight: 700;
}
body.ui-v2 .v2-rail-item .v2-g { width: 18px; text-align: center; font-size: 15px; flex: 0 0 auto; }
body.ui-v2 .v2-rail-item .v2-lib { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui-v2 .v2-rail-item .v2-cnt { font-size: 12px; color: var(--her-ink-soft); font-variant-numeric: tabular-nums; }
body.ui-v2 .v2-rail-item[aria-current="true"] .v2-cnt { color: var(--her-red); }

/* Deux colonnes : rail figé, contenu à droite.
   Les colonnes sont assignées EXPLICITEMENT. Avec le placement automatique, la
   mise en page ne tenait que parce qu'une seule section était visible à la fois :
   à la recherche, qui les révèle toutes, la deuxième serait passée sous le rail. */
body.ui-v2 main.her-main.v2-on {
  display: grid;
  grid-template-columns: var(--v2-rail) minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}
body.ui-v2 main.her-main.v2-on > .v2-rail { grid-column: 1; grid-row: 1 / span 999; }
body.ui-v2 main.her-main.v2-on > .her-card,
body.ui-v2 main.her-main.v2-on > .v2-search,
body.ui-v2 main.her-main.v2-on > .v2-vide { grid-column: 2; }
body.ui-v2 main.her-main.v2-on > .her-flash { grid-column: 1 / -1; }

/* ---------- Barre de recherche ---------- */

body.ui-v2 .v2-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--her-white);
  border: 1px solid var(--her-line);
  border-radius: var(--her-radius);
  padding: 0 14px;
  height: 46px;
  box-shadow: var(--her-shadow);
}
body.ui-v2 .v2-search:focus-within { border-color: #C9C9D0; box-shadow: 0 2px 16px rgba(0,0,0,.10); }
body.ui-v2 .v2-search-ico { color: var(--her-ink-faint, #9A9AA4); font-size: 16px; line-height: 1; flex: 0 0 auto; }
body.ui-v2 .v2-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: 15px/1.4 inherit;
  color: var(--her-ink);
  padding: 0;
}
body.ui-v2 .v2-search input::placeholder { color: #9A9AA4; }
/* La croix native de <input type=search> varie d'un navigateur à l'autre : on
   fournit la nôtre, toujours au même endroit. */
body.ui-v2 .v2-search input::-webkit-search-cancel-button { display: none; }
body.ui-v2 .v2-search-clear {
  border: 0; background: none; cursor: pointer; padding: 4px 6px;
  color: var(--her-ink-soft); font-size: 16px; line-height: 1; border-radius: 6px;
}
body.ui-v2 .v2-search-clear:hover { background: #F2F2F4; color: var(--her-ink); }
body.ui-v2 .v2-search-clear[hidden] { display: none; }

/* Message quand rien ne correspond. */
body.ui-v2 .v2-vide {
  background: var(--her-white);
  border: 1px solid var(--her-line);
  border-radius: var(--her-radius);
  padding: 22px;
  color: var(--her-ink-soft);
  box-shadow: var(--her-shadow);
}
body.ui-v2 .v2-vide[hidden] { display: none; }

/* Pendant une recherche, le rail montre le nombre de résultats par espace. */
body.ui-v2 main.her-main.v2-on.v2-cherche .v2-rail-item[aria-current="true"] {
  background: none;
  color: var(--her-ink-soft);
  font-weight: 400;
}

/* ---------- Barre d'onglets (mobile) : MÊME élément, autre présentation ---- */

@media (max-width: 820px) {
  body.ui-v2 { --v2-tabs: 62px; }

  body.ui-v2 main.her-main.v2-on {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: calc(var(--v2-tabs) + 12px);
  }

  body.ui-v2 .v2-rail {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 50;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-top: 1px solid var(--her-line);
    border-radius: 0;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .10);
  }

  body.ui-v2 .v2-rail-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px;
    font-size: 11px;
    text-align: center;
    justify-content: center;
  }
  body.ui-v2 .v2-rail-item .v2-g { width: auto; font-size: 19px; line-height: 1; }
  body.ui-v2 .v2-rail-item .v2-lib { white-space: nowrap; font-size: 10.5px; }
  body.ui-v2 .v2-rail-item .v2-cnt { display: none; }
  body.ui-v2 .v2-rail-item[aria-current="true"] { background: none; }
}

/* ---------- D : la tuile qui parle ---------- */

body.ui-v2 .app-grid {
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}

body.ui-v2 .app-tile {
  /* Liseret clair : chaque application devient un bloc distinct. */
  position: relative;              /* repère pour l'étoile et le badge */
  background: var(--her-white);
  border: 1px solid var(--her-line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  align-content: start;
  align-items: center;
  text-align: left;
  padding: 13px 14px;
  min-height: 0;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.ui-v2 .app-tile:hover {
  border-color: #D7D7DC;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  body.ui-v2 .app-tile,
  body.ui-v2 .app-tile:hover { transition: none; transform: none; }
}

body.ui-v2 .app-tile__link {
  display: contents;              /* icône et nom se placent dans la grille */
}
body.ui-v2 .app-tile .app-ico { width: 40px; height: 40px; grid-row: 1; grid-column: 1; }
/* her.css borne le nom a 86 px et le coupe : dans une tuile large, le nom doit
   pouvoir tenir sur deux lignes plutot que d'etre tronque. La reserve a droite
   degage l'etoile des favoris, qui le chevauchait. */
body.ui-v2 .app-tile__name {
  grid-row: 1; grid-column: 2;
  max-width: none;
  padding-right: 22px;
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  text-align: left;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* La description : rendue depuis l'attribut existant, donc SANS JavaScript.
   L'infobulle au survol de la vue actuelle devient une ligne toujours lisible.

   Le meme jeu de proprietes est repete sur « :hover » : dashboard.php declare
   son infobulle sombre dans une balise <style> situee PLUS LOIN dans le
   document, et uniquement a l'etat survole. Sans cette repetition, la bulle
   flottante revenait se superposer aux tuiles voisines. */
body.ui-v2 .app-tile[data-tip]::after,
body.ui-v2 .app-tile[data-tip]:hover::after {
  content: attr(data-tip);
  grid-row: 2; grid-column: 2;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--her-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: static;
  inset: auto;
  transform: none;
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
  width: auto;
  max-width: none;
  box-shadow: none;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  z-index: auto;
}

/* ---------- Infobulle differee (1 s de survol, sans clic) ---------- */

/* Un seul element, pose sur le body : il flotte AU-DESSUS de la grille au lieu
   de pousser ou de recouvrir les tuiles voisines. */
body.ui-v2 .v2-bulle {
  position: fixed;
  z-index: 200;
  max-width: 320px;
  background: #2B2B2B;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 9px 12px;
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
body.ui-v2 .v2-bulle.on { opacity: 1; }
body.ui-v2 .v2-bulle b { display: block; margin-bottom: 3px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  body.ui-v2 .v2-bulle { transition: none; }
}

/* Disponibilité : une pastille, pas seulement un gris plus pâle. */
body.ui-v2 .app-tile--off { opacity: 1; }
body.ui-v2 .app-tile--off .app-tile__name { color: var(--her-ink-soft); }
body.ui-v2 .app-tile--off::before {
  content: "Indisponible";
  grid-row: 2; grid-column: 2;
  justify-self: start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #8A6100;
  background: #FBF3E0;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 2px;
}
body.ui-v2 .app-tile--off[data-tip]::after { grid-row: 3; }
body.ui-v2 .app-tile--off { grid-template-rows: auto auto auto; }

body.ui-v2 .fav-star { top: 9px; right: 9px; }

/* Badge « lien » d'un raccourci : coin BAS-DROIT, à l'aplomb de l'étoile. Les
   deux marques se lisent alors comme une colonne — favori en haut, nature du
   bloc en bas — et un raccourci ne se confond plus avec une application. */
body.ui-v2 .sc-badge {
  position: absolute;
  top: auto;
  left: auto;
  right: 10px;
  bottom: 9px;
  z-index: 3;
  font-size: 13px;
  line-height: 1;
  opacity: .55;
  pointer-events: none;
}
body.ui-v2 .app-tile.sc-tile { padding-right: 30px; }

/* ---------- Applications et raccourcis, séparés dans chaque espace ---------- */

/* Séparation VISUELLE seulement : « order » ne déplace aucun nœud, donc le
   glisser-déposer et l'ordre enregistré côté serveur restent intacts. */
body.ui-v2 .app-grid .v2-lab { order: 0; }
body.ui-v2 .app-grid .app-tile { order: 1; }
body.ui-v2 .app-grid .v2-lab--sc { order: 2; }
body.ui-v2 .app-grid .sc-tile { order: 3; }

body.ui-v2 .app-grid .v2-lab {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--her-ink-soft);
}
body.ui-v2 .app-grid .v2-lab--sc { margin-top: 12px; }

/* ---------- Sections ---------- */

body.ui-v2 .dash-section-title { font-size: 17px; }
body.ui-v2 main.her-main.v2-on .her-card[hidden] { display: none; }

/* ---------- Pied de page ---------- */

/* Le pied colle au bas de la fenêtre même quand la page est courte : le corps
   devient une colonne dont le contenu principal absorbe la hauteur libre. */
body.ui-v2 { min-height: 100vh; display: flex; flex-direction: column; }
body.ui-v2 main.her-main { flex: 1 0 auto; }
body.ui-v2 .her-footer { flex: 0 0 auto; }

/* Discret : pas d'encadré blanc, mais un texte assez sombre pour se lire sur le
   gris clair du fond — l'ancien gris doux y était trop pâle. */
body.ui-v2 .her-footer {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 26px 22px;
  border-top: 1px solid var(--her-line);
  background: none;
  color: #55555E;
  font-size: 12.5px;
}
body.ui-v2 .her-footer a { color: #55555E; text-decoration: underline; }
body.ui-v2 .her-footer a:hover { color: var(--her-red); }
body.ui-v2 .her-footer .v2-pied-sp { flex: 1 1 auto; }
@media (max-width: 820px) {
  body.ui-v2 .her-footer { margin-bottom: var(--v2-tabs); }
}