/* =====================================================
   TIW · Les ecritures de la Terre du Milieu
   Charte : nuit profonde, or de l'Anneau, ithildin
   Typo : Cinzel (titres) + EB Garamond (corps)
   Grille : Bootstrap grid, composition Muller-Brockmann
   ===================================================== */

/* --- Polices auto-hebergees --- */
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('fonts/cinzel-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alcarin Tengwar';
  src: url('fonts/AlcarinTengwar-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alcarin Tengwar';
  src: url('fonts/AlcarinTengwar-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Jetons --- */
/* =====================================================
   REGLAGES  ·  a modifier a la main
   ===================================================== */
:root {
  /* TON IMAGE DE FOND DU HERO.
     Depose le fichier dans /img, puis remplace 'none' par :
        url('img/hero.jpg')
     Laisse 'none' si tu n'en veux pas : le site fonctionne sans. */
  --hero-image: url('img/hero.jpg');

  /* Son intensite. 0 = invisible, 1 = pleine puissance.
     Au-dela de 0.35 le texte devient dur a lire. */
  --hero-image-opacite: 0.26;

  /* La position horizontale de l'Anneau dans le hero.
     50% = centre, 100% = colle a droite. */
  --anneau-x: 66%;
}

:root {
  --nuit: #0B1310;
  --nuit-2: #101B16;
  --nuit-3: #16241D;
  --parchemin: #EDE4CE;
  --brume: rgba(237, 228, 206, 0.58);
  --brume-faible: rgba(237, 228, 206, 0.34);
  --or: #C6A15B;
  --ligne: rgba(198, 161, 91, 0.22);
  --accent: #C6A15B;
  --accent-halo: rgba(198, 161, 91, 0.35);
  --second: #C6A15B;          /* couleur d'appoint du peuple */
  --lueur: rgba(198, 161, 91, 0.10); /* halo de fond du hero */
  --f-display: 'Cinzel', serif;
  --f-body: 'EB Garamond', Georgia, serif;
  --f-tengwar: 'Alcarin Tengwar', serif;
  --transition-theme: 900ms cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* =====================================================
   AMBIANCES PAR PEUPLE
   Les couleurs viennent des DESCRIPTIONS de Tolkien, pas
   d'une charte officielle : il n'en existe aucune. Voir la
   section « D'ou viennent ces couleurs » sur la page.
   ===================================================== */

/* Hauts Elfes, Noldor. Le blason de Finwe porte des couleurs
   jaune vif et rouge, reprises par Feanor, Fingolfin et
   Finarfin. Feanor, « esprit de feu », y ajoute des flammes.
   Or et braise, donc, sur la nuit de Valinor. */
body[data-peuple='quenya'] {
  --accent: #E9C87D;
  --accent-halo: rgba(233, 200, 125, 0.42);
  --second: #C4552F;
  --lueur: rgba(233, 200, 125, 0.13);
  --nuit: #100D08;
  --nuit-2: #1A150D;
  --nuit-3: #241C11;
  --ligne: rgba(233, 200, 125, 0.20);
}

/* Elfes Gris. Dans Le Hobbit, Tolkien emploie le vert pour
   les Elfes des Bois, et prolonge cette association dans le
   Seigneur des Anneaux. Vert de foret, sous la brume. */
body[data-peuple='sindarin'] {
  --accent: #A9C4B0;
  --accent-halo: rgba(169, 196, 176, 0.38);
  --second: #6E8F72;
  --lueur: rgba(169, 196, 176, 0.10);
  --nuit: #0A1210;
  --nuit-2: #101A16;
  --nuit-3: #16241E;
  --ligne: rgba(169, 196, 176, 0.18);
}

/* Portes de Durin. L'ithildin ne se voit qu'a la lumiere des
   etoiles et de la lune. L'etoile de Feanor, gravee sur ces
   memes Portes, etait « proprement de couleur argent ».
   Argent lunaire sur pierre noire. */
body[data-peuple='beleriand'] {
  --accent: #C9E2F7;
  --accent-halo: rgba(201, 226, 247, 0.45);
  --second: #7FA8CC;
  --lueur: rgba(201, 226, 247, 0.11);
  --nuit: #080B0F;
  --nuit-2: #0E141B;
  --nuit-3: #141D26;
  --ligne: rgba(201, 226, 247, 0.18);
}

/* Nains de la Moria. Ici j'extrapole : le texte ne donne pas
   de palette pour les Nains. On a l'ithildin des Portes,
   la couronne de Durin, et l'or dont la Moria etait riche.
   Pierre et or, avec la braise des forges. */
body[data-peuple='khuzdul'] {
  --accent: #D9A441;
  --accent-halo: rgba(217, 164, 65, 0.40);
  --second: #8C6236;
  --lueur: rgba(217, 164, 65, 0.10);
  --nuit: #0D0D0C;
  --nuit-2: #16160F;
  --nuit-3: #1F1E15;
  --ligne: rgba(217, 164, 65, 0.20);
}

/* Numenor et Gondor. La banniere brodee par Arwen : l'Arbre
   Blanc, sept etoiles et une couronne d'argent, sur champ de
   sable. Blanc et argent sur noir, la seule heraldique que
   Tolkien decrive aussi precisement. */
body[data-peuple='numenor'] {
  --accent: #E6EDF2;
  --accent-halo: rgba(230, 237, 242, 0.38);
  --second: #9FB4C4;
  --lueur: rgba(230, 237, 242, 0.08);
  --nuit: #08090B;
  --nuit-2: #0F1114;
  --nuit-3: #171A1E;
  --ligne: rgba(230, 237, 242, 0.16);
}

/* Mordor. Tolkien emploie le rouge et le noir pour les
   gobelins et les Orques des Le Hobbit, et conserve cette
   association ensuite. L'Oeil Rouge sur le noir. */
body[data-peuple='mordor'] {
  --accent: #D6452B;
  --accent-halo: rgba(214, 69, 43, 0.42);
  --second: #7A1E10;
  --lueur: rgba(214, 69, 43, 0.12);
  --nuit: #0C0706;
  --nuit-2: #150A08;
  --nuit-3: #1E0E0B;
  --ligne: rgba(214, 69, 43, 0.20);
}

body {
  transition: background-color var(--transition-theme);
}

/* --- Base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--parchemin);
  font-family: var(--f-body);
  font-size: 1.15rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition-theme);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, var(--accent-halo), transparent 65%),
    radial-gradient(ellipse 45% 35% at 85% 105%, var(--lueur), transparent 70%),
    radial-gradient(ellipse 40% 30% at 8% 88%, var(--lueur), transparent 72%);
  opacity: 0.55;
  transition: background var(--transition-theme);
  z-index: 0;
}
main, header, footer { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--ligne); transition: border-color 300ms; }
a:hover { border-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* --- Typographie --- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: 0.04em; margin: 0; }
.eyebrow {
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--transition-theme);
}
.titre-hero {
  font-size: clamp(2.1rem, 5.2vw, 4.1rem);
  line-height: 1.14;
  margin: 20px 0 26px;
}
.titre-section {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin: 14px 0 18px;
}
.sous-texte { color: var(--brume); max-width: 62ch; font-size: 1.2rem; }
.italique { font-style: italic; }

/* --- En-tete --- */
.entete {
  padding: 20px 0;
  /* fixe : voir la regle plus bas. La bordure n'apparait qu'au scroll. */
}
.entete .conteneur { display: flex; align-items: baseline; justify-content: space-between; }
.marque {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--parchemin);
  border: none;
}
.marque em {
  font-family: var(--f-tengwar);
  font-style: normal;
  color: var(--accent);
  margin-right: 14px;
  font-size: 1.3rem;
  transition: color var(--transition-theme);
}
.entete-note { font-size: 0.95rem; color: var(--brume-faible); font-style: italic; }

/* --- Hero --- */
.hero { padding: clamp(70px, 11vh, 130px) 0 clamp(50px, 8vh, 90px); }
.hero-tengwar {
  font-family: var(--f-tengwar);
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 8px;
  text-shadow: 0 0 26px var(--accent-halo);
  transition: color var(--transition-theme), text-shadow var(--transition-theme);
  min-height: 1.2em;
}
.hero-legende {
  font-size: 0.95rem;
  color: var(--brume-faible);
  font-style: italic;
  margin-top: 10px;
}

/* --- Cartes des peuples --- */
.peuples { padding: clamp(30px, 6vh, 70px) 0; }
.grille-peuples { margin-top: 34px; }
.carte-peuple {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
  background: linear-gradient(160deg, var(--nuit-2), var(--nuit));
  border: 1px solid var(--ligne);
  border-radius: 6px;
  padding: 30px 26px 26px;
  margin-bottom: 24px;
  color: var(--parchemin);
  font-family: var(--f-body);
  cursor: pointer;
  min-height: 200px;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.3, 1), border-color 350ms, box-shadow 350ms;
}
.carte-peuple:hover, .carte-peuple:focus-visible {
  transform: translateY(-5px);
  border-color: var(--carte-accent, var(--or));
  box-shadow: 0 18px 44px -18px var(--carte-halo, rgba(198, 161, 91, 0.35));
}
.carte-peuple.active {
  border-color: var(--carte-accent, var(--or));
  box-shadow: inset 0 0 0 1px var(--carte-accent, var(--or)), 0 18px 44px -18px var(--carte-halo, rgba(198, 161, 91, 0.35));
}
.carte-peuple[data-peuple='quenya']    { --carte-accent: #E9C87D; --carte-halo: rgba(233, 200, 125, 0.4); }
.carte-peuple[data-peuple='sindarin']  { --carte-accent: #A9C4B0; --carte-halo: rgba(169, 196, 176, 0.4); }
.carte-peuple[data-peuple='beleriand'] { --carte-accent: #C9E2F7; --carte-halo: rgba(201, 226, 247, 0.45); }
.carte-peuple[data-peuple='khuzdul']   { --carte-accent: #D9A441; --carte-halo: rgba(217, 164, 65, 0.4); }
.carte-peuple[data-peuple='numenor']   { --carte-accent: #E6EDF2; --carte-halo: rgba(230, 237, 242, 0.38); }
.carte-peuple[data-peuple='mordor']    { --carte-accent: #D6452B; --carte-halo: rgba(214, 69, 43, 0.42); }

.carte-glyphe {
  position: absolute;
  right: -8px;
  bottom: -30px;
  font-family: var(--f-tengwar);
  font-size: 8.5rem;
  line-height: 1;
  color: var(--carte-accent, var(--or));
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 350ms, transform 450ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.carte-glyphe svg { width: 96px; height: 144px; fill: currentColor; }
.carte-peuple:hover .carte-glyphe { opacity: 0.22; transform: translateY(-6px); }
.carte-nom {
  display: block;
  font-family: var(--f-display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: var(--carte-accent, var(--or));
  margin-bottom: 10px;
}
.carte-mode {
  display: block;
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchemin);
  opacity: 0.72;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ligne);
  line-height: 1.5;
}
.carte-source {
  display: block;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--brume);
  font-style: italic;
}

/* --- Atelier --- */
.atelier {
  padding: clamp(40px, 8vh, 90px) 0;
  opacity: 0.45;
  transition: opacity 600ms;
}
.atelier.visible { opacity: 1; }
.panneau {
  background: linear-gradient(170deg, var(--nuit-2), var(--nuit));
  border: 1px solid var(--ligne);
  border-radius: 8px;
  padding: clamp(28px, 4.5vw, 56px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.badge-peuple {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 22px;
  transition: color var(--transition-theme), border-color var(--transition-theme);
}
.champ-ligne { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.champ {
  flex: 1 1 320px;
  background: var(--nuit);
  border: 1px solid var(--ligne);
  border-radius: 4px;
  color: var(--parchemin);
  font-family: var(--f-body);
  font-size: 1.3rem;
  padding: 16px 20px;
  transition: border-color 300ms, box-shadow 300ms;
}
.champ::placeholder { color: var(--brume-faible); font-style: italic; }
.champ:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-halo); }
label[for='texte-input'] {
  display: block;
  font-family: var(--f-display);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brume);
  margin-bottom: 10px;
}
.bouton {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--nuit);
  border: none;
  border-radius: 4px;
  padding: 16px 30px;
  cursor: pointer;
  transition: background var(--transition-theme), transform 250ms, box-shadow 250ms;
}
.bouton:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--accent-halo); }
.bouton-secondaire {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--ligne);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bouton-secondaire:hover { border-color: var(--accent); box-shadow: none; }

.exemples { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1rem;
  background: transparent;
  color: var(--brume);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color 250ms, border-color 250ms;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

/* --- Le resultat : revelation ithildin --- */
.resultat-wrap {
  margin-top: 44px;
  padding: 38px 10px 26px;
  border-top: 1px solid var(--ligne);
  display: none;
  text-align: center;
}
.resultat-wrap.has-result { display: block; }
.resultat {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.1em;
  color: var(--accent);
  transition: color var(--transition-theme);
}
.resultat-tengwar {
  font-family: var(--f-tengwar);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 1.5;
}
.resultat-cirth { gap: 6px; }
.certh { width: clamp(30px, 5vw, 46px); height: auto; }
.certh-space { width: clamp(16px, 3vw, 28px); }

.glyph-reveal { opacity: 0; }
.inking .glyph-reveal {
  animation: ithildin 1.1s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes ithildin {
  0%   { opacity: 0; filter: blur(7px); text-shadow: 0 0 0 transparent; }
  55%  { opacity: 1; filter: blur(0); text-shadow: 0 0 34px var(--accent-halo), 0 0 8px var(--accent-halo); }
  100% { opacity: 1; filter: blur(0); text-shadow: 0 0 20px var(--accent-halo); }
}
svg.glyph-reveal { filter: drop-shadow(0 0 8px var(--accent-halo)); }

.translitteration {
  margin-top: 20px;
  font-style: italic;
  color: var(--brume);
  font-size: 1.1rem;
}
.mode-note {
  margin-top: 8px;
  font-size: 0.98rem;
  color: var(--brume-faible);
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
.resultat-actions { margin-top: 26px; display: none; gap: 14px; justify-content: center; flex-wrap: wrap; }
.resultat-actions.visible { display: flex; }

/* --- Section honnetete --- */
.honnete { padding: clamp(50px, 9vh, 110px) 0; border-top: 1px solid var(--ligne); }
.honnete h3 {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 12px;
  transition: color var(--transition-theme);
}
.honnete p { color: var(--brume); font-size: 1.08rem; margin: 0 0 14px; }

/* --- Pied de page --- */
.pied {
  border-top: 1px solid var(--ligne);
  padding: 44px 0 54px;
  font-size: 0.95rem;
  color: var(--brume-faible);
}
.pied p { margin: 0 0 8px; max-width: 90ch; }

/* --- Apparitions au defilement --- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.reveal.in-view { opacity: 1; transform: none; }

/* --- Mouvement reduit --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .glyph-reveal, .inking .glyph-reveal { opacity: 1; animation: none; }
  .carte-peuple, .bouton { transition: none; }
}

/* --- Ecrans etroits --- */
@media (max-width: 575px) {
  body { font-size: 1.05rem; }
  .carte-peuple { min-height: 0; }
  .panneau { padding: 24px 18px; }
}

/* =====================================================
   LE PORTAIL · Les Portes de Durin
   ===================================================== */
body.portail-actif { overflow: hidden; }

.portail {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, #0E1A16, #040706 78%);
  padding: 20px;
}
.portail.ouvert { display: flex; animation: portail-in 900ms ease; }
@keyframes portail-in { from { opacity: 0; } to { opacity: 1; } }

.portail-fermer {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 3;
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  color: var(--brume);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 250ms, border-color 250ms;
}
.portail-fermer:hover { color: #B9CFE3; border-color: #B9CFE3; }

.portail-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
}
.portes-hote { color: #C9E2F7; }
.portes-svg {
  height: min(78vh, 760px);
  width: auto;
  max-width: 100%;
  overflow: visible;
}

/* Les traits d'ithildin se tracent sous la lune */
.ithildin-traits .trait {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  opacity: 0;
}
.portail.trace .ithildin-traits .trait {
  animation: tracer 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--ordre) * 65ms);
}
@keyframes tracer {
  0%   { stroke-dashoffset: 1400; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

.inscription-arc, .inscription-linteau {
  font-family: var(--f-tengwar);
  opacity: 0;
}
.inscription-arc { font-size: 30px; }
.inscription-linteau { font-size: 26px; }
.portail.trace .inscription-arc,
.portail.trace .inscription-linteau {
  animation: inscription-in 1.6s ease forwards;
  animation-delay: 1.9s;
}
@keyframes inscription-in { from { opacity: 0; } to { opacity: 0.95; } }

/* Le seuil : la lumiere derriere la pierre */
.seuil { opacity: 0; transition: opacity 1.4s ease 300ms; }
.portail.ouvre .seuil { opacity: 1; }

/* Les battants s'ecartent */
.portail.ouvre .ithildin-traits {
  animation: battants 2.2s cubic-bezier(0.3, 0, 0.2, 1) forwards;
  transform-origin: 300px 450px;
}
@keyframes battants {
  0%   { opacity: 1; transform: scale(1); filter: brightness(1); }
  35%  { opacity: 1; filter: brightness(1.9); }
  100% { opacity: 0; transform: scale(2.6); filter: brightness(3); }
}
.portail.ouvre .portes-svg { animation: seuil-franchi 2.2s ease forwards; }
@keyframes seuil-franchi {
  0%   { transform: scale(1); }
  100% { transform: scale(1.35); }
}

.portail-mot {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #DCEBFA;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 0 26px rgba(185, 207, 227, 0.6);
  transition: opacity 1.2s ease;
}
.portail-mot.visible { opacity: 1; }

/* L'indice, quand le mot est bon mais l'ecriture mauvaise */
.indice-portes {
  margin-top: 16px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1.02rem;
  color: #B9CFE3;
  opacity: 0;
  transition: opacity 900ms ease;
  text-shadow: 0 0 20px rgba(185, 207, 227, 0.35);
  min-height: 1.4em;
}
.indice-portes.visible { opacity: 1; }

/* Le refus du Mordor. Il doit se voir : c'est le site qui te dit non. */
.indice-portes.indice-noir {
  margin-top: 22px;
  padding: 16px 20px;
  font-family: var(--f-display);
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #FF7A55;
  background: linear-gradient(120deg, rgba(122, 30, 16, 0.28), rgba(20, 8, 6, 0.55));
  border: 1px solid rgba(214, 69, 43, 0.4);
  border-left: 3px solid #D6452B;
  border-radius: 4px;
  text-shadow: 0 0 22px rgba(214, 69, 43, 0.5);
  animation: refus-souffle 700ms ease;
}
@keyframes refus-souffle {
  0%   { transform: translateX(-8px); }
  30%  { transform: translateX(7px); }
  55%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* --- Bouton d'ambiance sonore --- */
.btn-son {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--brume-faible);
  font-family: var(--f-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 300ms, border-color 300ms;
}
.btn-son:hover { color: var(--accent); border-color: var(--accent); }
.btn-son.actif { color: var(--accent); border-color: var(--accent); }
.son-onde {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.btn-son.actif .son-onde { opacity: 1; animation: onde 2s ease-in-out infinite; }
@keyframes onde {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-halo); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .portail.trace .ithildin-traits .trait,
  .portail.ouvre .ithildin-traits,
  .portail.ouvre .portes-svg,
  .btn-son.actif .son-onde { animation: none; }
  .ithildin-traits .trait { stroke-dashoffset: 0; opacity: 1; }
  .inscription-arc, .inscription-linteau { opacity: 0.95; }
}

/* --- Entete : bloc de droite --- */
.entete-droite { display: flex; align-items: center; gap: 20px; }
@media (max-width: 767px) {
  .entete .conteneur { flex-direction: column; gap: 14px; align-items: flex-start; }
  .entete-droite { flex-direction: row-reverse; gap: 14px; }
  .entete-note { display: none; }
}

/* =====================================================
   LOGO LA LIBRE
   ===================================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.entete-gauche { display: flex; align-items: center; gap: 18px; }

.logo-llb {
  display: flex;
  align-items: center;
  border-bottom: none;
  color: var(--parchemin);
  opacity: 0.9;
  transition: color var(--transition-theme), opacity 300ms;
}
.logo-llb:hover { opacity: 1; color: var(--accent); border-bottom: none; }
.logo-llb-svg {
  display: block;
  height: 22px;
  width: 74px;      /* ratio 594/177 du viewBox recadre */
  fill: currentColor;
}
.entete-barre {
  width: 1px;
  height: 24px;
  background: var(--ligne);
  flex: 0 0 auto;
  transition: background var(--transition-theme);
}
.logo-llb-pied {
  margin-bottom: 22px;
  color: var(--brume);
}
.logo-llb-pied .logo-llb-svg { height: 26px; width: 88px; }

/* =====================================================
   ENCART SUR L'ORIGINE DES COULEURS
   ===================================================== */
.encart-couleurs {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 26px;
  transition: border-color var(--transition-theme);
}
.encart-couleurs h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 12px;
}
.encart-couleurs p { color: var(--brume); font-size: 1.04rem; margin: 0 0 16px; }
.liste-sources { list-style: none; padding: 0; margin: 0 0 18px; }
.liste-sources li {
  color: var(--brume);
  font-size: 1.02rem;
  line-height: 1.55;
  padding: 9px 0;
  border-bottom: 1px solid var(--ligne);
}
.liste-sources li:last-child { border-bottom: none; }
.liste-sources strong {
  color: var(--parchemin);
  font-weight: 600;
  font-family: var(--f-display);
  font-size: 0.94rem;
  letter-spacing: 0.04em;
}
.liste-sources em { color: var(--accent); font-style: italic; }
.note-fine {
  font-size: 0.95rem !important;
  color: var(--brume-faible) !important;
  font-style: italic;
  margin: 0 !important;
}

/* =====================================================
   TOLKIEN DANS LA LIBRE
   ===================================================== */
.bloc-articles {
  padding: clamp(50px, 9vh, 110px) 0;
  border-top: 1px solid var(--ligne);
  transition: border-color var(--transition-theme);
}
.articles-grille { margin-top: 34px; }

.carte-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 22px;
  background: linear-gradient(165deg, var(--nuit-2), var(--nuit));
  border: 1px solid var(--ligne);
  border-radius: 6px;
  border-bottom: 1px solid var(--ligne);
  margin-bottom: 22px;
  transition: border-color 400ms, transform 400ms, background var(--transition-theme);
}
.carte-article:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}
.carte-article:hover .article-titre { color: var(--accent); }

.article-rubrique {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  transition: color var(--transition-theme);
}
.article-abo {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border: 1px solid var(--ligne);
  border-radius: 3px;
  color: var(--brume-faible);
}
.article-titre {
  font-family: var(--f-display);
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--parchemin);
  margin: 0 0 12px;
  transition: color 400ms;
}
.article-chapo {
  color: var(--brume);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 20px;
  flex: 1;
}
.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--ligne);
  font-size: 0.86rem;
}
.article-signature { color: var(--brume); font-style: italic; }
.article-date { color: var(--brume-faible); font-size: 0.8rem; }

.bouton-articles {
  display: inline-block;
  margin-top: 12px;
  border-bottom: none;
}
.bouton-articles:hover { border-bottom: none; }

@media (max-width: 767px) {
  .entete-gauche { gap: 12px; }
  .logo-llb-svg { height: 18px; width: 60px; }
  .entete-barre { height: 20px; }
}

/* =====================================================
   ETAT NEUTRE
   Avant toute selection : ni or ni rouge, la pierre nue.
   L'inscription de l'Anneau tourne lentement dans le hero.
   ===================================================== */
body:not([data-peuple]) {
  --accent: #9AA3A0;
  --accent-halo: rgba(154, 163, 160, 0.22);
  --second: #6E7674;
  --lueur: rgba(154, 163, 160, 0.06);
  --nuit: #0A0C0C;
  --nuit-2: #111514;
  --nuit-3: #191E1D;
  --ligne: rgba(237, 228, 206, 0.14);
}

/* --- L'inscription de l'Anneau, fond du hero --- */
.hero { position: relative; overflow: hidden; }

/* La home garde un padding-bas normal. L'indicateur de descente est
   fixe au viewport (voir .descente), il ne depend donc pas de la
   hauteur du hero. */

.fond-anneau {
  /* position reglable via --anneau-x, tout en haut de ce fichier */
  position: absolute;
  top: 50%;
  left: var(--anneau-x, 66%);
  transform: translate(-50%, -50%);
  width: min(460px, 46vw);
  pointer-events: none;
  z-index: 0;
  color: #C6853B;
  opacity: 0;
  transition: opacity 1600ms ease, color var(--transition-theme);
}
body:not([data-peuple]) .fond-anneau { opacity: 0.42; }
body.peuple-choisi .fond-anneau { opacity: 0.06; color: var(--accent); }

.anneau-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  animation: anneau-tourne 150s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes anneau-tourne { to { transform: rotate(360deg); } }

.anneau-jonc {
  opacity: 0.6;
  filter: drop-shadow(0 0 6px currentColor);
}
.anneau-texte {
  font-family: var(--f-tengwar);
  filter: drop-shadow(0 0 10px currentColor);
  opacity: 0.92;
}

.hero .conteneur { position: relative; z-index: 1; }

/* --- La carte du Troisieme Age, en filigrane --- */
.atelier { position: relative; overflow: hidden; }
.fond-carte {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  color: var(--parchemin);
  opacity: 0.045;
  transition: color var(--transition-theme);
}
.carte-svg {
  width: min(1100px, 96%);
  height: auto;
  overflow: visible;
}
.carte-label {
  font-family: var(--f-body);
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.04em;
}
.atelier .conteneur { position: relative; z-index: 1; }

/* --- Les motifs d'angle, par peuple --- */
.motif {
  position: fixed;
  bottom: 0;
  width: clamp(70px, 8vw, 130px);
  height: min(52vh, 460px);
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0;
  transition: opacity 1400ms ease, color var(--transition-theme);
}
.motif.visible { opacity: 0.20; }
.motif-gauche { left: 0; }
.motif-droite { right: 0; transform: scaleX(-1); }
.motif-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px var(--accent-halo));
}
@media (max-width: 991px) { .motif { display: none; } }

