/* =========================================================================
   L'AIDE VOCALE — habillage
   =========================================================================
   Le bouton doit se VOIR. Un bêta-testeur qui ne sait pas où cliquer ne
   cherche pas l'aide : il ferme l'application. Il est donc plus clair que les
   autres entrées du menu au repos, et franchement allumé quand il sert.
   ========================================================================= */

.pulse--aide {
  border-color: rgba(184, 166, 240, .55);
  color: #C9B8F0;
  box-shadow: 0 0 0 1px rgba(184, 166, 240, .18) inset;
}
.pulse--aide .menu__glyphe { color: #C9B8F0; }

.pulse--aide[aria-pressed="true"] {
  background: #C9B8F0;
  border-color: #C9B8F0;
  color: #16121F;
  box-shadow: 0 0 0 4px rgba(201, 184, 240, .22);
}
.pulse--aide[aria-pressed="true"] .menu__glyphe { color: #16121F; }

/* QUAND L'AIDE PARLE, TOUTE LA PAGE LE DIT.
   Sans ce liseré, on croit l'application bloquée : les boutons ne répondent
   plus, et rien n'explique pourquoi. */
:root[data-aide] body::after {
  content: "";
  position: fixed; inset: 0;
  border: 3px solid rgba(201, 184, 240, .55);
  pointer-events: none;
  z-index: 60;
}

:root[data-aide] .ask, :root[data-aide] .dials,
:root[data-aide] .bar__menu, :root[data-aide] .canaux { cursor: help; }

/* =========================================================================
   LE TEXTE QUI ACCOMPAGNE LA VOIX
   =========================================================================

   AU CENTRE, PAS EN BAS. Dans la bande basse, le cartouche tombait sous le
   pouce : sur un téléphone tenu d'une main, la main couvre exactement ce
   qu'elle doit lire. Au centre, il est lu.

   IL NE PREND AUCUN CLIC. `pointer-events: none` : on peut toucher un autre
   élément pendant qu'il est affiché, et la voix enchaîne sans qu'on ait à
   viser autour du cartouche.

   IL S'EFFACE TROIS SECONDES APRÈS LA VOIX. Le temps de finir la dernière
   ligne des yeux, pas plus : l'aide explique, elle n'occupe pas l'écran.
   ========================================================================= */
.aide__texte {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.97);
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
  z-index: 70;
  background: rgba(18, 15, 26, .97);
  border: 1px solid rgba(201, 184, 240, .38);
  border-radius: 22px;
  padding: 26px 30px;
  color: #F2EFF7;
  font-size: 20px;
  line-height: 1.6;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .6),
              0 0 0 1px rgba(201, 184, 240, .08) inset;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.aide__texte.est-la {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.aide__texte[hidden] { display: none; }

.aide__titre {
  display: block; color: #C9B8F0;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 12px;
}
.aide__corps { display: block; }

/* Une aide qui s'anime chez qui a demandé moins d'animation se contredit. */
@media (prefers-reduced-motion: reduce) {
  .aide__texte,
  .aide__texte.est-la { transition: none; transform: translate(-50%, -50%); }
}

@media (max-width: 520px) {
  .aide__texte {
    width: calc(100vw - 28px);
    font-size: 18px; padding: 22px 22px; border-radius: 20px;
  }
}

/* Le cartouche est le seul bloc traduit de la page : quand il parle arabe, il
   s'aligne à droite tout seul, sans entraîner le reste de l'Arène. */
.aide__texte[dir="rtl"] { text-align: right; }
.aide__texte[dir="rtl"] .aide__titre { letter-spacing: 0; }