/* ===========================================================================
   Awoui — LA MISSION. Le journal de quête, posé entre la ligne et la scène.

   La bulle est la VOIX du guide ; ceci est sa PAGE. La bulle dit une phrase et
   passe à la suivante ; la mission reste sous les yeux tant qu'elle n'est pas
   faite, avec le texte exact à recopier. Les deux sont nécessaires : une voix
   sans page se perd, une page sans voix ne s'adresse à personne.

   ELLE N'A PAS DE CADRE. Un filet au-dessus, un en dessous, et c'est tout —
   le même dessin que la liste des fichiers. L'exemple, lui, a un fond : ce
   n'est pas du décor, c'est l'information « ceci se recopie tel quel ».

   QUAND C'EST FAIT, ELLE LE DIT UNE SECONDE ET DEMIE, PUIS LA SUIVANTE VIENT.
   Pas de fanfare : le « +7 » monte sur la barre, la bulle félicite, le bloc
   passe au vert le temps de le voir. Trois signaux courts valent mieux qu'un
   long.
   =========================================================================== */

.mission{
  display:grid;gap:8px;
  padding:14px 0 16px;
  border-top:1px solid var(--trait-fin);
  border-bottom:1px solid var(--trait-fin);
  animation:mission-arrive .4s cubic-bezier(.22,1,.36,1) both;
}
.mission[hidden]{display:none !important}
@keyframes mission-arrive{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

.mission-ou{
  margin:0;
  font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--encre-3);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;
}
.mission-ou span{white-space:nowrap}
/* Les points de la mission : une pastille de la couleur d'accent, à côté du rang ; grise une fois faits. */
.mission-px{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font:11px/1.6 var(--fm);letter-spacing:0;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,transparent);vertical-align:1px}
.mission-px.fait{color:var(--encre-3);background:color-mix(in srgb,var(--encre-3) 12%,transparent)}
.mission-titre{
  margin:0;
  font:600 17px/1.3 var(--fd,system-ui);color:var(--encre);
}
/* LE TITRE REPLIE. Une mission lue peut se ranger derrière son titre — sur
   téléphone surtout, où le schéma et la consigne poussent les fichiers loin
   sous le pli. La suivante arrive toujours dépliée. */
.mission-plier{
  border:0;background:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;text-align:left;
  display:inline-flex;align-items:center;gap:8px;
}
.mission-plier::after{
  content:'';width:7px;height:7px;flex:0 0 auto;
  border-right:1.8px solid var(--encre-3);border-bottom:1.8px solid var(--encre-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease;
}
.mission.repliee .mission-plier::after{transform:rotate(-45deg) translate(-1px,1px)}
.mission.repliee .mission-visuel,.mission.repliee .mission-texte,.mission.repliee .mission-exemple,.mission.repliee .mission-etat{display:none}
@media (max-width:560px){
  .mission-visuel{padding:8px 6px 8px}
  .mission-titre{font-size:16px}
}
.mission-texte{
  margin:0;
  font-size:14.5px;line-height:1.6;color:var(--encre);
}
.mission-texte code{
  font-family:var(--fm);font-size:.92em;
  background:var(--feuille-3);padding:1px 5px;border-radius:4px;
}

/* L'EXEMPLE SE RECOPIE, ET UN MOT LE FAIT POUR VOUS. « copier » est dans la
   fonte des légendes, en haut à droite du bloc, comme les onglets de Texte.
   Il dit « copié » une seconde, puis redevient « copier » : la seule
   confirmation nécessaire est celle qu'on lit. */
.mission-exemple{
  position:relative;
  margin:2px 0 0;
  /* 72 px à droite : la place du mot « copier », qui est posé en absolu et
     passait SUR la fin de la première ligne (« de 2 à 20 », vu le 22/09). */
  padding:12px 72px 12px 14px;
  background:var(--feuille-2);
  font:12.5px/1.65 var(--fm);color:var(--encre);
  white-space:pre-wrap;word-break:break-word;
  border-radius:8px;
}
.mission-copier{
  position:absolute;top:4px;right:6px;
  border:0;background:none;cursor:pointer;
  font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--encre-3);
  min-height:32px;padding:0 8px;
}
.mission-copier:hover{color:var(--encre)}

