/* ==========================================================================
   Souche, 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 (jetons.css).
   ========================================================================== */

.aide-bouton {
  position: fixed; right: 16px; bottom: 16px; z-index: 700;
  font: inherit; font-weight: 700; cursor: pointer;
  border: var(--filet-fort) solid var(--cuivre); background: var(--cuivre); color: var(--papier);
  border-radius: var(--rayon-badge); padding: var(--e-2) var(--e-4); min-height: 40px;
  box-shadow: 0 4px 14px rgba(23, 20, 16, .18);
}
.aide-bouton:hover { background: var(--cuivre-sombre); }
/* 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(--papier); color: var(--encre);
  border: var(--filet) solid var(--trait-fort); border-radius: var(--rayon);
  box-shadow: 0 16px 40px rgba(23, 20, 16, .24);
  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: var(--filet) solid var(--trait);
}
.aide-panneau__titre { font-weight: 700; font-size: var(--t-2); }
.aide-panneau__sous { font-size: var(--t-00); color: var(--encre-pale); flex: 1; }
.aide-panneau__fermer {
  font: inherit; cursor: pointer; border: 0; background: none;
  color: var(--encre-pale); padding: 0 var(--e-1); font-size: var(--t-3); 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);
  padding-left: var(--e-3); border-left: var(--filet-fort) solid var(--trait-fort);
}
.aide-reponse { margin: 0; color: var(--encre-pale); }

/* Ce que le moteur a écrit se voit, comme partout ailleurs dans l'outil. */
.aide-reponse--redigee {
  background: var(--papier-creux); border-radius: var(--rayon); padding: var(--e-3);
}
.aide-mention {
  display: block; margin-top: var(--e-2);
  font-size: var(--t-00); color: var(--encre-tres-pale);
}
.aide-reponse--sait-pas { background: var(--ardoise-voile); border-radius: var(--rayon); padding: var(--e-3); }

.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: var(--filet) solid var(--trait-fort); background: var(--papier); color: var(--encre);
  border-radius: var(--rayon-badge); padding: var(--e-1) var(--e-3); min-height: 30px;
}
.aide-ecrans button:hover { background: var(--papier-creux); }

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

.aide-pied { border-top: var(--filet) 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: var(--filet) solid var(--trait-fort); border-radius: var(--rayon); min-height: 38px;
  background: var(--papier-creux); color: var(--encre);
}
.aide-champ input:focus-visible, .aide-panneau button:focus-visible { outline: 3px solid var(--cuivre); outline-offset: 1px; }
.aide-envoyer {
  font: inherit; font-weight: 700; cursor: pointer; min-height: 38px; padding: 0 var(--e-4);
  border: var(--filet-fort) solid var(--cuivre); background: var(--cuivre); color: var(--papier); border-radius: var(--rayon);
}
.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;
  border: var(--filet) dashed var(--trait-fort); background: none; color: var(--encre-pale);
  border-radius: var(--rayon-badge); padding: var(--e-1) var(--e-3); min-height: 28px; text-align: left;
}
.aide-suggestions button:hover { background: var(--papier-creux); color: var(--encre); }

/* L'issue quand l'aide ne sait pas : écrire à quelqu'un. */
.aide-ecrire {
  margin-top: var(--e-3); padding: var(--e-3);
  background: var(--cuivre-voile); border-radius: var(--rayon);
}
.aide-ecrire p { margin: 0 0 var(--e-2); }
.aide-ecrire a {
  display: inline-block; color: var(--cuivre-sombre); font-weight: 700;
}

@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; } }