/* =====================================================
   LA GRILLE DES BLASONS, SUR LA HOME
   ===================================================== */
.bloc-blasons {
  padding: clamp(50px, 9vh, 110px) 0;
  border-top: 1px solid var(--ligne);
  transition: border-color var(--transition-theme);
}
.blasons-grille { margin-top: 40px; }

.carte-blason {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 12px 20px;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 6px;
  margin-bottom: 20px;
  transition: border-color 400ms, background 400ms, transform 400ms;
}
.carte-blason:hover {
  border-color: var(--carte-accent, var(--accent));
  background: var(--nuit-2);
  transform: translateY(-4px);
}
.carte-blason[data-peuple='quenya']    { --carte-accent: #E9C87D; --carte-halo: rgba(233, 200, 125, 0.4); }
.carte-blason[data-peuple='sindarin']  { --carte-accent: #A9C4B0; --carte-halo: rgba(169, 196, 176, 0.4); }
.carte-blason[data-peuple='beleriand'] { --carte-accent: #C9E2F7; --carte-halo: rgba(201, 226, 247, 0.45); }
.carte-blason[data-peuple='khuzdul']   { --carte-accent: #D9A441; --carte-halo: rgba(217, 164, 65, 0.4); }
.carte-blason[data-peuple='numenor']   { --carte-accent: #E6EDF2; --carte-halo: rgba(230, 237, 242, 0.38); }
.carte-blason[data-peuple='mordor']    { --carte-accent: #D6452B; --carte-halo: rgba(214, 69, 43, 0.42); }

.cb-cadre {
  display: block;
  width: 100%;
  max-width: 108px;
  margin-bottom: 16px;
  color: var(--carte-accent);
}
.cb-cadre .blason-svg {
  width: 100%;
  height: auto;
  color: inherit;
  opacity: 0.72;
  filter: drop-shadow(0 0 10px var(--carte-halo));
  transition: opacity 400ms, filter 400ms;
  overflow: visible;
}
.carte-blason:hover .cb-cadre .blason-svg {
  opacity: 1;
  filter: drop-shadow(0 0 20px var(--carte-halo));
}
/* pas de trace anime dans la grille : les blasons sont deja dessines */
.cb-cadre .blason-trait { stroke-dasharray: none; stroke-dashoffset: 0; }

.cb-nom {
  display: block;
  font-family: var(--f-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--parchemin);
  margin-bottom: 5px;
  line-height: 1.3;
}
.cb-emb {
  display: block;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--brume-faible);
  line-height: 1.35;
}

.blasons-note {
  margin-top: 22px;
  font-size: 0.98rem;
  color: var(--brume-faible);
  line-height: 1.6;
}
.blasons-note .ex-attest,
.blasons-note .ex-extra {
  font-family: var(--f-display);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--ligne);
  white-space: nowrap;
}
.blasons-note .ex-attest { color: var(--accent); border-color: var(--accent); }
.blasons-note .ex-extra { color: var(--brume-faible); border-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .anneau-svg { animation: none; }
}

/* --- Signature et anniversaire --- */
.pied-anniv {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ligne);
  font-size: 0.95rem;
  color: var(--brume-faible);
}
.pied-signature {
  margin-top: 10px;
  font-family: var(--f-display);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--brume);
}
.pied-signature a { border-bottom-color: var(--ligne); }
.pied-signature a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* =====================================================
   LIRE TOLKIEN
   ===================================================== */
.bloc-lectures {
  padding: clamp(50px, 9vh, 110px) 0;
  border-top: 1px solid var(--ligne);
  transition: border-color var(--transition-theme);
}
.livres-grille { margin-top: 36px; }

.carte-livre {
  display: flex;
  height: 100%;
  border: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
  background: linear-gradient(165deg, var(--nuit-2), var(--nuit));
  transition: border-color 400ms, transform 400ms;
}
.carte-livre:hover { border-color: var(--accent); transform: translateY(-4px); }
.carte-livre:hover .livre-titre { color: var(--accent); }

/* la tranche du livre, en rappel typographique */
.livre-tranche {
  flex: 0 0 10px;
  background: linear-gradient(180deg, var(--accent), var(--second));
  opacity: 0.55;
  transition: opacity 400ms, background var(--transition-theme);
}
.carte-livre:hover .livre-tranche { opacity: 1; }

.livre-corps { display: block; padding: 26px 24px 24px; }
.livre-rubrique {
  display: block;
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  transition: color var(--transition-theme);
}
.livre-titre {
  display: block;
  font-family: var(--f-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--parchemin);
  margin-bottom: 12px;
  transition: color 400ms;
}
.livre-note {
  display: block;
  color: var(--brume);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* --- L'encart Tolkien Estate --- */
.encart-estate {
  margin-top: 46px;
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 26px;
  transition: border-color var(--transition-theme);
}
.encart-estate h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 12px;
}
.encart-estate p { color: var(--brume); font-size: 1.04rem; margin: 0 0 12px; line-height: 1.6; }
.lien-estate {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--f-display);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 3px;
}
.lien-estate:hover { border-bottom-color: var(--accent); }

@media (max-width: 767px) {
  .encart-estate { padding-left: 16px; }
}

/* =====================================================
   LA QUETE
   Le message d'Elrond, et l'Anneau qu'on porte.
   ===================================================== */

/* --- La missive --- */
.missive {
  /* La missive vient d'Elrond : elle porte SES couleurs, quel que soit
     le peuple selectionne. Sans ca, on recevait une invitation rouge sang
     quand on etait en mode Mordor, ce qui n'avait aucun sens. */
  --accent: #E0A951;
  --accent-halo: rgba(224, 169, 81, 0.36);
  --ligne: rgba(224, 169, 81, 0.22);
  --parchemin: #F2E6CE;
  --brume: rgba(242, 230, 206, 0.62);
  --brume-faible: rgba(242, 230, 206, 0.36);
  --nuit: #120C06;
  --nuit-2: #1C130A;

  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 70;
  width: min(430px, calc(100vw - 40px));
  display: flex;
  gap: 20px;
  padding: 26px 26px 24px;
  background: linear-gradient(155deg, #1C130A, #120C06);
  border: 1px solid rgba(224, 169, 81, 0.35);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 60px rgba(224, 169, 81, 0.08);
  transform: translateY(30px) scale(0.97);
  opacity: 0;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 800ms ease;
}
.missive.visible { transform: none; opacity: 1; }

.missive-fermer {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(242, 230, 206, 0.35);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 300ms;
}
.missive-fermer:hover { color: #E0A951; }

.missive-sceau { flex: 0 0 46px; color: #E0A951; }
.missive-sceau svg {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 0 14px rgba(224, 169, 81, 0.5));
  animation: sceau-luit 4s ease-in-out infinite;
}
@keyframes sceau-luit {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

.missive-corps { flex: 1; min-width: 0; }
.missive-eyebrow {
  font-family: var(--f-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(242, 230, 206, 0.4);
  margin: 0 0 10px;
}
.missive-tengwar {
  font-family: var(--f-tengwar);
  font-size: 2rem;
  color: #E0A951;
  margin: 0 0 12px;
  line-height: 1.5;
  text-shadow: 0 0 22px rgba(224, 169, 81, 0.4);
}
.missive-texte {
  font-family: var(--f-body);
  font-size: 1.04rem;
  line-height: 1.55;
  color: rgba(242, 230, 206, 0.7);
  margin: 0 0 20px;
}
.missive-texte strong { color: #E0A951; font-weight: 600; }

.missive-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.missive-plus-tard {
  background: transparent;
  border: none;
  color: rgba(242, 230, 206, 0.4);
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-style: italic;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 300ms;
}
.missive-plus-tard:hover { color: rgba(242, 230, 206, 0.7); }

.missive-signature {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(224, 169, 81, 0.18);
  font-family: var(--f-body);
  font-size: 0.9rem;
  font-style: italic;
  text-align: right;
  color: rgba(242, 230, 206, 0.45);
}

@media (max-width: 575px) {
  .missive { bottom: 14px; right: 14px; left: 14px; width: auto; flex-direction: column; gap: 14px; }
  .missive-sceau { flex: none; }
}

/* --- L'Anneau porté, dans l'entête --- */
.anneau-porte {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 6px 15px 6px 9px;
  color: var(--brume);
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ligne);
  transition: color 400ms, border-color 400ms;
}
.anneau-porte:hover { color: #E0A951; border-color: #E0A951; }
.anneau-cercle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #E0A951;
  box-shadow: 0 0 10px rgba(224, 169, 81, 0.5);
  flex: 0 0 auto;
  animation: anneau-souffle 4s ease-in-out infinite;
}
/* plus on avance, plus il pese */
.anneau-porte[data-poids='2'] .anneau-cercle { animation-duration: 3s; }
.anneau-porte[data-poids='3'] .anneau-cercle {
  animation-duration: 2s;
  box-shadow: 0 0 16px rgba(214, 69, 43, 0.6);
  border-color: #D6452B;
}
.anneau-porte[data-poids='4'] .anneau-cercle {
  animation-duration: 1.2s;
  box-shadow: 0 0 22px rgba(214, 69, 43, 0.85);
  border-color: #D6452B;
}
@keyframes anneau-souffle {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* --- Le rappel discret --- */
.rappel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E0A951;
  border-bottom: none;
  padding: 6px 0;
}
.rappel:hover { border-bottom: none; opacity: 0.75; }
.rappel-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E0A951;
  animation: rappel-bat 2s ease-in-out infinite;
}
@keyframes rappel-bat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 169, 81, 0.5); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .missive, .missive-sceau svg, .anneau-cercle, .rappel-point { animation: none; transition: none; }
  .missive { transform: none; opacity: 1; }
}

/* =====================================================
   LES ANNEAUX DE POUVOIR
   ===================================================== */
.bloc-anneaux {
  padding: clamp(50px, 9vh, 110px) 0;
  border-top: 1px solid var(--ligne);
  transition: border-color var(--transition-theme);
}
.anneaux-grille { margin-top: 46px; }
.anneaux-grille > [class*='col-'] { padding-bottom: 10px; }

.carte-anneau {
  display: flex;
  gap: 26px;
  height: calc(100% - 26px);
  padding: 34px 32px 30px;
  background: linear-gradient(160deg, var(--nuit-2), var(--nuit));
  border: 1px solid var(--ligne);
  border-radius: 6px;
  margin-bottom: 26px;
  transition: border-color 450ms, background var(--transition-theme);
}
.carte-anneau:hover { border-color: var(--ca-accent, var(--accent)); }

/* chaque lot a sa lumiere */
.carte-anneau[data-lot='elfes']  { --ca-accent: #C9E2F7; --ca-halo: rgba(201, 226, 247, 0.4); }
.carte-anneau[data-lot='nains']  { --ca-accent: #D9A441; --ca-halo: rgba(217, 164, 65, 0.4); }
.carte-anneau[data-lot='hommes'] { --ca-accent: #A9A6B4; --ca-halo: rgba(169, 166, 180, 0.36); }
.carte-anneau[data-lot='unique'] { --ca-accent: #D6452B; --ca-halo: rgba(214, 69, 43, 0.45); }

.ca-cadre { flex: 0 0 92px; color: var(--ca-accent); }
.anneau-svg-lot {
  width: 92px;
  height: auto;
  color: inherit;
  filter: drop-shadow(0 0 14px var(--ca-halo));
  overflow: visible;
  opacity: 0.85;
  transition: opacity 400ms, filter 400ms;
}
.carte-anneau:hover .anneau-svg-lot {
  opacity: 1;
  filter: drop-shadow(0 0 24px var(--ca-halo));
}
/* l'Unique tourne, lentement, comme en fond de page */
.carte-anneau[data-lot='unique'] .anneau-svg-lot {
  animation: unique-tourne 40s linear infinite;
}
@keyframes unique-tourne { to { transform: rotate(360deg); } }

.ca-corps { flex: 1; min-width: 0; }
.ca-compte {
  font-family: var(--f-display);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ca-accent);
  margin: 0 0 10px;
}
.ca-titre {
  font-family: var(--f-display);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--parchemin);
  margin: 0 0 14px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ca-statut {
  font-family: var(--f-display);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--ca-accent);
  color: var(--ca-accent);
  white-space: nowrap;
}
.ca-vers {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ca-accent);
  opacity: 0.8;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ligne);
  line-height: 1.5;
}
.ca-texte, .ca-sort {
  color: var(--brume);
  font-size: 1.02rem;
  line-height: 1.62;
  margin: 0 0 18px;
}
.ca-sous {
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ca-accent);
  margin: 22px 0 8px;
}
.ca-sort { color: var(--parchemin); opacity: 0.76; }
.ca-source {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
  font-size: 0.94rem;
  font-style: italic;
  color: var(--brume-faible);
  line-height: 1.55;
}

@media (max-width: 575px) {
  .carte-anneau { flex-direction: column; gap: 20px; padding: 26px 22px 24px; }
  .ca-cadre { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-anneau[data-lot='unique'] .anneau-svg-lot { animation: none; }
}

/* =====================================================
   TON IMAGE DE FOND DANS LE HERO
   Se regle tout en haut de ce fichier : --hero-image.
   Le fondu est double (haut et bas) pour que le texte
   reste lisible quoi que tu poses derriere.
   ===================================================== */
.hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  opacity: var(--hero-image-opacite, 0.26);
  /* le fondu : l'image se dissout vers le haut et vers le bas */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
  transition: opacity 1200ms ease;
}
/* on l'attenue encore une fois un peuple choisi, pour ne pas gener la lecture */
body.peuple-choisi .hero-image { opacity: calc(var(--hero-image-opacite, 0.26) * 0.45); }

/* un voile, pour que le texte tienne meme sur une image claire */
.hero-voile {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(100deg, var(--nuit) 8%, rgba(11, 19, 16, 0.72) 42%, transparent 78%);
  transition: background var(--transition-theme);
}

/* =====================================================
   L'ENTETE FIXE
   ===================================================== */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 500ms ease, border-color 500ms ease, backdrop-filter 500ms ease;
}
/* au scroll, elle se pose sur un fond */
.entete.posee {
  background: rgba(11, 19, 16, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--ligne);
}
/* chaque page a son fond propre */
body.fendeval .entete.posee { background: rgba(18, 12, 6, 0.85); }
body.gondor   .entete.posee { background: rgba(8, 9, 11, 0.85); }
body.mordor   .entete.posee { background: rgba(10, 5, 3, 0.85); }

