/* ---- Jetons ----
   Parti pris assume : cette page vit dans un seul monde visuel, sombre,
   celui du site. Pas de bascule de theme, mais chaque couleur est peinte
   explicitement pour que la page tienne sur n'importe quel fond hote. */
:root {
  --fond: #14161f;
  --creme: #e8e4dc;
  --creme-doux: #d4cfc4;
  --terracotta: #c1422a;
  --terracotta-clair: #d9583e;
  --or: #c8a24a;
  --sourd: #9ba0b1;

  --mesure: 37rem;
  --marge: clamp(1.5rem, 5vw, 5.5rem);

  --spot-x: 50%;
  --spot-y: 52%;
}

.blason,
.blason *,
.blason *::before,
.blason *::after { box-sizing: border-box; }

.blason {
  background: var(--fond);
  color: var(--creme);
  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.55vw, 1.6rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.est-verrouille { overflow: hidden; }

/* ---- La camera : une seule fresque, fixe, que l'on cadre ---- */
.blason__camera {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--fond);
  z-index: 0;
}

/* Enveloppe dediee au recul d'ouverture, pour ne pas entrer en conflit
   avec la transformation de cadrage portee par l'image elle-meme. */
.blason .camera__cadre {
  position: absolute;
  inset: 0;
  transform: scale(1.14);
  opacity: 0;
  transition: transform 2600ms cubic-bezier(0.16, 0.84, 0.3, 1), opacity 1600ms ease;
}
.blason .camera__cadre.est-revelee {
  transform: scale(1);
  opacity: 1;
}

.blason .camera__image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  margin-left: calc(max(100vw, calc(100vh * 16 / 9)) / -2);
  margin-top: calc(max(100vw, calc(100vh * 16 / 9)) * 9 / 16 / -2);
  transform-origin: 50% 50%;
  transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* ---- Projecteur : designe la figure dont on parle ---- */
.blason__projecteur {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease, background 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  background: radial-gradient(
    ellipse 26vw 58vh at var(--spot-x) var(--spot-y),
    rgba(14, 16, 23, 0) 0%,
    rgba(14, 16, 23, 0.18) 42%,
    rgba(14, 16, 23, 0.7) 78%,
    rgba(14, 16, 23, 0.88) 100%
  );
}
.blason__projecteur.est-visible { opacity: 1; }

/* ---- Fond du texte : plein, pour que la lecture ne depende de rien ---- */
.blason__scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease, background 1400ms ease;
  background: linear-gradient(
    90deg,
    rgba(20, 22, 31, 0) 0%,
    rgba(20, 22, 31, 0) 42%,
    rgba(20, 22, 31, 0.9) 58%,
    rgba(20, 22, 31, 0.985) 68%,
    rgba(20, 22, 31, 0.985) 100%
  );
}
.blason__scrim.est-visible { opacity: 1; }
.blason__scrim.est-a-gauche {
  background: linear-gradient(
    270deg,
    rgba(20, 22, 31, 0) 0%,
    rgba(20, 22, 31, 0) 42%,
    rgba(20, 22, 31, 0.9) 58%,
    rgba(20, 22, 31, 0.985) 68%,
    rgba(20, 22, 31, 0.985) 100%
  );
}

/* Ecrans centres sur la fresque entiere (ouverture, finale) : un halo sombre
   tres localise sous le bloc de texte, plutot qu'un voile general qui
   eteindrait la fresque. */
.blason__halo {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1000ms ease;
  background: radial-gradient(
    ellipse 44vw 50vh at 50% 50%,
    rgba(14, 16, 23, 0.95) 0%,
    rgba(14, 16, 23, 0.88) 46%,
    rgba(14, 16, 23, 0.3) 80%,
    rgba(14, 16, 23, 0) 100%
  );
}
.blason__halo.est-visible { opacity: 1; }

/* ---- Seuil : chargement, puis texte d'intro, puis la fresque ---- */
.blason .seuil[hidden] { display: none; }

.blason .seuil {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  gap: 2rem;
  padding: var(--marge);
  background: var(--fond);
  text-align: center;
  transition: opacity 1500ms ease;
}
.blason .seuil.est-close {
  opacity: 0;
  pointer-events: none;
}

