/* Charte homelab — variante « archify ».

   Ce fichier ne remplace PAS theme.css : il se charge APRÈS lui et n'ajoute qu'un
   vocabulaire de composants. Les couleurs restent celles de references/palette.md, seule
   autorité sur la palette — aucun jeton n'est déclaré ici, uniquement cité.

   Ce que la variante apporte : une toile sombre quadrillée, des cartes COMPACTES qui ne
   portent que l'essentiel, un zoom et un halo francs sur l'élément sélectionné, et une
   carte de détail flottante et indépendante. Le détail ne vit plus dans la carte du
   graphe : celle-ci redevient un repère, pas un formulaire.

   À employer quand une application montre un GRAPHE qu'on explore. Pour un formulaire ou
   un tableau, theme.css seul reste le bon choix : ce vocabulaire n'y apporterait rien. */

/* --- Toile ---------------------------------------------------------------- */

/* Le quadrillage donne l'échelle pendant qu'on déplace une carte : sans repère fixe, un
   déplacement de dix pixels et un déplacement de cent se ressemblent. Il reste au bord du
   perceptible (--filet) — un quadrillage qu'on remarque devient un motif, et un motif
   entre en concurrence avec les données. */
.toile {
  /* Facteur de zoom de l'element selectionne. Le CSS en est la SEULE source : le routage
     des traits ne lit pas ce jeton, il lit le transform reellement calcule de chaque carte.
     C'est ce qui permet aux fleches de suivre la carte PENDANT qu'elle grandit, et non
     seulement une fois arrivee. */
  --zoom-actif: 1.45;
  /* Duree et courbe du zoom. Une bague d'objectif ne s'arrete pas net : elle ralentit en
     fin de course. D'ou une sortie tres marquee (easeOutQuint) plutot qu'un ease standard,
     qui rend un mouvement mou et mecanique. */
  --duree-zoom: 420ms;
  --courbe-zoom: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  background-color: var(--fond-profond);
  background-image:
    linear-gradient(to right, var(--filet) 1px, transparent 1px),
    linear-gradient(to bottom, var(--filet) 1px, transparent 1px);
  background-size: 32px 32px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
}

/* --- Carte compacte -------------------------------------------------------

   `noeud-graphe` et non `noeud` : « nœud » designe aussi bien une ligne d'arborescence
   qu'une carte de graphe, et la collision est silencieuse -- une regle `position: absolute`
   posee par la charte a fait s'empiler toutes les lignes d'un treeview sur une seule.
   Constate. Un nom generique dans une feuille PARTAGEE est un piege tendu aux applications
   qui la chargent. */

/* --teinte est posée par l'application selon ce qu'elle veut coder par la couleur. Elle
   n'est PAS un jeton de palette : c'est un alias local, qui pointe toujours vers un jeton.
   Un défaut neutre évite qu'une carte sans teinte disparaisse. */
.noeud-graphe {
  --teinte: var(--neutre);
  position: absolute;
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.9rem;
  min-width: 12rem;
  background: var(--fond-eleve);
  border: 1px solid var(--teinte);
  border-radius: var(--rayon);
  color: var(--texte);
  /* Monospace sur la toile seulement : les intitulés s'alignent en colonne et se
     comparent, là où une chasse variable les fait onduler. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: transform var(--duree-zoom) var(--courbe-zoom),
              box-shadow var(--duree-zoom) var(--courbe-zoom),
              opacity 160ms ease;
  cursor: pointer;
}

.noeud-graphe .intitule { font-weight: 700; line-height: 1.25; }

.noeud-graphe .responsables {
  color: var(--texte-doux);
  font-size: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem;
}

/* --- Pastille d'échéance --------------------------------------------------- */

/* En haut à droite, hors du flux : elle ne doit pas décaler l'intitulé selon qu'elle est
   présente ou non. Chiffres à chasse fixe — deux cartes voisines se comparent d'un coup
   d'œil. */
.noeud-graphe .echeance {
  position: absolute; top: -0.6rem; right: -0.6rem;
  min-width: 1.7rem; padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--fond-profond);
  border: 1px solid var(--teinte);
  color: var(--texte);
  font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: center;
}

