/* ==========================================================================
   Phase 90 — le guide personnel.

   Premier vrai dialogue du site : il n'existait ni <dialog>, ni role="dialog", ni modale.
   Tout est donc écrit ici.

   CONTRAINTE DE POIDS. Cette feuille part sur les quinze pages, comme style.css. Elle doit
   rester courte : c'est exactement la régression de la phase 85 (feuillet.css chargé sur
   quatorze pages pour une seule qui l'utilisait) qu'il ne faut pas refaire. Pas de texture,
   pas de flou, pas d'ombre coûteuse — le voile est un aplat translucide, rien de plus.

   Le plafond de z-index du site est 50 (.theme-toggle). Le guide passe juste au-dessus.
   ========================================================================== */

/* --- Le bouton d'appel, à côté de la bascule de thème -------------------- */

.guide-bouton {
  position: fixed;
  right: 18px;
  bottom: 76px;                 /* hors échelle : calé sur .theme-toggle (18px + sa hauteur) */
  z-index: 50;
  width: 44px;                  /* seuil tactile du projet */
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-family: "Shippori Mincho", Georgia, serif;
  font-size: var(--fs-500);
  line-height: 1;
  cursor: pointer;
}
.guide-bouton:hover { color: var(--torii-dark); border-color: var(--torii); }
.guide-bouton:focus-visible {
  outline: 2px dashed var(--torii-dark);
  outline-offset: 2px;
}

/* --- Le voile et la boîte ------------------------------------------------ */

.guide-voile {
  position: fixed;
  inset: 0;
  z-index: 60;                  /* au-dessus du bouton flottant et de la barre collante */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-5);
  /* Le voile consomme --voile, et surtout PLUS --ink : en thème sombre --ink est une
     encre crème, si bien que ce mélange à 46 % ÉCLAIRAIT la page qu'il devait éteindre
     (×18 de luminance mesurés). Un voile doit être sombre dans les deux thèmes — ce
     n'est pas une teinte de thème, c'est une extinction. */
  background: var(--voile);
  overflow-y: auto;
}

.guide {
  width: 100%;
  max-width: 520px;   /* hors échelle : largeur de dialogue, pas une mesure de lecture */
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--torii);
  padding: var(--esp-5);
}

@media (prefers-reduced-motion: no-preference) {
  .guide { animation: guideApparait .24s ease both; }
}
@keyframes guideApparait {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.guide__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.guide__titre {
  margin: 0;
  font-family: "Shippori Mincho", Georgia, serif;
  font-size: var(--fs-500);
  color: var(--ink);
}
.guide__fermer {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--rayon-pilule);
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-200);
  cursor: pointer;
}
.guide__fermer:hover { color: var(--torii-dark); border-color: var(--torii); }
.guide__fermer:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }

/* --- Le corps ------------------------------------------------------------ */

.guide__corps { font-size: var(--fs-400); line-height: var(--lh-lecture); max-width: var(--mesure); }
.guide__attendu { margin: 0 0 var(--esp-3); color: var(--ink); }
.guide__anonyme { margin: 0 0 var(--esp-3); color: var(--muted); font-style: italic; }

/* L'état personnel : le seul aplat de la boîte. Sa teinte dit le statut sans qu'on ait à
   lire — mais la phrase le dit aussi, parce que la couleur seule n'est pas une information
   accessible. */
.guide__etat {
  margin: 0 0 var(--esp-3);
  padding: var(--esp-3);
  border-left: 2px solid var(--border);
  background: var(--panel);
}
.guide__etat-phrase { margin: 0; color: var(--ink); }
.guide__etat-detail { margin: var(--esp-1) 0 0; font-size: var(--fs-200); color: var(--muted); }

.guide__etat--rien       { border-left-color: var(--torii); }
.guide__etat--en_cours   { border-left-color: var(--gold); }
.guide__etat--termine    { border-left-color: var(--matcha); }
.guide__etat--verrouille { border-left-color: var(--border); }
.guide__etat--verrouille .guide__etat-phrase { color: var(--muted); font-style: italic; }
.guide__etat--lecture    { border-left-color: var(--border); }

/* --- La suite et les actions --------------------------------------------- */

.guide__suite { margin: 0; padding-top: var(--esp-3); border-top: 1px solid var(--border); }
.guide__suite-phrase { margin: 0 0 var(--esp-2); font-size: var(--fs-300); color: var(--muted); }

.guide__lien,
.guide__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--esp-4);
  border: 1px solid var(--border);
  border-radius: var(--rayon-pilule);
  background: var(--panel);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-300);
  text-decoration: none;
  cursor: pointer;
}
.guide__lien:hover,
.guide__bouton:hover { border-color: var(--torii); color: var(--torii-dark); }
.guide__lien:focus-visible,
.guide__bouton:focus-visible { outline: 2px dashed var(--torii-dark); outline-offset: 2px; }
.guide__bouton--fort { border-color: var(--torii); color: var(--torii-dark); }

.guide__actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); }
.guide__pas {
  margin: var(--esp-3) 0 0;
  font-size: var(--fs-200);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Mobile --------------------------------------------------------------
   À 390 px la boîte occupe la largeur utile. Le bouton d'appel se rapproche du bord pour
   ne pas empiéter sur le contenu, mais garde ses 44 px. */

@media (max-width: 640px) {
  .guide-voile { padding: var(--esp-3); align-items: flex-start; padding-top: var(--esp-7); }
  .guide { padding: var(--esp-4); }
  .guide__titre { font-size: var(--fs-500); }
  .guide-bouton { right: 14px; bottom: 70px; }
  .guide__actions { gap: var(--esp-2); }
  .guide__lien, .guide__bouton { flex: 1 1 auto; padding: 0 var(--esp-3); }
}