/*
 * Page d'accueil : l'arbre des gammes a gauche, son contenu a droite.
 *
 * Elle reprend les jetons de `app.css` — le panneau sombre, le bleu des
 * dossiers — pour qu'on reconnaisse l'outil d'un ecran a l'autre.
 */

/* LA COQUILLE — page pleine hauteur, arbre en panneau, contenu à droite — est
   partie dans `app.css` sous le nom d'EXPLORATEUR : le catalogue matière est le
   même écran, et il ne charge pas cette feuille. Ne reste ici que ce qui
   n'appartient qu'aux ouvrages.

   Voir `.page-explorateur`, `.explorateur`, `.pane-arbre`, `.pane-contenu` et
   le fil d'Ariane. */

/* ------------------------------------------------------------- l'arbre -- */

/* L'arbre des gammes a servi de modele aux deux autres : sa mise en forme est
   partie dans `arbre.css`, ou elle est desormais commune. Il ne reste ici que
   ce qui n'appartient qu'a cette page.

   « A classer » se detache des gammes : ce n'est pas un rayon mais une
   corbeille de choses a ranger, et elle vient apres tout le reste. */
/* « A classer » et « Toutes les gammes » ont disparu : l'arbre ne montre que
   des gammes. */

/* Plus de style d'OUVRAGE dans l'arbre : il n'y paraît plus. L'arbre range
   les gammes, la grille de droite montre ce qu'elles tiennent — et « ouvert »
   se dit sur la carte, dans sa ligne sourde. */

/* ------------------------------------------------------------ contenu --- */

/* Le FIL D'ARIANE et le titre de section sont partis dans `app.css` avec la
   coquille : le catalogue les emploie à l'identique. */

/* `.explication` est partie dans `app.css` : le catalogue emploie le meme mot
   d'invite, et il ne charge pas cette feuille. */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* `.vide` — le mot d'attente d'un arbre — est parti dans `app.css` avec la
   coquille : les deux explorateurs le disent au même moment. */

/* -------------------------------------------------------------- cartes -- */

/* La grille et la carte sont parties dans `app.css` : le catalogue les emploie
   aussi, et une fiche de profil n'avait aucune raison de se presenter
   autrement qu'un ouvrage. Ne reste ici que ce qui n'appartient qu'a
   l'accueil. */

/* `.carte-gamme` est partie dans `app.css` : le catalogue présente ses
   sous-rayons de la même façon, et c'est la même carte-destination. */

/* LA CARTE « NOUVEAU », à la suite des autres.

   Vierge, et de la même taille que ses voisines : la grille étire ses éléments
   à la hauteur de leur rangée, il n'y a rien à imiter. Le `min-height` ne sert
   que lorsqu'elle est seule sur sa ligne — une gamme encore vide.

   Un TIRETÉ, comme la vignette absente d'un ouvrage et comme la ligne qui crée
   dans les arbres : partout ici, le pointillé dit « une place, pas une
   chose ». */
.carte-neuve {
  min-height: 7rem;
  color: var(--muted);
  background: none;
  border-style: dashed;
  cursor: pointer;
}
/* La place réservée se pose EN HAUT, exactement là où sont les vraies
   vignettes. Elle était centrée dans la carte : à taille égale — 249 × 140
   mesurés des deux côtés — elle paraissait plus petite, parce qu'elle flottait
   au milieu d'un vide pendant que ses voisines commençaient au bord. C'est
   l'alignement qui fait lire deux objets comme un seul, pas la mesure.

   Elle NE SE CENTRE PLUS quand il n'y a pas de vignette. C'était vrai tant
   qu'une carte sans vignette n'avait rien au-dessus de son titre ; les fiches
   de règle et de cote en ont maintenant une — la ligne du code —, et le mot
   centré se retrouvait trente-cinq pixels sous le titre de sa voisine. Le
   raisonnement d'alors tient toujours, c'est son hypothèse qui a changé. */

/* Le mot se centre par le TEXTE et non par `align-items` : celui-ci
   rétrécirait la place réservée à la largeur de ce qu'elle contient, c'est-à-
   dire à rien. */
.carte-neuve .carte-titre { text-align: center; font-size: 0.95rem; }

/* VISEUR ARMÉ : ce qui se pique change de curseur, et rien d'autre. Un ouvrage
   se prend sur sa CARTE — c'est désormais sa seule place ; une gamme, non —
   elle n'est pas ce qu'on demande, et le curseur ne doit pas le laisser
   croire. */
.en-piquage .carte-ouvrage { cursor: crosshair; }
.carte-neuve:hover,
.carte-neuve:focus-visible {
  color: var(--action);
  border-color: var(--action);
  border-style: solid;
  outline: none;
}

/* La carte de l'ouvrage ouvert le dit aussi en mots, dans sa ligne sourde.
   Elle portait un bord d'accent : voir la note sur la ligne de l'arbre. */