/* Le jour même : pastille pleine. La couleur ne porte pas seule — le chiffre reste écrit,
   et l'application doit poser un intitulé accessible (title / aria-label) qui dit ce que
   la teinte signifie.

   Le texte est en --fond et non en blanc : --alerte est un rouge PASTEL, et du blanc
   dessus tombe sous 2:1 de contraste, illisible. Un texte sombre sur ce même fond passe
   8:1. C'est le seul écart assumé au « blanc gras » d'archify, dont le rouge est bien
   plus saturé que celui de cette palette. */
.noeud-graphe .echeance.imminente {
  background: var(--alerte);
  border-color: var(--alerte);
  color: var(--fond);
  font-weight: 700;
}

/* --- Sélection : zoom et halo ---------------------------------------------- */

/* Le halo est franc, pas suggéré : c'est lui qui répond à « qu'est-ce que je viens de
   sélectionner ». Deux ombres — un liseré net qui détoure, un halo large qui détache du
   fond. */
.noeud-graphe.actif {
  /* Franc, et non suggere. A 8 % l'agrandissement etait mesurable et invisible -- une carte
     passait de 246 a 263 px, ce que l'oeil ne lit pas comme une selection. */
  transform: scale(var(--zoom-actif));
  z-index: 2;
  box-shadow:
    0 0 0 2px var(--teinte),
    0 0 28px color-mix(in oklab, var(--teinte) 55%, transparent);
}

/* Le reste s'efface plutôt que de disparaître : un élément masqué perd sa position, et
   c'est la position qui donne son sens au graphe. */
.toile.focalisee .noeud-graphe:not(.actif),
.toile.focalisee .lien:not(.actif) { opacity: 0.35; }

/* --- Liens ------------------------------------------------------------------ */

.lien { transition: opacity 140ms ease, filter 140ms ease; }

.lien.actif {
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 70%, transparent));
}

/* L'étiquette est posée SUR le trait, dans une pastille opaque : un texte à même la toile
   se confond avec le quadrillage dès qu'il la croise. */
.lien-etiquette {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--fond-profond);
  border: 1px solid var(--bord);
  color: var(--texte-doux);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* --- Carte de détail flottante ---------------------------------------------- */

/* Flottante et INDÉPENDANTE : elle ne suit pas la carte du graphe, ne la recouvre pas, et
   se ferme sans rien déplacer. C'est ce qui permet à la carte du graphe de rester
   minuscule — tout ce qu'elle ne montre pas se lit ici. */
.passeport {
  position: absolute;
  z-index: 10;
  width: min(24rem, 90%);
  max-height: 80%;
  overflow-y: auto;
  padding: var(--espace);
  background: var(--fond-profond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: 0 18px 48px color-mix(in oklab, var(--fond-profond) 85%, transparent);
}

.passeport .genre {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--texte-doux);
}
.passeport h2 { margin: 0.15rem 0 0.6rem; font-size: 1.05rem; }

.passeport .fermer {
  position: absolute; top: 0.5rem; right: 0.6rem;
  background: none; border: none; color: var(--texte-doux);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  /* 44px de cible : en dessous, elle se rate au pointeur comme au doigt. */
  min-width: 44px; min-height: 44px;
}
.passeport .fermer:hover, .passeport .fermer:focus-visible { color: var(--texte); }

/* --- Légende ---------------------------------------------------------------- */

.legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--texte-doux); }
.legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legende i {
  width: 0.7rem; height: 0.7rem; border-radius: 3px;
  border: 1px solid currentColor; background: color-mix(in oklab, currentColor 30%, transparent);
  font-style: normal;
}

/* --- Mouvement --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Le zoom et le halo restent — ils portent l'information. Seule la transition tombe :
     l'état final est identique, il arrive juste sans glissement. */
  .noeud-graphe, .lien { transition: none; }
}