.mission-etat{
  margin:0;
  font-size:13px;color:var(--encre-2);
}

/* Réussie : le vert de la maison, sur le titre et le filet du bas — pas un
   fond, pas une bannière. */
.mission.reussie{border-bottom-color:var(--bien)}
.mission.reussie .mission-titre{color:var(--bien)}
.mission.reussie .mission-etat{color:var(--bien)}

/* Le parcours est fini : le bloc devient le résumé — ce qu'on a fait, où ça
   vit, et ce qui vient après. Il reste, il ne se ferme pas : c'est l'œuvre. */
.mission.fin .mission-titre{font-size:19px}
.mission-lien{
  font-family:var(--fm);font-size:13px;color:var(--encre);
  border-bottom:1.5px solid var(--bien);text-decoration:none;
  justify-self:start;padding-bottom:1px;
}
.mission-lien:hover{color:var(--bien)}

@media (prefers-reduced-motion:reduce){
  .mission{animation:none}
}

/* La suite : un mot, dans la fonte des légendes, comme la ligne des
   applications. Pas un bouton — une porte qu'on désigne. */
.mission-suite{
  border:0;background:none;cursor:pointer;
  font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:var(--encre);
  min-height:44px;padding:0;justify-self:start;
  border-bottom:1.5px solid var(--bien);
}
.mission-suite:hover{color:var(--bien)}

/* ── LE VISUEL D'UNE MISSION ────────────────────────────────────────────────
   Une figure entre le titre et la consigne. Tout ce qui est encre suit
   currentColor (clair et sombre) ; une seule couleur d'accent, celle du site,
   pour l'élément qui porte l'idée ; vert = juste, rouge = ce qu'on refuse. */
