/* ────────────────────────────────────────────────────────
   Ngento — © 2026 Jean-François Pellet. Tous droits réservés.
   Auteur : Jean-François Pellet. ref:NGENTOJFP-1f4d9e7a2b6c4f80
   ────────────────────────────────────────────────────────

   LE RAIL DE NAVIGATION DU MODE ORDINATEUR — SOURCE UNIQUE DE SON APPARENCE.

   Ces regles vivaient en DEUX exemplaires : dans `rendered/home.html` pour
   l'accueil, dans `app/static/ng-desktop.css` pour les ~103 gabarits de blocs.
   Aucun des deux ne pouvait lire l'autre. Ils ont diverge, et chaque correction
   n'alignait qu'une propriete : la police heritee, la couleur du nom, le style
   `is-active` present d'un seul cote, le logo sans dimensions. Le PO a demande
   une correction perenne le 23/08/2026 : la voici, une seule feuille.

   ⛔ REGLE : plus AUCUNE regle `#ngd-rail`, `.ngd-brand`, `.ngd-nav*` ailleurs.
   `tests/test_rail_identique.py` echoue si l'une reapparait dans un autre
   fichier.

   ⛔ CE FICHIER EST STATIQUE : il ne passe PAS par la substitution de marque que
   subit `home.html` au service. Toute couleur de marque doit donc venir d'une
   VARIABLE (`--ngd-accent` pour les aplats, `--ngd-accent-text` pour le texte),
   posee par les deux chemins depuis la nuance foncee du tenant. Une valeur en
   dur ici resterait celle de la maison, quel que soit le tenant.

   Le seuil ci-dessous est l'un des quatorze emplacements tenus ensemble par
   `scripts/mode_ordinateur_seuil.py`. Ne jamais l'editer a la main.
   ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (orientation: landscape) {
  /* ⛔⛔ LE RAIL N'HERITE RIEN DE LA PAGE QUI LE PORTE. Il est servi par
     l'accueil ET par ~103 gabarits de blocs, dont les reglages de base
     different. Deux ont deja mordu :
       - la POLICE, non declaree, prise au `body` : le nom du tenant se decalait ;
       - le BOX-SIZING, herite : `width:40px` + `padding:3px` donnait un logo de
         46px sur l'accueil (content-box) et 40px sur les blocs (border-box).
         Six pixels, visibles au changement de page, et invisibles a l'inspection
         de la regle — elle dit bien 40px des deux cotes.
     Tout ce dont le rail depend se declare donc ICI. */
  html[data-ngd] #ngd-rail,
  html[data-ngd] #ngd-rail * { box-sizing: border-box; }

  /* ⛔ Le soulignement des liens fait partie des choses HERITEES. Les entrees
     du rail sont des <a> depuis l'unification du markup — auparavant c'etaient
     des <button>, que le navigateur ne souligne pas. Sur une page dont le style
     souligne les liens, le nom du tenant sortait souligne dans le rail et pas
     ailleurs. Meme famille que la police et le box-sizing : le rail ne doit rien
     tenir de la page qui le porte. */
  html[data-ngd] #ngd-rail a,
  html[data-ngd] #ngd-rail a:hover,
  html[data-ngd] #ngd-rail a:visited { text-decoration: none; }

  /* ── Rail de navigation ───────────────────────────────────────── */
  html[data-ngd] #ngd-rail {
    /* La police est DÉCLARÉE, jamais héritée. Sans elle, le rail prenait celle
       de la page qui le porte : celle du `body` de l'accueil ici, celle de
       `ng-desktop.css` sur les pages de blocs. Deux familles différentes, donc
       des largeurs de lettres différentes — le nom du tenant se décalait au
       changement de page, et son rendu paraissait changer de teinte. Signalé
       par le PO le 23/08/2026. La valeur est la même que dans
       `app/static/ng-desktop.css` : c'est le même rail. */
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    /* Repli : la variable est definie par la page (home.html,
       ng-desktop.css). Sans repli, un gabarit qui ne la definit pas
       donnerait un rail de largeur nulle. */
    width: var(--ngd-rail, 268px);
    box-sizing: border-box;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 0.9rem 0.7rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    z-index: 150;
  }
  html[data-ngd] .ngd-brand {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; padding: 0.35rem 0.45rem 0.75rem;
    border: 0; background: none; cursor: pointer; text-align: left;
    font-family: inherit;
  }
  html[data-ngd] .ngd-brand img {
    width: 40px; height: 40px; border-radius: 12px;
    object-fit: contain; background: #f8fafc; padding: 3px; flex-shrink: 0;
  }
  html[data-ngd] .ngd-brand span {
    font-size: 0.94rem; font-weight: 800;
    color: var(--ngd-accent-text, #163a5a);
    line-height: 1.15; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* Depuis le 02/08 le rail porte les entrées de l'ancien « Menu rapide » : il
     peut donc dépasser sur un écran bas (1024x600 en paysage). La navigation
     défile, le pied (Paramètres / téléphone) reste collé en bas. */
  html[data-ngd] .ngd-nav {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 0; overflow-y: auto;
    scrollbar-width: thin;
  }
  html[data-ngd] .ngd-navitem {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%; padding: 0.58rem 0.6rem;
    border: 0; border-radius: 12px; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.86rem; font-weight: 700;
    color: #334155; text-align: left; text-decoration: none;
    transition: background 0.12s, color 0.12s;
  }
  html[data-ngd] .ngd-navitem:hover { background: #f1f5f9; color: var(--ngd-accent-text, #163a5a); }
  html[data-ngd] .ngd-navitem svg { width: 19px; height: 19px; flex-shrink: 0; }
  /* Page courante : un rail sans repère de position ne dit pas où l'on est.
     La couleur vient de la MARQUE du tenant (`--ngd-accent`, posée par JS
     depuis NGENTO_SHELL_CONFIG), avec un repli neutre pour les cas sans marque
     et pour les navigateurs sans `color-mix`. */
  html[data-ngd] .ngd-navitem.is-active {
    background: #eef4f9;
    background: color-mix(in srgb, var(--ngd-accent, #163a5a) 9%, #fff);
    color: #163a5a;
    color: var(--ngd-accent-text, var(--ngd-accent, #163a5a));
  }
  html[data-ngd] .ngd-navitem.is-active::before {
    content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--ngd-accent, #163a5a);
  }
  /* Entrées du rail soumises au registre d'icônes (data-icon-id) : même
     traitement « désactivé » que les tuiles du menu rapide, badge compris. */
  html[data-ngd] .ngd-navitem.util-item-disabled {
    opacity: 0.45; filter: grayscale(0.5); cursor: default;
  }
  html[data-ngd] .ngd-navitem.util-item-disabled:hover { background: none; }
  html[data-ngd] .ngd-navitem { position: relative; }
  html[data-ngd] .ngd-navitem .util-item-badge { top: 50%; transform: translateY(-50%); right: 8px; }
  html[data-ngd] .ngd-rail-sep {
    height: 1px; background: #eef2f7; margin: 0.6rem 0.3rem;
  }
  html[data-ngd] .ngd-rail-foot { margin-top: auto; }
  html[data-ngd] .ngd-rail-hint {
    font-size: 0.68rem; font-weight: 600; color: #94a3b8;
    padding: 0.35rem 0.6rem 0;
  }
}