.blason .seuil__pile {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
}

.blason .seuil__embleme {
  width: clamp(6rem, 14vw, 9.5rem);
  height: auto;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 1200ms ease, transform 1600ms cubic-bezier(0.16, 0.84, 0.3, 1);
}
.blason .seuil.est-eveille .seuil__embleme {
  opacity: 1;
  transform: scale(1);
}

.blason .jauge {
  width: min(17rem, 60vw);
  height: 2px;
  background: rgba(200, 162, 74, 0.22);
  overflow: hidden;
}
.blason .jauge__fil {
  display: block;
  height: 100%;
  width: 0;
  background: var(--or);
  transition: width 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.blason .seuil.est-eveille .jauge__fil { width: 100%; }
.blason .seuil.est-au-recit .jauge { opacity: 0; transition: opacity 600ms ease; }

.blason .seuil__mention {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sourd);
  opacity: 0;
  transition: opacity 900ms ease;
}
.blason .seuil.est-eveille .seuil__mention { opacity: 1; }
.blason .seuil.est-au-recit .seuil__mention { opacity: 0; }

.blason .recitatif {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  pointer-events: none;
}
.blason .recitatif p {
  margin: 0;
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.14;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--creme);
  opacity: 0;
  transform: translateY(0.9rem);
  transition: opacity 1100ms ease, transform 1100ms cubic-bezier(0.16, 0.84, 0.3, 1);
}
.blason .recitatif p em {
  font-style: normal;
  color: var(--terracotta-clair);
}
.blason .recitatif p.est-dite {
  opacity: 1;
  transform: none;
}
.blason .seuil.est-au-recit .seuil__pile { opacity: 0; transition: opacity 700ms ease; }

.blason .passer {
  position: absolute;
  right: var(--marge);
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  background: none;
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--sourd);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: color 250ms ease, border-color 250ms ease;
}
.blason .passer:hover,
.blason .passer:focus-visible {
  color: var(--creme);
  border-color: var(--or);
}
.blason .passer:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* ---- Fil des chapitres ---- */
.blason .recit {
  position: relative;
  z-index: 3;
}
.blason-anime .blason .recit {
  opacity: 0;
  transition: opacity 1200ms ease;
}
.blason .recit.est-ouverte { opacity: 1; }

.blason .ecran {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 12vh, 8rem) var(--marge);
}

/* ---- Ouverture ---- */
.blason .ouverture {
  justify-items: center;
  text-align: center;
  gap: 1.25rem;
}

.blason .surtitre {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0;
}

.blason .ouverture__titre {
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 1.4rem + 6vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--creme);
  text-shadow: 0 2px 28px rgba(14, 16, 23, 0.95), 0 1px 3px rgba(14, 16, 23, 0.95);
}
.blason .ouverture__titre em {
  font-style: normal;
  color: var(--terracotta-clair);
}

.blason .ouverture__chapo {
  max-width: 36rem;
  margin: 0;
  color: var(--creme);
  font-size: clamp(1.45rem, 1.2rem + 0.85vw, 1.95rem);
  line-height: 1.5;
  text-shadow: 0 1px 14px rgba(14, 16, 23, 0.98), 0 0 30px rgba(14, 16, 23, 0.9);
}

.blason .repere {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sourd);
}
.blason .repere::after {
  content: "";
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(var(--or), transparent);
  animation: filer 2.6s ease-in-out infinite;
}
@keyframes filer {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---- Chapitres ---- */
.blason .chapitre { align-content: center; }
.blason .chapitre__bloc { max-width: var(--mesure); }
.blason-anime .blason .chapitre__bloc {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 900ms ease 260ms, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms;
}
.blason .chapitre.est-active .chapitre__bloc {
  opacity: 1;
  transform: none;
}
.blason .chapitre--droite { justify-items: end; }
.blason .chapitre--gauche { justify-items: start; }

.blason .chapitre__acte {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 0.9rem;
}

.blason .chapitre__rang {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terracotta-clair);
  margin: 0 0 0.5rem;
}
.blason .chapitre__rang::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 2.5rem;
  background: linear-gradient(90deg, var(--terracotta), transparent);
}