/* le contenu descend sous l'entete */
body { padding-top: var(--h-entete, 74px); }
/* sauf quand un garde couvre l'ecran */
body.verrouille { padding-top: 0; }
body.verrouille .entete { display: none; }

@media (max-width: 767px) {
  body { padding-top: 64px; }
}

/* =====================================================
   LES RACCOURCIS
   Si tu gardes l'Anneau, tu as acces a tout. Autant
   te le dire, plutot que de te faire retaper les mots.
   ===================================================== */
.raccourcis {
  padding: 0 0 clamp(30px, 5vh, 60px);
}
.raccourcis-titre {
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  transition: color var(--transition-theme);
}
.raccourcis-note {
  color: var(--brume-faible);
  font-size: 0.98rem;
  font-style: italic;
  margin: 0 0 22px;
}
.raccourcis-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.raccourci {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px;
  border: 1px solid var(--ligne);
  border-radius: 4px;
  background: linear-gradient(150deg, var(--nuit-2), var(--nuit));
  font-family: var(--f-display);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brume);
  border-bottom: 1px solid var(--ligne);
  transition: color 380ms, border-color 380ms, transform 380ms;
}
.raccourci:hover {
  color: var(--rc-teinte, var(--accent));
  border-color: var(--rc-teinte, var(--accent));
  transform: translateY(-3px);
}
.raccourci-point {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rc-teinte, var(--accent));
  box-shadow: 0 0 10px var(--rc-teinte, var(--accent));
  flex: 0 0 auto;
}
/* chaque lieu garde sa couleur */
.raccourci[data-lieu='fendeval'] { --rc-teinte: #E0A951; }
.raccourci[data-lieu='moria']    { --rc-teinte: #7FA6C9; }
.raccourci[data-lieu='gondor']   { --rc-teinte: #E6EDF2; }
.raccourci[data-lieu='mordor']   { --rc-teinte: #D6452B; }

@media (prefers-reduced-motion: reduce) {
  .indice-portes.indice-noir, .hero-image, .entete { animation: none; transition: none; }
}

/* =====================================================
   LE SOUFFLE  ·  notifications flottantes

   Posees sur le body, elles ne dependent d'aucun conteneur.
   L'ancien #indice-portes vivait dans #resultat-wrap, en
   display:none tant qu'aucune transcription n'etait
   affichee : les messages y etaient ecrits sans jamais
   pouvoir s'y voir.
   ===================================================== */
.souffles {
  position: fixed;
  top: calc(var(--h-entete, 80px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}

.souffle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 18px 20px;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.souffle.visible { opacity: 1; transform: none; }

.souffle-sigle { flex: 0 0 24px; margin-top: 2px; }
.souffle-sigle svg { width: 24px; height: 24px; display: block; }

.souffle-texte {
  flex: 1;
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.04rem;
  line-height: 1.55;
}

.souffle-fermer {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.45;
  color: inherit;
  transition: opacity 300ms;
}
.souffle-fermer:hover { opacity: 1; }

/* --- Le ton elfique : un indice, une aide --- */
.souffle-elfe {
  background: linear-gradient(140deg, rgba(24, 38, 48, 0.96), rgba(11, 19, 16, 0.96));
  border: 1px solid rgba(185, 207, 227, 0.34);
  border-left: 3px solid #B9CFE3;
  color: #B9CFE3;
}
.souffle-elfe .souffle-sigle svg {
  filter: drop-shadow(0 0 10px rgba(185, 207, 227, 0.6));
}
.souffle-elfe .souffle-texte { color: rgba(232, 240, 247, 0.9); }

/* --- Le ton noir : le site te dit non --- */
.souffle-noir {
  background: linear-gradient(140deg, rgba(60, 14, 8, 0.96), rgba(14, 6, 4, 0.97));
  border: 1px solid rgba(214, 69, 43, 0.5);
  border-left: 3px solid #D6452B;
  color: #FF7A55;
  animation: souffle-secousse 620ms ease;
}
.souffle-noir .souffle-sigle svg {
  filter: drop-shadow(0 0 12px rgba(214, 69, 43, 0.75));
  animation: souffle-oeil 3s ease-in-out infinite;
}
@keyframes souffle-oeil {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.souffle-noir .souffle-texte {
  color: #FFC9B6;
  font-family: var(--f-display);
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
@keyframes souffle-secousse {
  0%   { transform: translateX(-9px); }
  25%  { transform: translateX(8px); }
  50%  { transform: translateX(-5px); }
  75%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

@media (max-width: 575px) {
  .souffles { top: calc(var(--h-entete, 64px) + 10px); width: calc(100vw - 20px); }
  .souffle { padding: 15px 14px 15px 16px; gap: 11px; }
  .souffle-texte { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
  .souffle, .souffle-noir, .souffle-noir .souffle-sigle svg { animation: none; transition: none; }
  .souffle { opacity: 1; transform: none; }
}

/* --- Le lien vers la Comté : discret, mais present --- */
.pied-comte {
  margin-top: 22px;
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1rem;
}
.pied-comte a {
  color: var(--brume-faible);
  border-bottom: 1px solid transparent;
  transition: color 500ms, border-color 500ms;
}
.pied-comte a:hover {
  color: #C9A227;
  border-bottom-color: #C9A227;
}

/* =====================================================
   SOUS L'EMPRISE
   Tu as garde l'Anneau. Le site ne s'en remet pas.

   La specificite est volontairement elevee (html body...) :
   les CSS de page (fendeval.css, rohan.css, comte.css...)
   sont charges APRES style.css et redefinissent la palette.
   Il faut les battre sur la specificite, pas sur l'ordre.
   ===================================================== */
html body.sous-emprise {
  --accent: #D6452B;
  --accent-halo: rgba(214, 69, 43, 0.42);
  --second: #FFB020;
  --lueur: rgba(214, 69, 43, 0.10);
  --nuit: #0A0503;
  --nuit-2: #140806;
  --nuit-3: #1E0C08;
  --ligne: rgba(214, 69, 43, 0.20);
  --parchemin: #EADFD6;
  --brume: rgba(234, 223, 214, 0.60);
  --brume-faible: rgba(234, 223, 214, 0.34);
}

/* le fond de page bascule, quel que soit le lieu */
html body.sous-emprise {
  background: var(--nuit);
  color: var(--parchemin);
}

/* les decors de chaque page virent au rouge */
html body.sous-emprise .vallee,
html body.sous-emprise .plaine,
html body.sous-emprise .collines,
html body.sous-emprise .tour,
html body.sous-emprise .brume-morts,
html body.sous-emprise .herbe .brin,
html body.sous-emprise .feuille,
html body.sous-emprise .fumee .bouffee {
  filter: sepia(0.7) hue-rotate(-32deg) saturate(2.6);
}

/* l'Anneau porte, definitivement lourd */
html body.sous-emprise .anneau-cercle {
  border-color: #D6452B;
  box-shadow: 0 0 22px rgba(214, 69, 43, 0.9);
  animation-duration: 1.1s;
}
html body.sous-emprise .anneau-porte { color: #FF7A55; border-color: rgba(214, 69, 43, 0.4); }

/* la missive d'Elrond garde ses couleurs : elle vient d'avant */
html body.sous-emprise .missive {
  --accent: #E0A951;
  --accent-halo: rgba(224, 169, 81, 0.36);
  --ligne: rgba(224, 169, 81, 0.22);
}

/* une marque discrete : le site sait ce que tu as fait */
html body.sous-emprise .entete.posee {
  background: rgba(10, 5, 3, 0.88);
  border-bottom-color: rgba(214, 69, 43, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  html body.sous-emprise .anneau-cercle { animation: none; }
}

/* =====================================================
   LE BADGE DES 25 ANS
   ===================================================== */
.anniv-entete {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: 16px;
  padding: 5px 11px;
  border: 1px solid var(--ligne);
  border-radius: 3px;
  border-bottom: 1px solid var(--ligne);
  color: var(--brume-faible);
  transition: color 400ms, border-color 400ms;
}
.anniv-entete:hover { color: var(--accent); border-color: var(--accent); }
.anniv-chiffre {
  font-family: var(--f-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: color var(--transition-theme);
}
.anniv-mot {
  font-family: var(--f-display);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.entete-droite { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

@media (max-width: 767px) {
  .anniv-entete { margin-left: 8px; padding: 4px 8px; }
  .anniv-mot { display: none; }
  .entete-note { display: none; }
}

/* --- La mention des 25 ans, dans le pied --- */
.pied-anniv {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.pied-anniv-25 {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 5px 10px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  transition: color var(--transition-theme), border-color var(--transition-theme);
}

/* =====================================================
   LE CURSEUR
   Un anneau d'or, et un point.

   Sa couleur se regle ici. Par defaut : l'or du site.
   Pour qu'il prenne la couleur de chaque peuple (rouge au
   Mordor, vert phosphorescent aux Chemins des Morts),
   remplace par : var(--accent)
   ===================================================== */
/* Pose sur le BODY, pas sur :root.

   Les themes par peuple (body[data-peuple="mordor"], body.morts...)
   redefinissent --accent sur le BODY. Si --curseur etait declare sur
   :root, var(--accent) s'y resoudrait avec l'accent du root, et le
   curseur ne changerait jamais de couleur.

   Pour le figer en or quoi qu'il arrive : remplace par #C6A15B. */
body { --curseur: var(--accent); }

/* Tant qu'aucun peuple n'est choisi, --accent vaut le gris neutre du
   site, et le curseur serait terne a l'arrivee. Il reste donc en or
   jusqu'au premier choix. */
body:not([data-peuple]) { --curseur: #C6A15B; }

/* Le natif disparait PARTOUT : c'est ce qui evite le doublon.
   Note le :root.curseur-actif : la regle ne s'applique que si le JS
   a bien demarre. Si le script echoue, le curseur normal reste. */
.curseur-actif,
.curseur-actif * { cursor: none !important; }

/* SAUF dans les champs de saisie. Taper sans voir ou l'on tape est
   insupportable, et aucun effet ne vaut ca. */
.curseur-actif input,
.curseur-actif textarea,
.curseur-actif select,
.curseur-actif [contenteditable="true"] { cursor: text !important; }
.curseur-actif select { cursor: pointer !important; }

.curseur-anneau,
.curseur-point {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.curseur-visible .curseur-anneau,
.curseur-visible .curseur-point { opacity: 1; }

/* --- L'anneau --- */
.curseur-anneau {
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid var(--curseur);
  border-radius: 50%;
  box-shadow: 0 0 14px -2px var(--curseur);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.3, 1),
              height 320ms cubic-bezier(0.2, 0.8, 0.3, 1),
              border-color 320ms,
              opacity 320ms,
              background 320ms;
}

/* --- Le point --- */
.curseur-point {
  width: 5px;
  height: 5px;
  background: var(--curseur);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--curseur);
  transition: width 260ms ease, height 260ms ease, opacity 260ms ease;
}

/* --- Sur ce qui se clique : l'anneau s'ouvre, le point s'efface --- */
.curseur-ouvert .curseur-anneau {
  width: 48px;
  height: 48px;
  background: color-mix(in srgb, var(--curseur) 10%, transparent);
  box-shadow: 0 0 24px -4px var(--curseur);
}
.curseur-ouvert .curseur-point { width: 0; height: 0; opacity: 0; }

/* --- Au clic : il se resserre --- */
.curseur-presse .curseur-anneau { width: 22px; height: 22px; }
.curseur-presse.curseur-ouvert .curseur-anneau { width: 38px; height: 38px; }
.curseur-presse .curseur-point { width: 8px; height: 8px; }

/* --- Dans un champ : il s'efface, le natif prend le relais --- */
.curseur-saisie .curseur-anneau,
.curseur-saisie .curseur-point { opacity: 0; }

/* --- Sous l'emprise : l'anneau du curseur vire au rouge, lui aussi --- */
html body.sous-emprise { --curseur: #D6452B; }

/* --- Mouvement reduit : il suit sans trainee --- */
@media (prefers-reduced-motion: reduce) {
  .curseur-anneau { transition: opacity 200ms; }
  .curseur-point { transition: opacity 200ms; }
}

/* --- Au doigt : rien. Le JS ne s'active meme pas. --- */
@media (hover: none), (pointer: coarse) {
  .curseur-anneau, .curseur-point { display: none; }
  .curseur-actif, .curseur-actif * { cursor: auto !important; }
}

/* =====================================================
   LE GUIDAGE
   Le site montre la porte. C'est toujours le lecteur qui
   l'ouvre.
   ===================================================== */

@keyframes he-bat {
  0%, 100% { box-shadow: 0 0 0 0 var(--lu-couleur); opacity: 0.7; }
  50%      { box-shadow: 0 0 0 7px transparent; opacity: 1; }
}

/* --- Le mot « mellon », dans la légende du hero --- */
.hero-inscription { margin-top: 54px; }
.mot-mellon { transition: color 700ms, text-shadow 700ms; }
body.mellon-appelle .mot-mellon {
  color: #C9E2F7;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(201, 226, 247, 0.9);
  animation: mellon-luit 2.6s ease-in-out infinite;
}
@keyframes mellon-luit {
  0%, 100% { opacity: 0.65; text-shadow: 0 0 12px rgba(201, 226, 247, 0.5); }
  50%      { opacity: 1;    text-shadow: 0 0 26px rgba(201, 226, 247, 1),
                                         0 0 50px rgba(201, 226, 247, 0.5); }
}

/* --- La carte du peuple qui appelle --- */
.carte-peuple.carte-appelle {
  position: relative;
  border-color: var(--lu-couleur, var(--accent));
  animation: carte-respire 3.4s ease-in-out infinite;
}
.carte-appelle[data-lueur='lune']   { --lu-couleur: #C9E2F7; }
.carte-appelle[data-lueur='argent'] { --lu-couleur: #E6EDF2; }
.carte-appelle[data-lueur='os']     { --lu-couleur: #4DFFA6; }
.carte-appelle[data-lueur='feu']    { --lu-couleur: #D6452B; }

@keyframes carte-respire {
  0%, 100% { box-shadow: 0 0 0 0 transparent, inset 0 0 30px -20px var(--lu-couleur); }
  50%      { box-shadow: 0 0 40px -8px var(--lu-couleur), inset 0 0 40px -18px var(--lu-couleur); }
}

/* le signe, en haut à droite de la carte : ce n'est pas qu'une lueur */
.carte-signe {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lu-couleur);
  box-shadow: 0 0 12px var(--lu-couleur);
  animation: he-bat 2.2s ease-in-out infinite;
}

/* la Porte de Durin sous la lune : un halo froid, comme l'ithildin */
.carte-appelle[data-lueur='lune'] .carte-glyphe {
  color: #C9E2F7;
  text-shadow: 0 0 24px rgba(201, 226, 247, 0.8);
}
.carte-appelle[data-lueur='feu'] .carte-glyphe {
  color: #D6452B;
  text-shadow: 0 0 24px rgba(214, 69, 43, 0.9);
}

/* --- Le chip de l'étape : le mot luit parmi les exemples ---
   C'est le seul indice, avec la carte du peuple. */
.chip.chip-appelle {
  color: var(--lu-couleur, var(--accent));
  border-color: var(--lu-couleur, var(--accent));
  animation: chip-respire 3.4s ease-in-out infinite;
}
.chip.chip-appelle:hover {
  color: var(--lu-couleur, var(--accent));
  border-color: var(--lu-couleur, var(--accent));
}
.chip-appelle[data-lueur='lune']   { --lu-couleur: #C9E2F7; }
.chip-appelle[data-lueur='argent'] { --lu-couleur: #E6EDF2; }
.chip-appelle[data-lueur='os']     { --lu-couleur: #4DFFA6; }
.chip-appelle[data-lueur='feu']    { --lu-couleur: #D6452B; }

@keyframes chip-respire {
  0%, 100% { box-shadow: 0 0 0 0 transparent, inset 0 0 14px -10px var(--lu-couleur); text-shadow: none; }
  50%      { box-shadow: 0 0 22px -6px var(--lu-couleur), inset 0 0 18px -8px var(--lu-couleur);
             text-shadow: 0 0 12px var(--lu-couleur); }
}

/* le champ, une fois armé */
.champ-arme {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: champ-pret 700ms ease;
}
@keyframes champ-pret {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}

/* --- La descente : la Route, pas une flèche --- */
.descente {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-bottom: none;
  color: var(--brume-faible);
  transition: color 500ms, opacity 500ms;
}
/* elle s'efface des qu'on commence a descendre */
body.a-defile .descente { opacity: 0; pointer-events: none; }
.descente:hover { color: var(--accent); border-bottom: none; }
.descente-mot {
  font-family: var(--f-display);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.descente-fil {
  position: relative;
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, var(--ligne), transparent);
  overflow: visible;
}
.descente-etoile {
  position: absolute;
  top: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  fill: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
  animation: etoile-descend 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes etoile-descend {
  0%   { transform: translateY(-6px) rotate(0deg) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(52px) rotate(180deg) scale(0.9); opacity: 0; }
}

/* --- La Comté, en accès libre, sur la home --- */
.bloc-comte {
  padding: clamp(50px, 9vh, 110px) 0;
  border-top: 1px solid var(--ligne);
}
.bouton-comte { margin-top: 26px; }
.comte-porte {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 200px;
}

@media (max-width: 767px) {
  .descente { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carte-signe, .carte-peuple.carte-appelle, .chip.chip-appelle,
  .descente-etoile, .mot-mellon, .champ-arme { animation: none; }
}

.comte-porte-svg {
  width: 100%;
  max-width: 240px;
  height: auto;
  color: #C9A227;
  opacity: 0.75;
  filter: drop-shadow(0 0 24px rgba(201, 162, 39, 0.3));
  transition: opacity 500ms, transform 700ms;
}
.bloc-comte:hover .comte-porte-svg { opacity: 1; transform: scale(1.03); }

/* --- Les blocs « la suite », en fin de page de lieu --- */
.bloc-suite { padding: clamp(50px, 9vh, 110px) 0; border-top: 1px solid var(--ligne); }
.suite-carte {
  padding: 40px 38px 34px;
  border: 1px solid var(--ligne);
  border-left: 2px solid var(--lu-couleur, var(--accent));
  border-radius: 6px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--lu-couleur, var(--accent)) 7%, transparent), transparent 72%);
}
.suite-carte[data-lueur='argent'] { --lu-couleur: #E6EDF2; }
.bouton-suite { margin-top: 26px; }
.suite-note, .ouvre-garde {
  margin-top: 16px;
  font-size: 0.96rem;
  font-style: italic;
  color: var(--brume-faible);
}
@media (max-width: 767px) { .suite-carte { padding: 26px 22px 24px; } }