/* =====================================================================
   Refonte 2026-09 — « le cycle du jour »
   Chargée APRÈS talos.css : elle en reprend les couleurs et ne fait que
   moderniser la base commune (typographie, navigation, boutons, pied de
   page), puis habille le nouvel accueil. Les autres pages gardent leur
   structure et héritent de cette base.
   ===================================================================== */

:root {
  --aube: #5AA0E8;
  --zenith: #E8A820;
  --crepuscule: #6070C0;
  --minuit: #9050E0;
  --vert: #5BD08A;
  --rouge: #E86A6A;
  --texte: #E9E6F0;
  --texte-doux: #B4B2C4;
  --surface: rgba(20, 19, 28, 0.72);
  --bord: rgba(255, 255, 255, 0.08);
  --rayon: 14px;
  --corps: 'Manrope', 'Raleway', system-ui, sans-serif;
  --titre: 'Cinzel', Georgia, serif;
}

/* ---------- Base : une typographie qui se lit ---------- */
body {
  font-family: var(--corps);
  font-weight: 400;
  color: var(--texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { opacity: 0.5; }
p { line-height: 1.7; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze-light); outline-offset: 3px; border-radius: 4px; }

/* ---------- Navigation ---------- */
nav {
  padding: 0.85rem clamp(1rem, 4vw, 3rem);
  background: rgba(8, 8, 12, 0.62);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--bord);
}
.nav-logo { font-size: 1.25rem; letter-spacing: 0.14em; }
.nav-links { gap: 0.35rem; align-items: center; }
.nav-links a {
  font-family: var(--corps);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--texte-doux);
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--texte); background: rgba(255, 255, 255, 0.06); }
.nav-links a.active { color: var(--bronze-light); background: rgba(201, 146, 42, 0.12); }
.nav-links a.nav-cta {
  color: #1a1206;
  background: linear-gradient(180deg, var(--bronze-light), var(--bronze));
  padding: 0.5rem 1rem;
  box-shadow: 0 4px 18px rgba(201, 146, 42, 0.25);
}
.nav-links a.nav-cta:hover { color: #1a1206; filter: brightness(1.08); }
.btn-particles { border-radius: 8px; border-color: var(--bord); }

/* ---------- Titres de section communs ---------- */
.section-label, .surtitre {
  font-family: var(--corps);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-light);
}
.section-title, .titre-section {
  font-family: var(--titre);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* ---------- Boutons ---------- */
.btn { border-radius: 10px; font-family: var(--corps); font-weight: 700; letter-spacing: 0.06em; }
.bouton {
  display: inline-flex; align-items: center; gap: 0.85rem;
  padding: 0.9rem 1.35rem 0.9rem 1.1rem;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--corps);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, filter 0.2s;
}
.bouton svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bouton > span { display: flex; flex-direction: column; text-align: left; }
.bouton-titre { font-weight: 800; font-size: 0.98rem; letter-spacing: 0.01em; }
.bouton-sous { font-size: 0.78rem; font-weight: 500; opacity: 0.78; }
.bouton--or {
  color: #1a1206;
  background: linear-gradient(180deg, #F2C865, var(--bronze));
  box-shadow: 0 10px 30px -8px rgba(232, 184, 75, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.bouton--or:hover { transform: translateY(-2px); filter: brightness(1.06); }
.bouton--verre {
  color: #fff;
  background: rgba(8, 10, 28, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bouton--verre:hover { background: rgba(8, 10, 28, 0.5); transform: translateY(-2px); }
.bouton--verre .bouton-sous { opacity: 0.85; }

.lien-fleche {
  font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--bronze-light);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.lien-fleche::after { content: '→'; transition: transform 0.2s; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- Pied de page ---------- */
footer { border-top: 1px solid var(--bord); background: #07070b; }
.footer-col-title { font-family: var(--corps); font-weight: 700; letter-spacing: 0.16em; }
.footer-links a { color: var(--texte-doux); }
.footer-links a:hover { color: var(--bronze-light); }

/* =====================================================================
   ACCUEIL
   ===================================================================== */
.contenu--accueil { position: relative; z-index: 1; }
body[data-page="accueil"] #embers { display: none; }

/* ---------- Le ciel ---------- */
.ciel {
  --ciel-haut: #1a1f4a; --ciel-milieu: #6070C0; --ciel-horizon: #f0875a; --ciel-relief: #150f24;
  position: relative;
  max-width: none; margin: 0; /* talos.css borne tous les <section> à 1100 px */
  min-height: min(100svh, 980px);
  display: grid; place-items: center;
  padding: 7rem 1rem 9rem;
  overflow: hidden;
  isolation: isolate;
}
.ciel-degrade {
  position: absolute; inset: 0; z-index: -3;
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-milieu) 58%, var(--ciel-horizon) 100%);
  transition: background 2s;
}
.ciel-degrade::after { /* grain léger : évite les bandes du dégradé */
  content: ''; position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ciel-etoiles { position: absolute; inset: 0; z-index: -2; transition: opacity 2s; }
.ciel-etoiles i {
  position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 1px;
  animation: scintille 4s ease-in-out infinite;
}
.ciel-etoiles i.grosse { width: 3px; height: 3px; box-shadow: 0 0 6px #fff; }
@keyframes scintille { 50% { opacity: 0.25; } }

.ciel-astre {
  --astre-coeur: #fff8dc; --astre-bord: #ffd36b; --astre-taille: 1;
  position: absolute; z-index: -2; width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--astre-coeur) 0 38%, var(--astre-bord) 55%, transparent 72%);
  box-shadow: 0 0 120px 40px color-mix(in srgb, var(--astre-bord) 38%, transparent);
  transform: scale(var(--astre-taille));
  transition: left 2s, top 2s, transform 2s;
}
.ciel-astre.lune {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: radial-gradient(circle at 38% 38%, #f4f1ff 0 45%, #cfc6ef 62%, rgba(200, 190, 240, 0) 72%);
  box-shadow: 0 0 80px 20px rgba(190, 170, 255, 0.22);
}

/* Paysage en voxels : trois plans, du plus clair (lointain) au plus sombre (proche). */
.ciel-paysage { position: absolute; left: 0; bottom: 0; width: 100%; height: 320px; z-index: -1; }
.ciel-paysage .plan-loin { fill: var(--ciel-relief-loin, var(--ciel-relief)); transition: fill 2s; }
.ciel-paysage .plan-milieu { fill: var(--ciel-relief-milieu, var(--ciel-relief)); transition: fill 2s; }
.ciel-paysage .plan-pres { fill: var(--ciel-relief); transition: fill 2s; }

/* Voile discret derrière le texte : il ne se lève qu en plein jour (--voile vaut 0 la nuit). */
.ciel::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1000px, 110%); height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(10, 14, 40, var(--voile, 0)), transparent);
  pointer-events: none;
}

/* Nuages en blocs à la Minecraft : plats, dessous légèrement ombré, dérive lente. */
.ciel-nuages { position: absolute; inset: 0; z-index: -1; opacity: var(--nuages, 0.6); transition: opacity 2s; overflow: hidden; }
.ciel-nuages i {
  position: absolute; left: 0;
  background: var(--nuage-teinte, #fff);
  box-shadow: inset 0 -7px 0 rgba(20, 30, 60, 0.10);
  animation: derive linear infinite;
}
.ciel-nuages i::before {
  content: ""; position: absolute; bottom: 100%; left: var(--bosse-g, 25%); width: var(--bosse-l, 45%); height: 60%;
  background: inherit;
}
@keyframes derive { from { transform: translateX(-320px); } to { transform: translateX(100vw); } }

/* Étoiles filantes : invisibles 95 % du temps, un trait bref de loin en loin. */
.ciel-etoiles .filante {
  position: absolute; width: 140px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
  transform: rotate(-24deg); opacity: 0;
  animation: filante 14s ease-out infinite;
}
@keyframes filante {
  0%, 90% { opacity: 0; translate: 0 0; }
  91% { opacity: 1; }
  97% { opacity: 0; translate: -260px 116px; }
  100% { opacity: 0; }
}
.ciel::after { /* raccord avec le reste de la page */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1;
  background: linear-gradient(180deg, transparent, var(--obsidian));
}

.ciel-contenu { max-width: 760px; text-align: center; }
.ciel-heure {
  display: inline-block;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  margin-bottom: 1.4rem;
}
.ciel .hero-title {
  font-family: var(--titre);
  font-size: clamp(3.6rem, 12vw, 8.5rem);
  font-weight: 700; line-height: 0.95; letter-spacing: 0.08em;
  /* Le dégradé et le reflet qui balaie les lettres (eclatTalos) viennent de talos.css : ne pas les écraser. */
  margin: 0 0 0.6rem;
}
.ciel-slogan { font-family: var(--titre); font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: #fff; margin-bottom: 1rem; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.ciel-desc { max-width: 560px; margin: 0 auto 2.2rem; color: rgba(255, 255, 255, 0.86); font-size: 1.02rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.ciel-actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.ciel-autre { margin-top: 1rem; font-size: 0.86rem; }
.ciel-autre a { color: rgba(255, 255, 255, 0.78); text-underline-offset: 3px; }
.ciel-autre a:hover { color: #fff; }

.ciel-forge-heure {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 7.5rem;
  display: grid; gap: 0.15rem; min-width: 220px;
  padding: 0.9rem 1.1rem; border-radius: var(--rayon);
  background: rgba(8, 8, 14, 0.45); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none; color: #fff;
  transition: transform 0.2s, background 0.2s;
}
.ciel-forge-heure:hover { transform: translateY(-2px); background: rgba(8, 8, 14, 0.6); }
.fh-libelle { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.fh-nom { font-family: var(--titre); font-size: 1.1rem; font-weight: 600; }
.fh-etat { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; opacity: 0.9; }

.point { width: 8px; height: 8px; border-radius: 50%; background: #888; flex: none; }
.point.en-ligne, .en-ligne > .point { background: var(--vert); box-shadow: 0 0 0 0 rgba(91, 208, 138, 0.6); animation: pouls 2.4s infinite; }
.point.hors, .hors > .point { background: var(--rouge); }
@keyframes pouls { 70% { box-shadow: 0 0 0 7px rgba(91, 208, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 208, 138, 0); } }

/* ---------- Blocs ---------- */
.bloc { position: relative; padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 5vw, 4rem); max-width: 1240px; margin: 0 auto; }
.bloc-tete { max-width: 680px; margin-bottom: 2.6rem; }
.titre-section { font-size: clamp(1.7rem, 3.6vw, 2.6rem); margin: 0.6rem 0 0.8rem; color: #fff; }
.chapo { color: var(--texte-doux); font-size: 1.05rem; }
.bloc-pied { margin-top: 2rem; display: flex; gap: 1.8rem; flex-wrap: wrap; }

/* ---------- Frise des forges ---------- */
.frise { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: none; }
.frise-forge a {
  --c: var(--bronze);
  position: relative; display: flex; flex-direction: column; gap: 0.25rem; height: 100%;
  padding: 1.4rem 1.3rem 1.3rem; border-radius: var(--rayon);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  text-decoration: none; color: var(--texte);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.frise-forge a:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 18px 40px -18px var(--c); }
.frise-forge--dawn a { --c: var(--aube); }
.frise-forge--zenith a { --c: var(--zenith); }
.frise-forge--dusk a { --c: var(--crepuscule); }
.frise-forge--midnight a { --c: var(--minuit); }
.frise-forge.maintenant a { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 18px 50px -20px var(--c); }
.frise-forge.maintenant a::before {
  content: "Forge de l’heure"; position: absolute; top: -0.7rem; left: 1.1rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #0b0b10; background: var(--c); padding: 0.2rem 0.55rem; border-radius: 999px;
}
.ff-heures { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.ff-icone { width: 48px; height: 48px; image-rendering: pixelated; margin: 0.7rem 0 0.5rem; border-radius: 10px; }
.ff-nom { font-family: var(--titre); font-size: 1.12rem; font-weight: 600; color: #fff; }
.ff-pack { font-weight: 700; color: color-mix(in srgb, var(--c) 55%, #fff); }
.ff-version { font-size: 0.82rem; color: var(--texte-doux); }
.ff-etat { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; padding-top: 1rem; font-size: 0.86rem; font-weight: 600; }
.ff-semaine { font-size: 0.78rem; color: var(--texte-doux); }

/* ---------- Étapes ---------- */
.pas-liste { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pas { padding: 1.6rem; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); }
.pas-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 1rem;
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem; color: #1a1206;
  background: linear-gradient(180deg, #F2C865, var(--bronze));
}
.pas h3 { font-family: var(--corps); font-size: 1.08rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem; }
.pas p { color: var(--texte-doux); font-size: 0.95rem; }

/* ---------- Captures ---------- */
.bande-captures {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%);
  gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  /* De la marge tout autour : une capture agrandie au survol ne doit pas être rognée par la bande. */
  padding: 0.9rem 0.6rem 1.2rem; margin: -0.9rem -0.6rem 0; scroll-padding-inline: 0.6rem;
  scrollbar-width: thin; scrollbar-color: var(--steel) transparent;
}
.capture {
  position: relative; margin: 0; scroll-snap-align: start; border-radius: var(--rayon); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--iron); cursor: zoom-in;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s;
}
.capture img { width: 100%; height: 100%; object-fit: cover; }
.capture:hover, .capture:focus-visible { transform: scale(1.045); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14); z-index: 1; }

/* Capture ouverte en grand (clic) */
.visionneuse {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 4rem 1rem;
  background: rgba(5, 5, 9, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.visionneuse.ouverte { opacity: 1; pointer-events: auto; }
.visionneuse figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; transform: scale(0.94); transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }
.visionneuse.ouverte figure { transform: none; }
.visionneuse img { max-width: min(92vw, 1500px); max-height: 80vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); cursor: zoom-out; }
.visionneuse figcaption { color: var(--texte-doux); font-size: 0.9rem; font-weight: 600; }
.visionneuse button {
  position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font-size: 1.4rem;
  transition: background 0.2s;
}
.visionneuse button:hover { background: rgba(255, 255, 255, 0.18); }
.visionneuse .v-fermer { top: 1rem; right: 1rem; font-size: 1.1rem; }
.visionneuse .v-prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.visionneuse .v-suiv { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .visionneuse .v-prec, .visionneuse .v-suiv { top: auto; bottom: 1rem; transform: none; } }
.capture figcaption {
  position: absolute; left: 0.7rem; bottom: 0.7rem; font-size: 0.78rem; font-weight: 700;
  padding: 0.25rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff;
}

/* ---------- Appel final ---------- */
.appel {
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; border-radius: 24px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(90, 160, 232, 0.22), transparent 60%),
    radial-gradient(80% 120% at 100% 100%, rgba(144, 80, 224, 0.24), transparent 60%),
    radial-gradient(60% 90% at 50% 50%, rgba(232, 168, 32, 0.14), transparent 70%),
    #0e0d15;
  border: 1px solid var(--bord);
}
.appel h2 { font-family: var(--titre); font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin-bottom: 0.6rem; }
.appel p { color: var(--texte-doux); margin: 0 auto 1.8rem; max-width: 520px; }

/* =====================================================================
   PAGES INTÉRIEURES
   Même ciel que l accueil, en bandeau, puis des cartes au même dessin.
   ===================================================================== */
.contenu--telecharger, .contenu--forges, .contenu--soutenir, .contenu--modpacks { padding-top: 0; }

.ciel--bandeau { min-height: 0; padding: 8.5rem 1rem 9.5rem; }
.ciel--bandeau .ciel-paysage { height: 150px; }
/* Le bandeau est trop bas pour les montagnes : coupées par le cadre, elles feraient une ligne droite. */
.ciel--bandeau .plan-loin, .ciel--bandeau .brume-loin { display: none; }
.ciel--bandeau .ciel-astre { transform: scale(0.75); }
.bandeau-contenu { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.bandeau-contenu .ciel-heure { margin-bottom: 1.1rem; }
.bandeau-contenu .surtitre { color: #fff; opacity: 0.85; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.bandeau-titre {
  font-family: var(--titre); font-weight: 700; letter-spacing: 0.04em; line-height: 1.05;
  font-size: clamp(2.3rem, 6vw, 4rem); margin: 0.5rem 0 0.9rem;
  color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.bandeau-chapo { max-width: 620px; color: rgba(255, 255, 255, 0.88); font-size: 1.04rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }

/* Cartes et encadrés hérités : même surface, mêmes coins, plus de liseré carré. */
.stat-card, .support-card, .donor-card, .etape, .atout, .repli details, .repli-ram {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
.support-card, .donor-card, .stat-card { transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.support-card:hover, .donor-card:hover { transform: translateY(-4px); border-color: rgba(232, 184, 75, 0.45); box-shadow: 0 18px 40px -20px rgba(232, 184, 75, 0.6); }
.etape { border-left: 1px solid var(--bord); }
.etape-num {
  border: none !important; border-radius: 12px;
  color: #1a1206 !important; background: linear-gradient(180deg, #F2C865, var(--bronze));
  font-family: var(--titre); font-weight: 700;
}
.etape-titre, .atout-titre, .support-title { font-family: var(--corps); font-weight: 800; letter-spacing: 0.01em; text-transform: none; font-variant: normal; color: #fff; }
.atout-titre { color: var(--bronze-light); }
.repli details { overflow: hidden; }
code, kbd { border-radius: 6px; }

.btn-primary, .btn-telecharger {
  color: #1a1206;
  background: linear-gradient(180deg, #F2C865, var(--bronze));
  border-radius: 12px;
  text-transform: none;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -8px rgba(232, 184, 75, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover { background: linear-gradient(180deg, #F7D57D, var(--bronze-light)); }
.btn-telecharger-titre { font-weight: 800; font-size: 1rem; text-transform: none; letter-spacing: 0.01em; white-space: nowrap; }
.status-dot.online { background: var(--vert); box-shadow: 0 0 8px rgba(91, 208, 138, 0.7); }
.status-dot.offline { background: var(--rouge); }
.btn-top { border-radius: 12px; background: var(--surface); border: 1px solid var(--bord); backdrop-filter: blur(8px); }

/* Soutenir */
.texte-doux { color: var(--texte-doux); margin-top: 1rem; }
.or { color: var(--bronze-light); font-weight: 700; }
.phrase-forte { margin-top: 1.4rem; font-family: var(--titre); font-size: 1.25rem; color: var(--bronze-light); }

/* Les Forges (réunie avec Modpacks le 2026-09-27) : un chapitre par forge.
   Vignette de ciel figée sur son heure | saison en cours, puis sa fresque. */
.cadran {
  position: relative; z-index: 2;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem;
  margin: -2.2rem auto 0; padding: 0 1rem;
}
.cadran-lien {
  display: flex; flex-direction: column; align-items: center; min-width: 8.5rem;
  padding: 0.6rem 1.1rem; border-radius: 14px; text-decoration: none;
  font-family: var(--titre); font-weight: 700; color: #fff;
  background: var(--surface); border: 1px solid var(--bord); border-top: 2px solid var(--forge);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cadran-lien:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px var(--forge); }
.cadran-heure { font-family: var(--corps); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--texte-doux); }

.chapitres {
  max-width: 1200px; margin: 0 auto; padding: 4.5rem clamp(1rem, 4vw, 3rem) 2rem;
  display: grid; gap: clamp(4.5rem, 9vw, 7.5rem);
}
.chapitre {
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-areas: "ciel corps" "fresque fresque";
  align-items: center; scroll-margin-top: 5.5rem;
}
.chapitre--miroir { grid-template-columns: 1fr 1.08fr; grid-template-areas: "corps ciel" "fresque fresque"; }
/* Sans min-width: 0, la fresque (820 px minimum) élargirait la grille au lieu de défiler. */
.chapitre > * { min-width: 0; }

.vignette-ciel {
  --ciel-haut: #1a1f4a; --ciel-milieu: #6070C0; --ciel-horizon: #f0875a; --ciel-relief: #150f24;
  grid-area: ciel; position: relative; display: block; isolation: isolate; overflow: hidden;
  aspect-ratio: 5 / 4; border-radius: 22px; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--forge) 45%, transparent);
  box-shadow: 0 30px 70px -35px var(--forge), 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  transition: transform 0.35s, box-shadow 0.35s;
}
.vignette-ciel:hover { transform: translateY(-5px); box-shadow: 0 40px 90px -35px var(--forge), 0 0 0 1px rgba(0, 0, 0, 0.4) inset; }
.vignette-ciel .ciel-paysage { height: 62%; }
/* Ciel figé : peint une fois, sans les fondus du grand ciel (ils restaient bloqués sur leur valeur de départ). */
.vignette-ciel .ciel-etoiles, .vignette-ciel .ciel-degrade, .vignette-ciel .ciel-astre, .vignette-ciel .ciel-paysage * { transition: none; }
.vignette-ciel .ciel-astre { transform: scale(calc(var(--astre-taille, 1) * 0.72)); }
.vignette-ciel .ciel-astre.lune { transform: scale(0.8); }
.vignette-ciel::after { /* assombrit le premier plan : le nom de la forge s y pose */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(4, 4, 10, 0.55));
}
.vignette-contenu {
  position: absolute; z-index: 1; left: 1.6rem; right: 1.6rem; bottom: 1.4rem;
  display: flex; align-items: center; gap: 0.9rem;
}
.vignette-icone { width: 52px; height: 52px; image-rendering: pixelated; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.vignette-nom {
  font-family: var(--titre); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1;
  color: #fff; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7);
}
.vignette-moment {
  position: absolute; bottom: calc(100% + 0.8rem); left: 0;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.16);
}

.chapitre-corps { grid-area: corps; }
.chapitre-etat {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem;
  font-size: 0.8rem; font-weight: 700; color: var(--texte);
  padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--bord);
}
.chapitre-corps .surtitre { color: var(--forge-clair); }
.chapitre-pack { font-family: var(--titre); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; margin: 0.3rem 0 0.5rem; }
.chapitre-pack a { color: #fff; text-decoration: none; background: linear-gradient(90deg, #fff, var(--forge-clair)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.chapitre-pack a:hover { text-decoration: underline; text-decoration-color: var(--forge); text-underline-offset: 6px; }
.chapitre-meta { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forge-clair); opacity: 0.8; }
.chapitre-devise { margin-top: 1.1rem; font-family: var(--titre); font-size: 1.1rem; color: #fff; opacity: 0.92; }
.chapitre-desc { margin-top: 0.7rem; color: var(--texte-doux); }
.chapitre-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.chapitre-actions .bouton--verre { cursor: pointer; font: inherit; color: #fff; }

.chapitre-fresque { grid-area: fresque; padding-top: 1.4rem; border-top: 1px solid var(--bord); }
.chapitre-fresque .surtitre { color: var(--texte-doux); }
.chapitre-fresque .fresque { margin-bottom: 0; }
/* La fresque garde sa taille (fixée par modpacks.js) et défile quand elle dépasse. */
.chapitre-fresque .fresque-svg { min-width: 0; max-width: none; margin: 0 auto; }
.chapitre-fresque .fresque-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--forge) 55%, transparent) transparent; }
.fresque-scroll.defilable { cursor: grab; }
.fresque-scroll.glisse { cursor: grabbing; user-select: none; }
.fresque-scroll.glisse a { pointer-events: none; }
/* Fondu sur le bord qui cache encore de la fresque. */
.fresque-scroll.suite-droite { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.fresque-scroll.suite-gauche { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%); mask-image: linear-gradient(90deg, transparent, #000 12%); }
.fresque-scroll.suite-gauche.suite-droite { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }

.appel--forges { margin-top: 3rem; }

/* Modpacks */
.fresque { border-radius: var(--rayon); }
#fresques { padding-top: 3.5rem; }

/* News */
.contenu--news .filters { gap: 0.5rem; }
.filter-btn {
  border-radius: 999px; font-family: var(--corps); font-weight: 700; letter-spacing: 0.02em;
  text-transform: none; font-size: 0.86rem; padding: 0.5rem 1rem;
  background: var(--surface); border: 1px solid var(--bord); color: var(--texte-doux);
}
.filter-btn:hover { color: var(--texte); border-color: rgba(255, 255, 255, 0.2); }
.filter-btn.active { color: #1a1206; background: linear-gradient(180deg, #F2C865, var(--bronze)); border-color: transparent; }
.news-card { border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); border-left: 3px solid var(--accent, var(--bronze)); }
.news-title { font-family: var(--titre); }

/* Pastilles d'une news (catégorie, royaume) : page news, pages de news et accueil. */
.pastille {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  padding: 0.32rem 0.7rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  color: var(--pastille); border: 1px solid color-mix(in srgb, var(--pastille) 40%, transparent);
  background: color-mix(in srgb, var(--pastille) 12%, transparent);
}
.pastille--cat-royaume { --pastille: #E8C060; }
.pastille--cat-outils { --pastille: #7DB6F0; }
.pastille--cat-maintenance { --pastille: var(--rouge); }
.pastille--cat-annonce { --pastille: var(--bronze-light); }
/* Le royaume visé, à sa couleur, et cliquable vers sa page. */
.pastille--lieu { --pastille: color-mix(in srgb, var(--royaume) 70%, #fff); transition: background 0.2s; }
.pastille--lieu:hover { background: color-mix(in srgb, var(--royaume) 30%, transparent); }

/* Accueil : les dernières news */
.news-accueil { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.2rem; }
.news-accueil-carte {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1.4rem 1.5rem; border-radius: var(--rayon); text-decoration: none;
  background: var(--surface); border: 1px solid var(--bord); border-top: 3px solid var(--accent, var(--bronze));
  transition: transform 0.25s, border-color 0.25s;
}
.news-accueil-carte:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); border-top-color: var(--accent, var(--bronze)); }
.news-accueil-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.news-accueil-meta .news-date { font-size: 0.78rem; color: var(--texte-doux); }
.news-accueil-titre { font-family: var(--titre); font-size: 1.12rem; font-weight: 600; color: #fff; line-height: 1.3; margin: 0; }
.news-accueil-apercu { font-size: 0.92rem; color: var(--texte-doux); line-height: 1.6; margin: 0; }
.btn-back { font-family: var(--corps); font-weight: 700; text-transform: none; letter-spacing: 0.01em; }
.btn-admin-float { border-radius: 999px; }
.modal { border-radius: 18px; }

/* Captures */
.cork-section { max-width: 1320px; margin: 0 auto; padding: 3.5rem clamp(1rem, 4vw, 3rem) 5rem; }
.cork-frame { border-radius: 18px; overflow: hidden; }
.btn-reshuffle { border-radius: 999px; font-family: var(--corps); font-weight: 700; text-transform: none; letter-spacing: 0.02em; }

/* =====================================================================
   PAGES DES FORGES (/forges/<id>)
   ===================================================================== */
.contenu--forge { padding-top: 0; }
.ciel--forge .bandeau-titre { font-size: clamp(2rem, 5vw, 3.4rem); }
.ciel--forge .ciel-heure { display: inline-flex; align-items: center; gap: 0.5rem; }
.forge-actions { margin-top: 1.8rem; }
.forge-actions .bouton--verre { cursor: pointer; font: inherit; }

.fiche { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.fiche-texte .chapo + .chapo { margin-top: 1rem; }
.fiche-infos { display: grid; gap: 0.6rem; margin: 0; }
.fiche-infos div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 1.1rem; border-radius: var(--rayon);
  background: var(--surface); border: 1px solid var(--bord);
}
.fiche-infos dt { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux); }
.fiche-infos dd { margin: 0; font-weight: 800; color: #fff; text-align: right; }
.fiche-infos a { color: var(--bronze-light); }

.faq { display: grid; gap: 0.6rem; max-width: 820px; }
.faq details {
  border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord);
  transition: border-color 0.2s;
}
.faq details[open] { border-color: rgba(232, 184, 75, 0.35); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-weight: 800; color: #fff;
  display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--bronze-light); font-size: 1.2rem; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.2rem 1.1rem; color: var(--texte-doux); }

.frise--autres { grid-template-columns: repeat(3, 1fr); }

/* ---------- Téléphones et tablettes ---------- */
@media (max-width: 960px) {
  .chapitre, .chapitre--miroir { grid-template-columns: 1fr; grid-template-areas: "ciel" "corps" "fresque"; }
  .vignette-ciel { aspect-ratio: 16 / 10; }
  .cadran { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .cadran-lien { min-width: 0; }
  .fiche { grid-template-columns: 1fr; }
  .frise--autres { grid-template-columns: 1fr; }
  .nav-links.open { gap: 0.6rem; }
  .nav-links.open a { font-size: 1.25rem; padding: 0.7rem 1.6rem; }
  .frise { grid-template-columns: repeat(2, 1fr); }
  .pas-liste { grid-template-columns: 1fr; }
  .ciel-forge-heure { position: static; margin: 2rem auto 0; }
  .ciel { padding-bottom: 8rem; }
  .ciel-contenu { display: flex; flex-direction: column; align-items: center; }
}
@media (max-width: 560px) {
  .ciel--bandeau { padding: 7rem 1rem 6rem; }
  .frise { grid-template-columns: 1fr; }
  .bouton { width: 100%; }
  .ciel-actions { width: 100%; }
  .bande-captures { grid-auto-columns: 82%; }
  .ciel-heure { font-size: 0.74rem; border-radius: 16px; }
  .ciel-astre { transform: scale(0.6); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}