.blason .chapitre__nom {
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 1.35rem + 2.7vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 1.1rem;
  color: var(--creme);
}

.blason .chapitre__texte { margin: 0; color: var(--creme-doux); }
.blason .chapitre__texte + .chapitre__texte { margin-top: 0.9rem; }
.blason .chapitre__texte strong {
  font-weight: 700;
  color: var(--creme);
}

.blason .chapitre__valeur {
  margin: 1.4rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(200, 162, 74, 0.28);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sourd);
}
.blason .chapitre__valeur strong {
  display: block;
  margin-top: 0.35rem;
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: var(--or);
}

.blason .univers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}
.blason .univers li {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme-doux);
  border: 1px solid rgba(200, 162, 74, 0.32);
  padding: 0.22rem 0.6rem;
}

/* Les quatre heros du blason sont distingues dans le rail par la couleur,
   pas par un regroupement : ils occupent le centre de la fresque et les
   compagnons les encadrent, donc les deux actes ne sont pas contigus. */
.blason .rail__cran--heros { color: var(--or); }
.blason .rail__cran--heros.est-active { color: var(--terracotta-clair); }

/* ---- Finale ---- */
.blason .finale { justify-items: center; text-align: center; gap: 1.4rem; }
.blason .finale__bloc {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
  max-width: 36rem;
}
.blason-anime .blason .finale__bloc {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1100ms ease 300ms, transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
}
.blason .finale.est-active .finale__bloc {
  opacity: 1;
  transform: none;
}
.blason .finale__embleme {
  width: clamp(5rem, 10vw, 7rem);
  height: auto;
  filter: drop-shadow(0 6px 26px rgba(14, 16, 23, 0.9));
}
.blason .finale__titre {
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem);
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
  color: var(--creme);
  text-shadow: 0 2px 28px rgba(14, 16, 23, 0.95);
}
.blason .finale__texte {
  margin: 0;
  color: var(--creme-doux);
  text-shadow: 0 1px 14px rgba(14, 16, 23, 0.98), 0 0 30px rgba(14, 16, 23, 0.92);
}

/* ---- Rail : deux actes, dix figures, l'ordre de la ligne ---- */
.blason .rail {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.75rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
  color: var(--sourd);
  opacity: 0;
  transition: opacity 700ms ease;
}
.blason .rail.est-visible { opacity: 1; }
/* Le rail se place du cote oppose au texte : il ne peut donc jamais le
   recouvrir, quel que soit le cote ou tombe la figure. */
.blason .rail.est-a-droite {
  left: auto;
  right: clamp(0.75rem, 2vw, 1.75rem);
  align-items: flex-end;
  text-align: right;
}
.blason .rail.est-a-droite .rail__cran { flex-direction: row-reverse; }

.blason .rail__cran {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.4;
  transition: opacity 500ms ease, color 500ms ease;
}
.blason .rail__cran::before {
  content: "";
  width: 1.1rem;
  height: 1px;
  background: currentColor;
  transition: width 500ms ease;
}
.blason .rail__cran.est-active {
  opacity: 1;
  color: var(--terracotta-clair);
}
.blason .rail__cran.est-active::before { width: 2.3rem; }


/* ---- La planche : tous les nouveaux visuels, apres la finale ---- */
.blason .planche {
  position: relative;
  z-index: 3;
  background: var(--fond);
  padding: clamp(4rem, 14vh, 9rem) var(--marge) clamp(2rem, 6vh, 4rem);
}
.blason .planche__entete {
  max-width: 40rem;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
  text-align: center;
}
.blason .planche__titre {
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1.04;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0.7rem 0 0.8rem;
  color: var(--creme);
}
.blason .planche__chapo {
  margin: 0;
  color: var(--creme-doux);
}

.blason .planche__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 78rem;
  margin: 0 auto;
}

.blason .piece {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1rem 1.2rem;
  background: #191c27;
  border: 1px solid rgba(200, 162, 74, 0.16);
}
.blason .piece--large { grid-column: span 2; }

.blason .piece__vue {
  display: grid;
  place-items: center;
  background: #14161f;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.blason .piece__vue--carre { aspect-ratio: 1 / 1; }
.blason .piece__vue img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.blason .piece__nom {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme);
  margin: 0;
}
.blason .piece__usage {
  margin: -0.5rem 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--sourd);
}

