/* =========================================================
   Repondre a une suite de questions.

   Deux choses, et rien de plus :
     - un accuse de reception visuel a chaque reponse, pour que la saisie
       paraisse repondre au quart de tour ;
     - deux fleches laterales pour passer d'une question a la suivante,
       dans l'esprit de la tabulation mais visibles et animees.

   Aucune couleur en dur : tout vient des variables de la charte, pour que la
   marque blanche s'applique ici comme ailleurs. Rien n'est masque tant que le
   script n'a pas pose la classe js-questions : sans JavaScript, la page reste
   exactement ce qu'elle etait.
   ========================================================= */

/* --------------------- accuse de reception --------------------- */

.q-item {
  position: relative;
  transition: background-color .25s ease, box-shadow .25s ease;
}

/*
  La coche nait au point de la reponse puis s'efface : elle confirme sans
  rester dans le champ de vision de la question suivante. Le trace est un
  masque, la couleur reste donc celle de la charte.
*/
.q-item::after {
  content: "";
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='black'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='black'/%3E%3C/svg%3E") center / 100% no-repeat;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}

/* Le V de la coche, trace avec deux bords : pas d'image, pas de couleur figee. */
.q-item::before {
  content: "";
  position: absolute;
  top: 1.04rem;
  right: 1.17rem;
  width: .3rem;
  height: .58rem;
  border: solid var(--brand-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.4);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}

.q-item.q-just-answered::after { animation: q-pastille .9s ease forwards; }
.q-item.q-just-answered::before { animation: q-coche .9s ease forwards; }
.q-item.q-just-answered { animation: q-accuse .55s ease; }

@keyframes q-pastille {
  0%   { opacity: 0; transform: scale(.4); }
  25%  { opacity: 1; transform: scale(1.15); }
  40%  { transform: scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes q-coche {
  0%   { opacity: 0; transform: rotate(45deg) scale(.4); }
  30%  { opacity: 1; transform: rotate(45deg) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(45deg) scale(1); }
}

@keyframes q-accuse {
  0%   { background-color: transparent; }
  30%  { background-color: var(--ok-bg); }
  100% { background-color: transparent; }
}

/* La question visee par les fleches se detache le temps qu'on l'atteigne. */
.q-item.q-courante {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
}

/* -------------------------- fleches ---------------------------- */

.q-nav {
  position: fixed;
  top: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .3s ease;
}

.js-questions .q-nav { opacity: 1; }

.q-nav-prev { left: max(.75rem, calc(50vw - var(--maxw) / 2 - 3.5rem)); }
.q-nav-next { right: max(.75rem, calc(50vw - var(--maxw) / 2 - 3.5rem)); }

.q-fleche {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease,
              border-color .18s ease, opacity .2s ease;
}

.q-fleche svg { width: 1.25rem; height: 1.25rem; }

.q-fleche:hover:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-text);
  transform: scale(1.08);
}

.q-fleche:active:not(:disabled) { transform: scale(.94); }

.q-fleche:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.q-fleche:disabled {
  opacity: .3;
  cursor: default;
}

/* Petit appel du regard quand une question vient d'etre repondue : la fleche
   « suivante » avance d'un cran, comme pour montrer le chemin. */
.q-fleche.q-appel { animation: q-appel .6s ease; }

@keyframes q-appel {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(.28rem) scale(1.06); }
  70%      { transform: translateX(-.1rem); }
}

.q-nav-prev .q-fleche.q-appel { animation-name: q-appel-gauche; }

@keyframes q-appel-gauche {
  0%, 100% { transform: translateX(0); }
  35%      { transform: translateX(-.28rem) scale(1.06); }
  70%      { transform: translateX(.1rem); }
}

/* Compteur : le rang de la question tient lieu de barre de progression. */
.q-compteur {
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .1rem .45rem;
  box-shadow: var(--shadow);
}

/*
  Sous 1100 px, les cotes de l'ecran servent au texte : les deux fleches se
  regroupent en bas a droite, la ou le pouce les atteint. La bulle
  d'assistance occupant deja ce coin, on se place au-dessus d'elle.
*/
@media (max-width: 1100px) {
  .q-nav {
    top: auto;
    bottom: 1rem;
    transform: none;
  }
  .q-nav-prev { left: auto; right: 1rem; bottom: 4.6rem; }
  .q-nav-next { right: 1rem; }
  .q-fleche { width: 2.6rem; height: 2.6rem; }
  .q-nav-prev .q-compteur { display: none; }

  body:has(.support-widget) .q-nav-next { bottom: 5.2rem; }
  body:has(.support-widget) .q-nav-prev { bottom: 8.8rem; }
}

/* ------------------- progression du bloc en direct ------------------- */

.progress span { transition: width .4s cubic-bezier(.2, .8, .2, 1); }

/* --------------------------- sobriete --------------------------- */

@media (prefers-reduced-motion: reduce) {
  .q-item,
  .q-item::after,
  .q-item::before,
  .q-fleche,
  .progress span {
    animation: none !important;
    transition: none !important;
  }
  .q-item.q-just-answered::after,
  .q-item.q-just-answered::before { opacity: 0; }
}