/* ==========================================================================
   Pointage, le panneau d'aide.

   Il existe dans les deux versions, mais il ne répond pas de la même façon :
   servi par serveur.py, le moteur répond en direct, enfermé dans aide.md ;
   ouvert sans serveur (la version en ligne), il le dit honnêtement et propose
   d'écrire. L'échec est un état dessiné, pas une panne.

   Comme le didacticiel, tout est en surcouche et se retire en enlevant le
   script. Les couleurs, les tailles et les espacements viennent des jetons du
   prototype (l'encre, le crayon, le tampon, la réglure), jamais d'une valeur
   écrite ici : le panneau doit avoir l'air d'appartenir au même cahier.

   La frontière de l'outil s'applique ici aussi : ce que le moteur a rédigé est
   du crayon, hachuré et en retrait ; ce qui est compté ou daté est de l'encre.
   ========================================================================== */

.aide-bouton {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 700;
  font: inherit; cursor: pointer;
  border: 1px solid var(--encre); background: var(--encre); color: var(--feuille);
  border-radius: var(--r-2); padding: var(--e-2) var(--e-5); min-height: 40px;
  box-shadow: 0 2px 0 var(--tampon);
}
.aide-bouton:hover { background: var(--tampon-appui); border-color: var(--tampon-appui); }
/* Le didacticiel a son propre bouton au même coin de page : quand les deux
   sont là, l'aide se décale, sinon ils se recouvriraient. */
body.a-rappel-guide .aide-bouton { bottom: calc(var(--e-4) + 52px); }

.aide-panneau {
  position: fixed; right: var(--e-4); bottom: var(--e-4); z-index: 710;
  width: min(400px, calc(100vw - 2 * var(--e-4)));
  max-height: min(620px, calc(100vh - 2 * var(--e-4)));
  display: flex; flex-direction: column;
  background: var(--feuille); color: var(--encre);
  border: 1px solid var(--trait-fort); border-radius: var(--r-2);
  box-shadow: 0 2px 0 var(--tampon);
  font-size: var(--t-0); line-height: var(--interligne);
}
.aide-panneau__entete {
  display: flex; align-items: baseline; gap: var(--e-2);
  padding: var(--e-4) var(--e-4) var(--e-2);
  border-bottom: 1px solid var(--trait);
}
.aide-panneau__titre { font-weight: 700; font-size: var(--t-1); }
.aide-panneau__sous {
  font-family: var(--fam-compte); font-size: var(--t-00);
  color: var(--encre-douce); flex: 1;
}
.aide-panneau__fermer {
  font: inherit; cursor: pointer; border: 0; background: none;
  color: var(--encre-douce); padding: 0 var(--e-1); font-size: var(--t-2); line-height: 1;
}
.aide-panneau__fermer:hover { color: var(--encre); }

.aide-fil { overflow-y: auto; padding: var(--e-4); flex: 1; }
.aide-tour { margin-bottom: var(--e-4); }
.aide-tour:last-child { margin-bottom: 0; }
.aide-question {
  font-weight: 700; margin: 0 0 var(--e-2); max-width: none;
  padding-left: var(--e-3); border-left: 3px solid var(--filet-marge);
}
.aide-reponse { margin: 0; max-width: none; color: var(--encre-douce); }

/* Ce que le moteur a écrit se voit, comme partout ailleurs dans l'outil :
   c'est du crayon, sur sa trame, avec sa mention de relecture. */
.aide-reponse--redigee {
  font-family: var(--fam-texte); color: var(--crayon);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 6px,
      color-mix(in oklab, var(--crayon) 7%, transparent) 6px 7px),
    var(--crayon-fond);
  border-left: 3px solid var(--crayon-clair);
  padding: var(--e-3) var(--e-4);
}
.aide-mention {
  display: block; margin-top: var(--e-2);
  font-family: var(--fam-compte); font-size: var(--t-00);
  color: var(--crayon-clair); letter-spacing: 0.04em;
}
/* Ne pas savoir est un état, pas une erreur : il se montre calmement. */
.aide-reponse--sait-pas {
  background: var(--papier-creux); border-left: 3px solid var(--trait-fort);
  padding: var(--e-3) var(--e-4); color: var(--encre);
}

.aide-ecrans { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.aide-ecrans button {
  font: inherit; font-size: var(--t-00); cursor: pointer;
  border: 1px solid var(--trait-fort); background: var(--feuille); color: var(--encre);
  border-radius: var(--r-1); padding: var(--e-1) var(--e-3); min-height: 30px;
}
.aide-ecrans button:hover { background: var(--tampon-pale); border-color: var(--tampon); }

.aide-attente { font-family: var(--fam-compte); font-size: var(--t-00); color: var(--encre-douce); }

.aide-pied { border-top: 1px solid var(--trait); padding: var(--e-3) var(--e-4) var(--e-4); }
.aide-champ { display: flex; gap: var(--e-2); }
.aide-champ input {
  flex: 1; font: inherit; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--trait-fort); border-radius: var(--r-1); min-height: 38px;
  background: var(--feuille); color: var(--encre);
}
.aide-envoyer {
  font: inherit; cursor: pointer; min-height: 38px; padding: 0 var(--e-4);
  border: 1px solid var(--encre); background: var(--encre); color: var(--feuille);
  border-radius: var(--r-1);
}
.aide-envoyer:disabled { opacity: .5; cursor: default; }
.aide-suggestions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-3); }
.aide-suggestions button {
  font: inherit; font-size: var(--t-00); cursor: pointer; text-align: left;
  border: 1px dashed var(--trait-fort); background: none; color: var(--encre-douce);
  border-radius: var(--r-1); padding: var(--e-1) var(--e-3); min-height: 28px;
}
.aide-suggestions button:hover { background: var(--tampon-pale); color: var(--encre); }

/* L'issue quand l'aide ne sait pas, ou quand le moteur ne tourne pas :
   écrire à quelqu'un. Le lien porte la question, l'écran et la version,
   et rien de personnel. */
.aide-ecrire {
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  background: var(--tampon-pale); border-left: 3px solid var(--tampon);
}
.aide-ecrire p { margin: 0 0 var(--e-2); max-width: none; color: var(--encre); }
.aide-ecrire a { display: inline-block; color: var(--tampon); font-weight: 700; }

@media (max-width: 720px) {
  .aide-panneau {
    right: var(--e-2); left: var(--e-2); bottom: var(--e-2);
    width: auto; max-height: calc(100vh - 2 * var(--e-2));
  }
}
@media print { .aide-bouton, .aide-panneau { display: none !important; } }