/* La bulle d'aperçu — survol à la souris, appui long au doigt.

   Elle vivait dans filles.css, où elle ne servait qu'aux cartes d'élèves. Le
   calendrier et le Toranout s'en servent maintenant : elle a sa feuille, en
   regard de `components/apercu.js`.

   ─── Le cadrage sur téléphone ──────────────────────────────────────────────
   Trois bornes, et chacune répond à un débordement observé :

     · la **largeur** ne dépasse jamais l'écran moins deux marges — sur un
       téléphone de 375 px, une bulle de 20 rem tiendrait juste, et un texte
       long l'aurait élargie ;
     · la **hauteur** s'arrête à 60 % de l'écran. Une description de vingt
       lignes traversait la fenêtre de haut en bas et sortait des deux côtés :
       elle se coupe désormais au bord, et le titre reste visible ;
     · la **position** est calculée en JavaScript, qui replace la bulle dans
       l'écran quand elle sortirait par le bas ou par la droite.

   `pointer-events: none` : la bulle ne se met jamais entre le doigt et ce qu'il
   vise. Elle ne se ferme donc pas en la touchant — elle se ferme au geste
   suivant, où qu'il soit. */

.apercu {
  position: fixed;
  z-index: 70;
  width: min(20rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: 60vh;
  overflow: hidden;
  padding: calc(var(--pas) * 4);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-3);
  font-size: 0.85rem;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
}

.apercu__titre { font-weight: 600; font-size: 0.95rem; }

.apercu__ligne { display: flex; justify-content: space-between; gap: calc(var(--pas) * 3); }
.apercu__ligne span:first-child { color: var(--texte-doux); flex: none; }
.apercu__ligne span:last-child { text-align: right; }

/* Le corps de la bulle : une description, ou la liste des corvées d'un tour.
   Il est séparé du reste par un filet — ce sont deux choses différentes, les
   faits d'un côté, le texte libre de l'autre. */
.apercu__corps {
  border-top: 1px solid var(--filet);
  padding-top: calc(var(--pas) * 2);
  min-height: 0;
  overflow: hidden;
}

/* `pre-line` honore les retours à la ligne : une description en porte, et le
   bandeau du Toranout en écrit un par corvée. `break-word` évite qu'une adresse
   électronique sans espace déborde de la bulle. */
.apercu__texte {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
  color: var(--texte-tenu);
}