@media (max-width: 40rem) {
  .blason .piece--large { grid-column: span 1; }
}

/* ---- Bloc pratique, apres la finale ---- */
.blason .pratique {
  position: relative;
  z-index: 3;
  background: var(--fond);
  padding: clamp(4rem, 14vh, 9rem) var(--marge);
  border-top: 1px solid rgba(200, 162, 74, 0.22);
}
.blason .pratique__bloc {
  max-width: 40rem;
  margin: 0 auto;
}
.blason .pratique__titre {
  font-family: "Titillium Web", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.3rem);
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--creme);
}
.blason .pratique__texte {
  margin: 0 0 0.9rem;
  color: var(--creme-doux);
}
.blason .pratique__liste {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
  color: var(--creme-doux);
}
.blason .pratique__liste li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
}
.blason .pratique__liste li::before {
  content: "—";
  color: var(--terracotta);
}

@media (max-width: 46rem) {
  .blason .rail { display: none; }
  .blason .chapitre--droite,
  .blason .chapitre--gauche { justify-items: start; }
  .blason .ecran { align-items: end; padding-bottom: clamp(3rem, 10vh, 6rem); }
  .blason .finale { align-items: center; }
  .blason__scrim,
  .blason__scrim.est-a-gauche {
    background: linear-gradient(
      0deg,
      rgba(20, 22, 31, 0.985) 0%,
      rgba(20, 22, 31, 0.96) 46%,
      rgba(20, 22, 31, 0.55) 68%,
      rgba(20, 22, 31, 0) 100%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .blason .camera__image,
  .blason .camera__cadre,
  .blason__projecteur,
  .blason__scrim,
  .blason .chapitre__bloc,
  .blason .finale__bloc,
  .blason .recit,
  .blason .seuil,
  .blason .rail,
  .blason .rail__cran,
  .blason .rail__cran::before { transition-duration: 1ms; }
  .blason .repere::after { animation: none; }
  .blason .chapitre__bloc,
  .blason .finale__bloc { opacity: 1; transform: none; }
}

/* ---- Document autonome ----
   La page est rendue hors du gabarit du theme : pas d'en-tete, pas de barre
   laterale, pas de prechargeur. C'etait la condition du plein ecran, et deux
   ecrans de chargement empiles ne pouvaient pas coexister. */
body.page-blason {
  margin: 0;
  background: var(--fond);
}

.retour {
  position: fixed;
  z-index: 6;
  top: clamp(0.9rem, 2.5vh, 1.6rem);
  left: clamp(0.9rem, 2.5vw, 1.8rem);
  padding: 0.45rem 0.9rem;
  background: rgba(14, 16, 23, 0.7);
  border: 1px solid rgba(200, 162, 74, 0.3);
  color: var(--sourd);
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 250ms ease, border-color 250ms ease;
}
.retour:hover,
.retour:focus-visible {
  color: var(--creme);
  border-color: var(--or);
}
.retour:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* Sans JavaScript, la camera n'a personne pour la piloter : la fresque cesse
   d'etre un calque fixe et redevient une simple image en tete de page, sous
   laquelle les dix chroniques se lisent en liste. */
html:not(.blason-anime) .blason__camera {
  position: relative;
  height: min(56vh, 60vw);
}
html:not(.blason-anime) .blason .camera__cadre {
  position: relative;
  transform: none;
  opacity: 1;
}
html:not(.blason-anime) .blason .ecran { min-height: 0; }
html:not(.blason-anime) .blason .rail,
html:not(.blason-anime) .blason .repere { display: none; }

/* Le rail est une vraie navigation : ses entrees sont des liens vers les
   ancres de chapitre, atteignables au clavier. */
.blason .rail__cran { text-decoration: none; color: inherit; }
.blason .rail__cran:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 4px;
}

/* La barre d'administration decale le document de 32 px : le lien de retour,
   en position fixe, passerait dessous pour un membre du staff connecte. */
body:has(#wpadminbar) .retour { top: calc(32px + clamp(0.9rem, 2.5vh, 1.6rem)); }