/* =====================================================================
   CERCLE MAGUS – Historique d'une maison (registre) & pages de texte
   ===================================================================== */

.page-hist{--house:var(--azur)}

.hist{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:2rem 1.25rem 4rem}
.hist__retour{font-family:var(--ui);font-size:.85rem;letter-spacing:.03em;text-decoration:none;color:var(--muted)}
.hist__retour:hover{color:var(--ivory)}

.hist__entete{text-align:center;margin:1.4rem 0 2rem}
.hist__cadran{width:180px;margin:0 auto 1rem}
.hist__cadran .cadran__svg{width:100%;height:auto;display:block;overflow:visible}
.hist__cadran .cadran__arc{filter:drop-shadow(0 0 5px var(--house))}
.hist__cadran .cadran__logo{filter:drop-shadow(0 0 5px var(--house))}
/* Le blason mène à l'histoire du Fondateur, comme à l'Observatoire. */
.hist__cadran .cadran__blason .cadran__logo,.hist__cadran .cadran__blason .cadran__medaillon{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.4,.5,1),filter .35s ease;filter:drop-shadow(0 0 5px var(--house)) drop-shadow(0 0 0 transparent)}
.hist__cadran .cadran__blason:hover .cadran__logo,.hist__cadran .cadran__blason:focus-visible .cadran__logo,
.hist__cadran .cadran__blason:hover .cadran__medaillon,.hist__cadran .cadran__blason:focus-visible .cadran__medaillon{transform:scale(1.1);filter:drop-shadow(0 0 7px var(--house)) drop-shadow(0 0 20px var(--house))}
.hist__cadran .cadran__blason:focus-visible{outline:none}
.hist__titre{font-family:var(--display);font-weight:600;font-size:clamp(2rem,6vw,3rem);color:var(--ivory)}
.hist__devise{margin:.3rem 0 0;color:var(--muted);font-style:italic}
/* Le nombre et le mot « points » ont la même taille : les capitales et les
   chiffres partagent alors la même hauteur, et la ligne se lit d'un bloc.
   La hiérarchie passe par la couleur et la graisse, pas par la taille. */
.hist__total{margin:.6rem 0 0;font-family:var(--ui);color:var(--muted-2);letter-spacing:.02em;text-transform:uppercase;font-size:1.6rem;font-weight:500;line-height:1.2}
/* Le total porte la couleur de sa Maison, éclairci d'un cran vers l'ivoire :
   les Maisons sombres donnaient un chiffre trop discret pour la figure
   principale de la page. Le repli en couleur pleine sert aux navigateurs
   qui ignorent color-mix. */
.hist__total-nombre{font-weight:600;color:var(--house);color:color-mix(in srgb,var(--house) 65%,var(--ivory));letter-spacing:-.01em}

/* Police d'interface, comme le registre qu'il annonce : sur cette page, le
   nom de la Maison est ainsi le seul à porter la police des titres. */
.hist__sous-titre{font-family:var(--ui);font-weight:600;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.hist__vide{color:var(--muted)}
/* Mention réservée au professeur connecté : discrète, elle ne doit pas passer
   pour un message adressé aux élèves. */
.hist__note{margin:-.4rem 0 1rem;color:var(--muted);font-family:var(--ui);font-size:.85rem}

.journal{list-style:none;margin:0;padding:0}
/* Colonne des points de largeur FIXE : chaque ligne étant sa propre grille,
   une largeur « auto » se calculerait ligne par ligne et les libellés ne
   seraient pas alignés entre un « -5 » et un « +100 ». */
.journal__ligne{display:grid;grid-template-columns:4ch 1fr;gap:1rem;align-items:baseline;padding:.7em 0;border-bottom:1px solid rgba(58,65,118,.5)}
.journal__ligne:last-child{border-bottom:none}
.journal__points{font-family:var(--ui);font-weight:600;font-size:1.05rem;text-align:right;font-variant-numeric:tabular-nums}
.journal__ligne--gain .journal__points{color:var(--gain)}
.journal__ligne--perte .journal__points{color:var(--perte)}
.journal__detail{display:flex;flex-direction:column;gap:.1rem}
.journal__libelle{color:var(--ivory)}
.journal__concerne{color:var(--muted)}
.journal__commentaire{font-size:.92rem;color:var(--muted);margin:.15rem 0}
.journal__meta{font-size:.8rem;color:var(--muted-2)}

/* Navigation d'une page du registre à l'autre : trois emplacements fixes,
   pour que les flèches ne bougent pas d'une page sur l'autre. */
.pages{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;margin-top:1.4rem;font-family:var(--ui);font-size:.88rem}
.pages__lien{color:var(--house);text-decoration:none;white-space:nowrap}
.pages__lien:hover{text-decoration:underline}
.pages__lien--avant{justify-self:start}
.pages__lien--apres{justify-self:end}
.pages__lien--inactif{color:var(--muted-2);opacity:.4}
.pages__lien--inactif:hover{text-decoration:none}
.pages__rang{justify-self:center;color:var(--muted-2);font-size:.8rem;letter-spacing:.04em}

/* Écran étroit : les trois éléments sont insécables et ne tiennent plus sur
   une ligne. Les flèches restent aux extrémités, le rang passe dessous. */
@media (max-width:480px){
  .pages{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem .8rem}
  .pages__rang{order:3;width:100%;text-align:center}
}

/* Écran tactile : cibles au doigt (44 px recommandés). */
@media (pointer:coarse){
  .pages__lien,.hist__retour,.texte__retour a{display:inline-flex;align-items:center;min-height:44px}
}

/* ------- Pages de texte (mentions de confidentialité) ------- */
.page-texte .texte{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:2rem 1.25rem 4rem}
.texte__retour{font-family:var(--ui);font-size:.85rem;letter-spacing:.03em}
.texte__retour a{color:var(--muted);text-decoration:none}
.texte__retour a:hover{color:var(--ivory)}
.texte__titre{font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,6vw,2.8rem);color:var(--ivory);margin:1rem 0 1.2rem}
.texte__intro{font-size:1.05rem;color:var(--ivory);background:linear-gradient(180deg,var(--panel),var(--ground-2));border:1px solid var(--line);border-radius:var(--rayon);padding:1.2rem 1.4rem;margin-bottom:2rem}
.texte__section{margin-bottom:1.8rem}
.texte__section h2{font-family:var(--display);font-size:1.3rem;color:var(--ivory);margin-bottom:.5rem;padding-bottom:.3rem;border-bottom:1px solid var(--line)}
.texte__section p{margin:.5rem 0;color:var(--muted)}
.texte__section ul{margin:.5rem 0;padding-left:1.3rem}
.texte__section li{margin:.35rem 0;color:var(--muted)}
.texte__section strong{color:var(--ivory)}
.texte__section a{color:var(--azur)}