/* ==========================================================================
   Demain, 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 viennent des jetons de l'outil.
   ========================================================================== */

.aide-bouton {
  position: fixed; right: 16px; bottom: 16px; z-index: 700;
  font: inherit; cursor: pointer;
  border: 1px solid var(--accent-600); background: var(--accent-600); color: var(--surface);
  border-radius: 20px; padding: var(--e2) var(--e4); min-height: 40px;
  box-shadow: 0 4px 14px rgba(23, 23, 26, .18);
}
.aide-bouton:hover { background: var(--accent-900); }
/* Le didacticiel a son propre bouton au même coin : quand les deux sont là,
   l'aide se décale, sinon ils se recouvrent. */
body.a-rappel-guide .aide-bouton { bottom: 64px; }

.aide-panneau {
  position: fixed; right: 16px; bottom: 16px; z-index: 710;
  width: min(400px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 32px));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--encre);
  border: 1px solid var(--trait); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(23, 23, 26, .24);
  font-size: var(--taille-petit); line-height: var(--interligne);
}
.aide-panneau__entete {
  display: flex; align-items: baseline; gap: var(--e2);
  padding: var(--e4) var(--e4) var(--e2);
  border-bottom: 1px solid var(--trait);
}
.aide-panneau__titre { font-weight: var(--graisse-forte); font-size: var(--taille-base); }
.aide-panneau__sous { font-size: var(--taille-legende); color: var(--encre-3); flex: 1; }
.aide-panneau__fermer {
  font: inherit; cursor: pointer; border: 0; background: none;
  color: var(--encre-3); padding: 0 var(--e1); font-size: var(--taille-grand); line-height: 1;
}
.aide-panneau__fermer:hover { color: var(--encre); }

.aide-fil { overflow-y: auto; padding: var(--e4); flex: 1; }
.aide-tour { margin-bottom: var(--e4); }
.aide-tour:last-child { margin-bottom: 0; }
.aide-question {
  font-weight: var(--graisse-moyenne); margin: 0 0 var(--e2);
  padding-left: var(--e3); border-left: 2px solid var(--trait-fort);
}
.aide-reponse { margin: 0; color: var(--encre-2); }

/* Ce que le moteur a écrit se voit, comme partout ailleurs dans l'outil. */
.aide-reponse--redigee {
  background: var(--accent-050); border-radius: 6px; padding: var(--e3);
}
.aide-mention {
  display: block; margin-top: var(--e2);
  font-size: var(--taille-legende); color: var(--encre-3);
}
.aide-reponse--sait-pas { background: var(--surface-2); border-radius: 6px; padding: var(--e3); }

.aide-ecrans { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e3); }
.aide-ecrans button {
  font: inherit; font-size: var(--taille-legende); cursor: pointer;
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
  border-radius: 14px; padding: var(--e1) var(--e3); min-height: 30px;
}
.aide-ecrans button:hover { background: var(--surface-2); }

.aide-attente { color: var(--encre-3); font-style: italic; }

.aide-pied { border-top: 1px solid var(--trait); padding: var(--e3) var(--e4) var(--e4); }
.aide-champ { display: flex; gap: var(--e2); }
.aide-champ input {
  flex: 1; font: inherit; padding: var(--e2) var(--e3);
  border: 1px solid var(--trait-fort); border-radius: 6px; min-height: 38px;
  background: var(--surface); color: var(--encre);
}
.aide-champ input:focus-visible, .aide-panneau button:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 1px; }
.aide-envoyer {
  font: inherit; cursor: pointer; min-height: 38px; padding: 0 var(--e4);
  border: 1px solid var(--accent-600); background: var(--accent-600); color: var(--surface); border-radius: 6px;
}
.aide-envoyer:disabled { opacity: .5; cursor: default; }
.aide-suggestions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }
.aide-suggestions button {
  font: inherit; font-size: var(--taille-legende); cursor: pointer;
  border: 1px dashed var(--trait-fort); background: none; color: var(--encre-2);
  border-radius: 14px; padding: var(--e1) var(--e3); min-height: 28px; text-align: left;
}
.aide-suggestions button:hover { background: var(--surface-2); color: var(--encre); }

/* L'issue quand l'aide ne sait pas : écrire à quelqu'un. */
.aide-ecrire {
  margin-top: var(--e3); padding: var(--e3);
  background: var(--accent-050); border-radius: 6px;
}
.aide-ecrire p { margin: 0 0 var(--e2); }
.aide-ecrire a {
  display: inline-block; color: var(--accent-900); font-weight: var(--graisse-moyenne);
}

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