.mission-tache{margin-top:10px}
.mission-tache.en-attente{visibility:hidden}
.mission-visuel{transition:opacity .5s ease}
.mission-visuel.en-attente{opacity:0}
/* La question d'un schéma vivant : une flèche, la question en gras, la pastille du bonus. */
.mission-visuel .sch-question{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:10px 0 8px;font-size:13.5px;line-height:1.4;color:var(--encre)}
.mission-visuel .sch-q-fleche{color:var(--cyan);font-weight:700;font-size:16px}
.mission-visuel .sch-q-texte{font-weight:600}
.mission-visuel .sch-q-bonus{font:11px/1.6 var(--fm);padding:1px 8px;border-radius:999px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,transparent)}
.mission-visuel .sch-q-bonus.gagne{color:var(--bien);background:color-mix(in srgb,var(--bien) 14%,transparent)}
.mission-visuel{margin:10px 0 14px;padding:12px 12px 10px;border:1px solid var(--trait-fin);border-radius:12px;background:var(--feuille-2)}
.mission-visuel svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;color:var(--encre);font-family:var(--fb,system-ui,sans-serif);font-size:12.5px}
.mission-visuel figcaption{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--encre-3);text-align:center}
.mission-visuel .sch-petit{font-size:11px}
.mission-visuel .sch-mono{font-family:var(--fm)}
.mission-visuel .sch-faible{opacity:.55}
.mission-visuel .sch-boite{fill:var(--feuille);stroke:currentColor;stroke-width:1.2}
.mission-visuel .sch-boite.acc{stroke:var(--cyan);stroke-width:2}
.mission-visuel .sch-zone{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.mission-visuel .sch-barre{fill:currentColor;opacity:.35}
.mission-visuel .sch-barre.acc{fill:var(--cyan);opacity:1}
.mission-visuel .sch-bulle{fill:var(--feuille);stroke:currentColor;stroke-width:1.2}
.mission-visuel .sch-bulle.mal{stroke:var(--mal)}
.mission-visuel .mal-t{fill:var(--mal)}
.mission-visuel .mal-l{stroke:var(--mal)}
.mission-visuel .ok-t{fill:var(--bien)}

/* ── LE FIL ────────────────────────────────────────────────────────────────
   Un point par mission, un écart entre deux volets. Vert = fait, l'anneau =
   en cours, pâle = à venir. Les points faits sont des boutons : on relit. */
.mission-fil{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0 0 4px;min-height:12px}
.fil-point{
  display:block;width:9px;height:9px;border-radius:50%;
  border:0;padding:0;margin:0;background:var(--trait);
  transition:transform .2s ease,background-color .2s ease;
}
button.fil-point{cursor:pointer}
button.fil-point:hover{transform:scale(1.5)}
.fil-point.fait{background:var(--bien)}
.fil-point.avenir{background:var(--trait-fin);opacity:.9}
.fil-point.courante{background:var(--feuille);box-shadow:0 0 0 2px var(--cyan)}
.fil-point.relue{box-shadow:0 0 0 2px var(--encre)}
.fil-point.pop{animation:fil-pop .55s cubic-bezier(.22,1,.36,1)}
@keyframes fil-pop{0%{transform:scale(1)}45%{transform:scale(1.8)}100%{transform:scale(1)}}
.fil-ecart{display:block;width:7px;height:1px}

/* Un nouveau volet s'annonce : son nom arrive en encre pleine, une seconde. */
.mission.volet-arrive .mission-ou span:last-child{animation:volet-arrive 1.6s ease both}
@keyframes volet-arrive{0%{color:var(--cyan);transform:translateX(6px)}60%{color:var(--cyan)}100%{color:var(--encre-3);transform:none}}

/* La coche se trace quand c'est fait. */
.mission-coche{width:20px;height:20px;vertical-align:-3px;margin-left:8px;fill:none;stroke:var(--bien);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mission-coche path{stroke-dasharray:24;stroke-dashoffset:24;animation:coche .45s .05s ease-out forwards}
@keyframes coche{to{stroke-dashoffset:0}}

/* Relire une mission faite : le bloc s'estompe un peu, et un mot ramène. */
.mission.revue .mission-titre,.mission.revue .mission-texte{opacity:.85}
.mission-reprendre{
  border:0;background:none;cursor:pointer;
  font-family:var(--fm);font-size:12px;letter-spacing:.06em;color:var(--encre);
  min-height:40px;padding:0;justify-self:start;
  border-bottom:1.5px solid var(--cyan);
}
.mission-reprendre:hover{color:var(--cyan)}

/* ── L'ÉTAT VIVANT ─────────────────────────────────────────────────────────
   Ce qui manque, à mesure qu'on tape ; puis « c'est écrit — Enregistrer ». */
.mission-etat.vivant{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.etat-attendus{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.etat-chip{
  display:inline-block;font:12px/1.2 var(--fm);font-weight:500;
  padding:4px 9px;border-radius:999px;border:1px solid var(--trait);color:var(--encre-2);
  transition:border-color .2s ease,color .2s ease;
}
.etat-chip.ok{border-color:var(--bien);color:var(--bien)}
.etat-ok{color:var(--bien)}
.etat-ok b{color:var(--encre)}

/* ── LA MAIN ───────────────────────────────────────────────────────────────
   Un anneau autour de ce qu'il faut cliquer, deux mots au-dessus. L'anneau
   respire ; la voix est celle de la bulle (encre sur feuille inversées). */
.guide-cible{
  position:relative;z-index:1;border-radius:9px;
  box-shadow:0 0 0 2px var(--cyan) !important;
}
@supports (color:color-mix(in srgb,red,blue)){
  .guide-cible{
    box-shadow:0 0 0 2px var(--cyan),0 0 0 7px color-mix(in srgb,var(--cyan) 22%,transparent) !important;
    animation:guide-pulse 1.9s ease-in-out infinite;
  }
  @keyframes guide-pulse{
    0%,100%{box-shadow:0 0 0 2px var(--cyan),0 0 0 6px color-mix(in srgb,var(--cyan) 24%,transparent)}
    50%{box-shadow:0 0 0 2px var(--cyan),0 0 0 12px color-mix(in srgb,var(--cyan) 0%,transparent)}
  }
}
.geste.guide-cible{padding:0 10px;margin-right:14px}
.tuile.guide-cible{border-radius:24px}
.fil-pas.guide-cible{border-radius:6px}
.guide-mot{
  position:absolute;top:0;left:0;z-index:40;pointer-events:none;
  font:600 11.5px/1 var(--fm);letter-spacing:.04em;white-space:nowrap;
  background:var(--bulle-fond);color:var(--bulle-encre);
  padding:8px 11px;border-radius:9px;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.55);
  animation:guide-mot-arrive .28s cubic-bezier(.22,1,.36,1) both;
}
.guide-mot::before{
  content:'';position:absolute;left:12px;bottom:-4px;width:9px;height:9px;
  background:inherit;transform:rotate(45deg);border-radius:2px;
}
.guide-mot.bas::before{bottom:auto;top:-4px}
.guide-mot[hidden]{display:none}
@keyframes guide-mot-arrive{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}

/* ── LES SCHÉMAS VIVANTS ──────────────────────────────────────────────────
   Des pastilles à cliquer, une note sous le dessin, et des parties qui
   s'allument en vert quand le bureau a vraiment fait la chose. */
.mission-visuel .sch-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 10px}
.mission-visuel .sch-chip{
  min-height:32px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--trait);background:var(--feuille);color:var(--encre);
  font:12.5px/1.2 var(--fm);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.mission-visuel .sch-chip:hover{border-color:var(--encre-3)}
.mission-visuel .sch-chip[aria-pressed="true"]{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.mission-visuel .sch-chip.ok{border-color:var(--bien);color:var(--bien)}
.mission-visuel .sch-chip.ko{border-color:var(--mal);color:var(--mal)}
.mission-visuel .sch-note{margin:8px 0 0;min-height:17px;font-size:12.5px;line-height:1.45;color:var(--encre-2);text-align:center}
.mission-visuel .allume .sch-boite{stroke:var(--bien);stroke-width:2}
.mission-visuel .allume line,.mission-visuel .allume path{stroke:var(--bien)}
.mission-visuel .allume text{fill:var(--bien)}
.mission-visuel .allume marker path{fill:var(--bien)}
.mission-visuel .sch-pop{animation:sch-pop .7s ease}
@keyframes sch-pop{0%{opacity:.25}100%{opacity:1}}

@media (max-width:560px){
  .fil-point{width:7px;height:7px}
  .mission-fil{gap:4px}
  .guide-mot{font-size:11px;padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){
  .guide-cible,.guide-mot,.fil-point.pop,.mission-coche path,.mission.volet-arrive .mission-ou span:last-child,.mission-visuel .sch-pop{animation:none}
  .mission-coche path{stroke-dashoffset:0}
}

/* ── LES PORTES DE FIN ─────────────────────────────────────────────────────
   La suite quand il y en a une, et les autres chemins qu'on n'a pas finis :
   des mots soulignés, comme « continuer ». Un chemin fini n'est pas un mur. */
.mission-portes{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-family:var(--fm);font-size:12px;letter-spacing:.08em;color:var(--encre-3)}
.mission-porte{border:0;background:none;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--encre);min-height:40px;padding:0;border-bottom:1.5px solid var(--trait);text-align:left}
.mission-porte:hover{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ── LE CHOIX (le mot « missions » du rail) ────────────────────────────────
   Les parcours par voie, comme une liste de fichiers : le nom, où l'on en
   est, une coche quand c'est fini. Celui en cours est en encre pleine. */
.choix-voie{list-style:none;padding:16px 2px 6px;font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--encre-3)}
.choix-voie:first-child{padding-top:2px}
.choix-entree .entree-ico{color:var(--bien)}
.choix-entree .entree-nom{color:var(--encre-2)}
.choix-entree[aria-current="true"] .entree-nom{color:var(--encre);font-weight:600}
.choix-entree[aria-current="true"] .entree-taille{color:var(--cyan)}
.choix-entree .entree-taille.fini{color:var(--bien)}