/* Accomplissements — GÉNÉRÉ par scripts/generer_sceaux.py.
   Ne pas éditer à la main : relancer le script.

   Chargée par les DEUX gabarits, « jeu » et « conseil ». Le second ne prend
   pas la feuille de l'application, or c'est sous lui que vivent les
   expériences du Monde 0 — donc la plupart des seuils. */

/* Le texte réservé aux lecteurs d'écran voyage avec ses composants : sans
   cette règle, il s'AFFICHE sous le gabarit « conseil », qui ne charge pas la
   feuille de l'application où elle vivait. Une classe utilitaire n'appartient
   à personne tant qu'elle n'est pas là où on s'en sert. */
.g-hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Une forme commune, deux traitements (F13) ---------------------------
   Le cercle rassemble les deux familles ; ce qu'il contient les distingue.
     médaillon de parcours : une IMAGE ou des initiales, sur violet clair
     sceau de seuil        : un GLYPHE BLANC, sur la teinte pastel de sa famille

   Le glyphe est posé en MASQUE CSS, pas en <img> : le fichier SVG ne contient
   que le tracé, si bien qu'une couleur ne se corrige qu'ici. C'est aussi ce
   qui permet au même fichier de servir à 3,5 rem sur un profil et à 2 rem sur
   une carte d'annuaire sans se redessiner. */
.pz-badges, .pz-sceaux {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: .75rem 0 0;
}

.pz-badge, .pz-sceau {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  width: 5.5rem; text-align: center;
}

.pz-badge-titre, .pz-sceau-titre {
  font-size: .72rem; line-height: 1.25; color: #6b6675;
}

.pz-badge-reste, .pz-sceau-reste {
  align-self: center; font-size: .8rem; color: #6b6675;
}

/* --- Médaillons de parcours --- */
.pz-badge-medaillon, .pz-badge-sceau {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; box-sizing: border-box;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  border: 4px solid #b896b4; background: #f0e7f2;
  color: #6b4166; font-weight: 700; font-size: 1.15rem; letter-spacing: .02em;
}

/* --- Sceaux de seuils ---
   Anneau en ombre interne et non en bordure : le glyphe se dimensionne alors
   sur le cercle entier, comme sur la planche validée, et non sur ce qui reste
   à l'intérieur du trait. */