.carte-ouvrage.courant .carte-titre { font-weight: 700; }

/* ---------------------------------------------------------------------------
   MON BUREAU — migration 259.

   Une seule colonne, et des LIGNES, pas des cartes : on ne vient pas
   reconnaître un modèle parmi trente — on vient lire une liste courte de
   choses à faire, et la vider. Une grille de cartes pour trois entrées
   donnerait à chacune l'importance d'un produit ; une ligne se parcourt d'un
   coup d'œil et se compte.
   --------------------------------------------------------------------------- */
/* DES BLOCS POSÉS, PAS UNE COLONNE. Benjamin, 21/09 : « je suis pas sûr de
   trouver ça bien qu'il soit tout centré et empilé ». Un tableau de bord se
   balaie du regard — chaque chose à sa place, et l'on sait où regarder sans
   lire. Une colonne centrée oblige à descendre pour savoir ce qu'il y a.

   CE QUI M'ATTEND PREND LA GRANDE PLACE, à gauche : c'est le seul bloc qui
   porte du travail à faire, et le seul qui peut s'allonger. Ce qu'on garde
   sous la main et ce qu'on note tiennent dans la colonne d'à côté — deux
   listes courtes, qu'on consulte sans les parcourir.

   LARGE, MAIS PAS TOUTE LA LARGEUR. Benjamin, 21/09 : « ça doit pas prendre
   toute la largeur ». Sur un écran de 2 560 px, une ligne d'ouvrage étirée d'un
   bord à l'autre met son nom à gauche et son code à un mètre de là : l'œil fait
   le trajet pour rien. On borne donc à une largeur où les deux se lisent
   ensemble — sans retomber dans la colonne étroite d'avant. */
.bureau {
  max-width: 64rem;
  padding: 1.2rem 1.2rem 3rem;
}
/* CHAQUE BLOC EST UN PANNEAU, la même forme que ceux de la fiche pro : un
   cadre, un fond, une ombre courte. C'est ce qui leur donne une place plutôt
   qu'une suite. */
.bureau-bloc {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.9rem 1rem 1.1rem;
  background: var(--carte);
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}
.bureau-bloc h2 { margin: 0 0 0.3rem; font-size: 1rem; display: flex; align-items: center; gap: 0.45rem; }
.bureau-bloc h2 .icone { --picto-encre: 1.15em; }
.bureau-paquet { margin-top: 1rem; }
.bureau-paquet h3 { margin: 0 0 0.2rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.5rem; }
/* CE QUI BLOQUE QUELQU'UN D'AUTRE se voit en premier — une validation attendue
   retient le travail d'un collègue, une publication n'attend que le client. */
.bureau-paquet.urgent > h3 > .carnet-compte { background: var(--accent); color: #fff; }
/* RANGÉ PAR QUI DEMANDE — Benjamin, 21/09 : « ils doivent être classés par le
   demandeur qui doit apparaître ». Le nom n'est pas un titre de plus : c'est un
   intercalaire, discret et en petites capitales, pour qu'il se lise comme une
   étiquette de dossier et non comme une troisième strate de titres. Le filet à
   gauche relie ses lignes entre elles. */
.bureau-groupe { margin-top: 0.7rem; }
.bureau-groupe:first-of-type { margin-top: 0.5rem; }
.bureau-demandeur {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0 0 0.3rem;
}
.bureau-demandeur-nom {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le compte d'un demandeur reste SOURD, même dans un paquet urgent : l'accent
   dit combien il y en a en tout, et s'il le disait aussi par demandeur, plus
   rien ne ressortirait. */
.bureau-paquet.urgent .bureau-demandeur .carnet-compte { background: var(--bord-doux, var(--border)); color: var(--muted); font-size: 0.7rem; min-width: 1.2rem; }
/* Les lignes d'un même demandeur forment un bloc : le filet le dit sans cadre. */
.bureau-groupe .carnet-lignes { margin-top: 0; padding-left: 0.6rem; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }


/* L'ÉTOILE D'UNE CARTE — migration 260 : garder un ouvrage sous la main.
   Dans le liseré, avec la croix : ces deux-là rangent, ils ne conçoivent pas.
   Sourde tant qu'elle n'est pas prise — une grille de trente cartes constellée
   d'étoiles jaunes ne dirait plus lesquelles comptent. */
.carte-etoile {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1;
  padding: 0 0.2rem;
}
.carte-etoile:hover { color: var(--accent); }
.carte-etoile.active { color: var(--accent); }

/* LES NOTES — des billets empilés, pas un tableau. On les lit de haut en bas
   et on les coche ; il n'y a ni colonne à comparer ni tri à choisir. */

/* L'étoile d'un favori, dans sa ligne : elle retire, ici. */