/* ==========================================================================
   Pointage, le didacticiel de la version en ligne.

   Il n'existe QUE sur la version en ligne : là, le visiteur est seul devant
   l'outil. En rendez-vous, c'est Rodolphe qui explique, et une bulle qui
   parlerait par dessus lui serait une gêne.

   Tout est en surcouche : le prototype n'est pas modifié, et retirer les deux
   balises que construire.py ajoute suffit à faire disparaître le guide.

   La bulle elle-même n'est pas redessinée : elle reprend les classes .bulle du
   prototype, donc son dessin, sa place et ses couleurs viennent du prototype.
   Cette feuille n'ajoute que ce que le prototype n'avait pas : la porte
   d'entrée, la jauge de lecture, le bouton de rappel, et l'état de pause.
   ========================================================================== */

/* --- La porte d'entrée : suivre le guide, ou entrer directement ----------- */

.dida-porte {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-5);
}
/* Le voile est un calque à part, en encre pleine et en opacité, plutôt qu'un
   mélange de couleurs : sa force se lit alors telle qu'elle est écrite, et la
   couleur reste un jeton. Mesuré au rendu du 6 septembre 2026 : le papier passe
   de 247 à 70 sur 255 derrière le voile, la porte est bien une porte. */
.dida-porte::before {
  content: ""; position: absolute; inset: 0;
  background: var(--encre); opacity: .82;
}
.dida-porte__carte { position: relative; }
.dida-porte__carte {
  width: min(520px, 100%);
  background: var(--feuille);
  color: var(--encre);
  border: 1px solid var(--trait-fort);
  border-left: 4px solid var(--tampon);
  border-radius: var(--r-2);
  padding: var(--e-6);
  box-shadow: 0 2px 0 var(--tampon);
}
.dida-porte__oeil {
  font-family: var(--fam-compte); font-size: var(--t-00);
  letter-spacing: 0.06em; color: var(--encre-douce);
  margin: 0 0 var(--e-2);
}
.dida-porte__titre { font-size: var(--t-3); margin: 0 0 var(--e-3); }
.dida-porte__texte { font-size: var(--t-1); margin: 0 0 var(--e-5); color: var(--encre-douce); }
.dida-porte__gestes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* --- La bulle : le dessin vient du prototype, on ajoute la jauge ---------- */

.dida-bulle { z-index: 810; }
.dida-bulle .bulle__gestes { flex-wrap: wrap; }

.dida-jauge {
  height: 3px; margin: var(--e-3) 0 0;
  background: color-mix(in oklab, var(--tampon-trait) 40%, transparent);
  border-radius: var(--r-1);
  overflow: hidden;
}
.dida-jauge__trait {
  display: block; height: 100%; width: 0;
  background: var(--tampon-trait);
}
/* En pause, la jauge cesse d'avancer et le dit : elle pâlit et le compteur
   écrit pourquoi. Rien ne bouge sans qu'on sache pourquoi. */
.dida-bulle.est-en-pause .dida-jauge__trait { background: var(--crayon-clair); }
.dida-bulle.sans-minuteur .dida-jauge { display: none; }

/* --- Le bouton de rappel, à la place de la commande d'entrée du prototype - */

.dida-rappel {
  position: fixed; left: var(--e-4); bottom: var(--e-4); z-index: 700;
  font: inherit; cursor: pointer;
  background: var(--feuille); color: var(--encre);
  border: 1px solid var(--encre); border-radius: var(--r-1);
  padding: var(--e-2) var(--e-4); min-height: 40px;
}
.dida-rappel:hover { background: var(--tampon-pale); border-color: var(--tampon); }

@media (max-width: 720px) {
  .dida-porte__carte { padding: var(--e-5); }
}
@media print { .dida-porte, .dida-bulle, .dida-rappel { display: none !important; } }