.pz-sceau-signe {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pz-fond, #b4aebd);
  box-shadow: inset 0 0 0 4px var(--pz-anneau, #857e92);
}

.pz-sceau-signe::before {
  content: ""; width: 76%; height: 76%; background: #fff;
  -webkit-mask: var(--pz-glyphe) center / contain no-repeat;
  mask: var(--pz-glyphe) center / contain no-repeat;
}

/* Un seuil secret se signale sans se trahir : le pointillé cerne la pastille
   au lieu de la remplacer, pour que le sceau reste reconnaissable. */
.pz-sceau--secret .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--secret {
  outline: 2px dashed var(--pz-anneau); outline-offset: 3px;
}

/* Sur une carte d'annuaire : plus petit, sans libellé. La taille où le
   traitement se juge, et où le trait épais du glyphe paie. */
.pz-badges--compact, .pz-sceaux--compact {
  gap: .4rem; margin-top: .6rem;
}

.pz-badges--compact .pz-badge, .pz-sceaux--compact .pz-sceau { width: auto; }

.pz-badges--compact .pz-badge-medaillon,
.pz-badges--compact .pz-badge-sceau {
  width: 2rem; height: 2rem; font-size: .66rem; border-width: 3px;
}

.pz-sceaux--compact .pz-sceau-signe {
  width: 2rem; height: 2rem; box-shadow: inset 0 0 0 3px var(--pz-anneau, #857e92);
}

/* --- Annonce d'un seuil franchi (F13, « Obtention ») ----------------------
   Deux surfaces, deux intentions. Le bandeau se pose en tête de la page
   suivante et n'attend rien ; la carte occupe l'écran final du parcours.
   Aucune animation : chaque élément est lisible immobile, et rien de ce qui
   porte du sens ne dépend d'un mouvement (wireflows §13). */
.pz-annonce {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .8rem .9rem;
  /* Une marge latérale, parce que le conteneur du Jeu n'en donne aucune sous
     le point de rupture : sans elle, le bandeau touche les bords de l'écran
     sur téléphone, alors que tout le reste de la page est en retrait. */
  margin: 0 .75rem 1rem;
  border: 1px solid #e2d6ea; border-left: 3px solid #82246f; border-radius: 10px;
  background: #faf7fc; text-align: left;
}

.pz-annonce-signes { display: flex; gap: .4rem; flex: none; }

/* Les sceaux de l'annonce sont ceux du profil, en plus petit : c'est ce qui
   permet de les reconnaître ensuite, sans les réapprendre. */
.pz-annonce .pz-sceau-signe {
  width: 2.6rem; height: 2.6rem;
  box-shadow: inset 0 0 0 3px var(--pz-anneau, #857e92);
}

.pz-annonce-corps { flex: 1; min-width: 0; }

.pz-annonce-sur {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #6b6675;
}

.pz-annonce-titre { font-weight: 600; color: #2c2833; }
.pz-annonce-desc { font-size: .86rem; color: #6b6675; }

.pz-annonce-lien { font-size: .82rem; color: #82246f; text-decoration: none; }
.pz-annonce-lien:hover { text-decoration: underline; }

.pz-revelation {
  border: 1px solid #ddd8e2; border-radius: 14px;
  padding: 1.6rem 1.3rem; margin: 0 0 1.5rem; text-align: center;
  background: linear-gradient(#fbf9fd, #fff);
}

.pz-revelation .pz-sceau-signe { width: 5.5rem; height: 5.5rem; margin: 0 auto .9rem; }

.pz-revelation-titre { font-size: 1.25rem; font-weight: 700; margin: 0 0 .3rem; color: #2c2833; }
.pz-revelation-desc { color: #6b6675; max-width: 34ch; margin: 0 auto; }

/* Le secret : bord pointillé, et une phrase avant le nom. Rien qui compte,
   rien qui clignote. */
.pz-revelation--secret { border-style: dashed; }

.pz-revelation-murmure {
  color: #6b6675; font-size: .9rem; font-style: italic; margin: 0 0 1.1rem;
}

/* --- L'écran de clôture d'un parcours (F13) -------------------------------
   Le troisième régime d'obtention : le médaillon n'est pas annoncé, il EST
   l'écran. Rien n'y bouge, rien ne s'y rejoue — on peut y revenir. */
.pz-cloture { padding: 2.5rem 1.3rem 2rem; text-align: center; }

.pz-cloture-medaillon {
  width: 7rem; height: 7rem; border-radius: 50%; box-sizing: border-box;
  object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
  border: 5px solid #b896b4; background: #f0e7f2;
  color: #6b4166; font-weight: 700; font-size: 2rem; letter-spacing: .02em;
  margin-bottom: 1.1rem;
}

.pz-cloture-sur {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #6b6675;
}

.pz-cloture-titre { font-size: 1.6rem; font-weight: 700; margin: .2rem 0 .1rem; }
.pz-cloture-date { color: #6b6675; font-size: .9rem; margin: 0; }

.pz-cloture-mot {
  max-width: 46ch; margin: 1.4rem auto 0; color: #2c2833;
}

.pz-cloture-bilan, .pz-cloture-suite { margin-top: 2.2rem; }

.pz-cloture-section {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: #6b6675; font-weight: 600; margin: 0 0 .6rem;
}

.pz-cloture-compte { font-size: 1.05rem; margin: 0 0 .6rem; }
.pz-cloture-sep { color: #b8b2c2; margin: 0 .4rem; }

.pz-cloture-chapitres {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: .4rem; justify-content: center;
}

.pz-cloture-chapitres li {
  font-size: .82rem; color: #6b4166; background: #f5eff7;
  border-radius: 999px; padding: .2rem .8rem;
}

.pz-cloture-suite { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.pz-cloture-lien { font-size: .85rem; color: #6b6675; }

/* Le retour vers la clôture depuis la carte du voyage. */
.jp-next-cloture { display: inline-block; margin-top: .4rem; font-weight: 600; }

/* --- Les teintes --- */

.pz-sceau--graphite    .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--graphite { --pz-fond: #b4aebd; --pz-anneau: #857e92; }
.pz-sceau--violet      .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--violet { --pz-fond: #be8fba; --pz-anneau: #8e5c8a; }
.pz-sceau--bleu        .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--bleu { --pz-fond: #93b7c9; --pz-anneau: #5a8598; }
.pz-sceau--vert        .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--vert { --pz-fond: #96c0aa; --pz-anneau: #5c8f76; }
.pz-sceau--corail      .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--corail { --pz-fond: #e79cb1; --pz-anneau: #c4738d; }
.pz-sceau--solaire     .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--solaire { --pz-fond: #e9c876; --pz-anneau: #bf9740; }

/* --- Les glyphes ---
   Un nom par tracé, repris tel quel dans config/seuils.yml. Si le YAML nomme
   un glyphe sans règle ici, la pastille sort vide — le contrôle de
   vérification l'attrape (« chaque sceau a sa règle CSS »).
   Le suffixe du nom de fichier est une empreinte de son contenu : public/pz/
   est servi avec un cache d'un an et sans etag. */
.pz-sceau--signe-accueil     .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-accueil { --pz-glyphe: url("/pz/sceaux/accueil-32c22859.svg"); }
.pz-sceau--signe-assemblee   .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-assemblee { --pz-glyphe: url("/pz/sceaux/assemblee-5c60f176.svg"); }
.pz-sceau--signe-emergence   .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-emergence { --pz-glyphe: url("/pz/sceaux/emergence-48b02da9.svg"); }
.pz-sceau--signe-lemniscate  .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-lemniscate { --pz-glyphe: url("/pz/sceaux/lemniscate-30df150c.svg"); }
.pz-sceau--signe-omega       .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-omega { --pz-glyphe: url("/pz/sceaux/omega-26ac5942.svg"); }
.pz-sceau--signe-passage     .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-passage { --pz-glyphe: url("/pz/sceaux/passage-d2a4a6cd.svg"); }
.pz-sceau--signe-pluriel     .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-pluriel { --pz-glyphe: url("/pz/sceaux/pluriel-142427d4.svg"); }
.pz-sceau--signe-seuil       .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-seuil { --pz-glyphe: url("/pz/sceaux/seuil-467efaa2.svg"); }
.pz-sceau--signe-spirale     .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-spirale { --pz-glyphe: url("/pz/sceaux/spirale-b3a7c16a.svg"); }
.pz-sceau--signe-tension     .pz-sceau-signe,
.pz-sceau-signe.pz-sceau--signe-tension { --pz-glyphe: url("/pz/sceaux/tension-b73820b8.svg"); }