/*
 * 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; }