:root {
    --bronze: #C9922A;
    --bronze-light: #E8B84B;
    --bronze-dark: #8B6014;
    --obsidian: #0A0A0B;
    --charcoal: #111114;
    --iron: #1C1C21;
    --steel: #2A2A32;
    --ash: #3D3D48;
    --fog: #A8A8B8;
    --mist: #D0D0DE;
    --white: #F5F2EE;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Raleway', sans-serif; background: var(--obsidian); color: var(--white); min-height: 100vh; overflow-x: hidden; }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(201,146,42,0.012) 80px, rgba(201,146,42,0.012) 81px),
      repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(201,146,42,0.012) 80px, rgba(201,146,42,0.012) 81px);
    pointer-events: none;
    z-index: 0;
  }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 4rem;
    background: rgba(10,10,11,0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201,146,42,0.15);
  }
  .nav-logo { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--bronze-light); letter-spacing: 0.1em; text-decoration: none; }
  .nav-left { display: flex; align-items: center; gap: 0.8rem; }
  .btn-particles { background: none; border: 1px solid rgba(201,146,42,0.25); color: var(--fog); cursor: pointer; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; transition: all 0.3s; padding: 0; border-radius: 2px; }
  .btn-particles:hover { border-color: var(--bronze); color: var(--bronze-light); }
  .nav-links { display: flex; gap: 2rem; list-style: none; }
  .nav-links a { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fog); text-decoration: none; transition: color 0.3s; }
  .nav-links a:hover { color: var(--bronze-light); }
  .hero {
    position: relative; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 6rem 2rem 4rem; z-index: 1;
  }
  .hero-emblem { width: 80px; height: 80px; margin-bottom: 2.5rem; opacity: 0.9; }
  .hero-tagline { font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--bronze); margin-bottom: 1.5rem; font-weight: 500; }
  .hero-title { font-family: 'Cinzel', serif; font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: 0.05em; background: linear-gradient(to bottom, var(--bronze-light) 0%, var(--bronze-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.3rem; }
  .hero-title span { -webkit-text-fill-color: inherit; }
  .hero-title { filter: drop-shadow(0 2px 14px rgba(0,0,0,0.8)); }
  .hero-tagline, .hero-subtitle, .hero-desc { text-shadow: 0 1px 10px rgba(0,0,0,0.85); }
  .hero-subtitle { font-family: 'Cinzel', serif; font-size: clamp(0.9rem, 2vw, 1.2rem); font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fog); margin-bottom: 2.5rem; }
  .hero-desc { max-width: 560px; font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--mist); margin-bottom: 3rem; }
  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 2rem; font-family: 'Raleway', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s; }
  .btn-primary { background: var(--bronze); color: var(--obsidian); }
  .btn-primary:hover { background: var(--bronze-light); transform: translateY(-2px); }
  .btn-secondary { background: transparent; color: var(--mist); border: 1px solid var(--ash); }
  .btn-secondary:hover { border-color: var(--bronze); color: var(--bronze-light); transform: translateY(-2px); }
  .divider { width: 100%; max-width: 800px; margin: 0 auto; height: 1px; background: linear-gradient(to right, transparent, rgba(201,146,42,0.3), transparent); }
  .divider-full { width: 100%; height: 1px; background: linear-gradient(to right, transparent, rgba(201,146,42,0.2), transparent); }
  section { position: relative; z-index: 1; padding: 6rem 4rem; max-width: 1100px; margin: 0 auto; }
  .section-label { font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--bronze); font-weight: 500; margin-bottom: 1rem; }
  .section-title { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 600; color: var(--white); margin-bottom: 1.5rem; line-height: 1.2; }
  .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 3rem; }
  .about-text { font-size: 1rem; font-weight: 300; line-height: 1.9; color: var(--mist); }
  .about-text p { margin-bottom: 1.2rem; }
  .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .stat-card { background: var(--iron); border: 1px solid var(--ash); padding: 1.8rem 1.5rem; position: relative; overflow: hidden; }
  .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--bronze); }
  .stat-number { font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 700; color: var(--bronze-light); line-height: 1; margin-bottom: 0.4rem; }
  .stat-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fog); font-weight: 500; }
  .forges-grid-wrap { max-width: 1100px; margin: 0 auto; padding: 3rem 4rem; position: relative; z-index: 1; }
  .forges-grid-intro { font-size: 0.9rem; font-weight: 300; color: var(--fog); margin-top: 0.5rem; line-height: 1.8; }
  .forges-quad {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    margin-top: 3.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .forges-center-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; z-index: 10; pointer-events: none; }
  .forges-center-logo svg { width: 100%; height: 100%; filter: drop-shadow(0 0 20px rgba(201,146,42,0.8)) drop-shadow(0 0 40px rgba(201,146,42,0.3)); animation: logo-pulse 3s ease-in-out infinite; }
  @keyframes logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(201,146,42,0.8)) drop-shadow(0 0 40px rgba(201,146,42,0.3)); }
    50% { filter: drop-shadow(0 0 30px rgba(232,184,75,1)) drop-shadow(0 0 60px rgba(201,146,42,0.6)); }
  }
  .forge-card {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
    background: transparent;
  }
  .forge-card.clickable { cursor: pointer; }
  .forge-card-inner { position: absolute; inset: 0; clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%); transition: all 0.5s ease; }
  .forge-card-bg { position: absolute; inset: 0; transition: opacity 0.5s ease; }
  .forge-card::after { content: ''; position: absolute; inset: 0; background: rgba(5,5,8,0.65); transition: opacity 0.5s ease; z-index: 2; }
  .forge-card:hover::after { opacity: 0; }
  .forge-card-border { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .forge-card-content { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem 3rem; text-align: center; transition: opacity 0.4s ease; }
  .forge-card:not(:hover) .forge-card-content { opacity: 0.35; }
  .forge-card:hover .forge-card-content { opacity: 1; }
  .forge-card-symbol { font-size: 2.5rem; margin-bottom: 0.8rem; transition: transform 0.4s ease; filter: drop-shadow(0 0 8px currentColor); }
  .forge-card-icon { width: 3.4rem; height: 3.4rem; image-rendering: pixelated; border-radius: 8px; display: block; margin: 0 auto; }
  .players-wrap { position: relative; }
  .players-pop { display: none; position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); background: rgba(12,10,8,0.97); border: 1px solid rgba(201,146,42,0.45); border-radius: 8px; padding: 0.5rem 0.7rem; min-width: 9rem; z-index: 40; box-shadow: 0 8px 28px rgba(0,0,0,0.65); text-transform: none; letter-spacing: normal; }
  .players-wrap:hover .players-pop { display: block; }
  .players-pop .pj { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: #e8e2d6; padding: 0.14rem 0; white-space: nowrap; }
  .players-pop .pj img { width: 18px; height: 18px; image-rendering: pixelated; border-radius: 3px; }

  /* Fond photographique : les captures des joueurs, assombries pour rester lisibles. */
  #fond-photos { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: opacity 0.35s linear; }
  #fond-photos .couche { position: absolute; inset: -5%; background-size: cover; background-position: center; opacity: 0; transition: opacity 2.6s ease-in-out; filter: blur(2px) saturate(0.78); transform: scale(1.03); }
  /* Le fondu et le zoom sont deux choses distinctes. Ils etaient portes par la
     meme classe : l image sortante perdait son animation en meme temps que son
     opacite, donc elle revenait d un coup a sa taille de depart pendant qu elle
     s effacait — un dezoom brutal a chaque changement. Le zoom vit maintenant
     sur sa propre classe, retiree seulement une fois l image invisible. */
  #fond-photos .couche.visible { opacity: 1; }
  #fond-photos .couche.anime { animation: fondZoom 34s ease-out forwards; }
  #fond-photos .voile { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, rgba(10,8,6,0.82) 0%, rgba(10,8,6,0.91) 55%, rgba(10,8,6,0.96) 100%); }
  @keyframes fondZoom { from { transform: scale(1.03); } to { transform: scale(1.11); } }
  @media (prefers-reduced-motion: reduce) { #fond-photos .couche, #fond-photos .couche.anime { transition: none; animation: none; } }
  .forge-card:hover .forge-card-symbol { transform: scale(1.15); }
  .forge-card-name { font-family: 'Cinzel', serif; font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; margin-bottom: 0.4rem; text-shadow: 0 0 20px currentColor; }
  .forge-card-subtitle { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-bottom: 1rem; }
  .forge-card-modpack { font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 600; margin-bottom: 0.3rem; }
  .forge-card-version { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.8rem; }
  .forge-card-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
  .forge-card-tbd { font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.5; font-style: italic; }
  .forge-card-address { margin-top: 0.6rem; font-family: monospace; font-size: 0.7rem; opacity: 0.8; letter-spacing: 0.05em; cursor: pointer; transition: opacity 0.2s; }
  .forge-card-address:hover { opacity: 1; }
  .forge-card-particles { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
  .forge-card:hover .forge-card-particles { opacity: 1; }
  .forge-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; animation: forge-particle-rise 2s ease-in-out infinite; }
  @keyframes forge-particle-rise { 0% { transform: translateY(0) scale(1); opacity: 0.8; } 100% { transform: translateY(-80px) scale(0); opacity: 0; } }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; }
  .status-dot.online { background: #4CAF50; animation: pulse 2s infinite; }
  .status-dot.offline { background: #E24B4A; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .forge-aube .forge-card-bg { background: linear-gradient(160deg, #050C1A 0%, #0D2040 40%, #1A3A6A 70%, #0A1830 100%); }
  .forge-aube:hover { box-shadow: 0 0 60px rgba(90,160,232,0.3); }
  .forge-zenith .forge-card-bg { background: linear-gradient(160deg, #140C00 0%, #2A1800 40%, #4A2C00 70%, #1C1000 100%); }
  .forge-zenith:hover { box-shadow: 0 0 60px rgba(232,168,32,0.3); }
  .forge-dusk .forge-card-bg { background: linear-gradient(160deg, #030510 0%, #060A1E 40%, #0A1040 70%, #030510 100%); }
  .forge-dusk:hover { box-shadow: 0 0 60px rgba(96,112,192,0.3); }
  .forge-midnight .forge-card-bg { background: linear-gradient(160deg, #0A0010 0%, #150020 40%, #250040 70%, #0A0010 100%); }
  .forge-midnight:hover { box-shadow: 0 0 60px rgba(144,80,224,0.3); }
  .forges-quad-divider-h { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(to right, transparent, rgba(201,146,42,0.4), transparent); z-index: 6; pointer-events: none; }
  .forges-quad-divider-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: linear-gradient(to bottom, transparent, rgba(201,146,42,0.4), transparent); z-index: 6; pointer-events: none; }
  @media (max-width: 900px) {
    .forges-grid-wrap { padding: 0 1.5rem; }
    .forges-quad { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); gap: 1rem; max-width: 400px; }
    .forges-center-logo { display: none; }
    .forge-card { aspect-ratio: unset; min-height: 260px; clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
    .forge-card-inner { clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
    .forge-card::after { clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
    .forge-card:not(:hover) .forge-card-content { opacity: 1; }
    .forges-quad-divider-h, .forges-quad-divider-v { display: none; }
  }
  .support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 3rem; }
  .support-card { background: var(--iron); border: 1px solid var(--ash); padding: 2.5rem 2rem; text-decoration: none; transition: all 0.3s; display: flex; flex-direction: column; gap: 1rem; }
  .support-card:hover { border-color: var(--bronze); transform: translateY(-3px); }
  .support-icon { width: 48px; height: 48px; }
  .support-title { font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 600; color: var(--white); }
  .support-desc { font-size: 0.9rem; font-weight: 300; line-height: 1.7; color: var(--fog); }
  .support-cta { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze-light); font-weight: 500; margin-top: auto; }
  .donors-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 3rem; }
  .donor-card { background: var(--iron); border: 1px solid var(--ash); padding: 1.8rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 155px; position: relative; transition: all 0.3s; overflow: hidden; }
  .donor-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--bronze), transparent); }
  .donor-card:hover { border-color: var(--bronze-dark); transform: translateY(-4px); }
  .donor-skin { width: 64px; height: 64px; image-rendering: pixelated; border: 2px solid var(--ash); }
  .donor-name { font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 600; color: var(--white); text-align: center; letter-spacing: 0.04em; }
  .donor-label { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
  .btn-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; background: rgba(10,10,11,0.9); border: 1px solid rgba(201,146,42,0.3); padding: 0.7rem 1rem; cursor: pointer; opacity: 0; pointer-events: none; transition: all 0.4s; text-decoration: none; }
  .btn-top.visible { opacity: 1; pointer-events: all; }
  .btn-top:hover { border-color: var(--bronze-light); transform: translateY(-3px); }
  .btn-top-arrow { font-size: 1rem; color: var(--bronze-light); line-height: 1; }
  .btn-top-label { font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fog); font-weight: 500; font-family: 'Raleway', sans-serif; white-space: nowrap; }
  footer { position: relative; z-index: 1; padding: 3.5rem 4rem 2rem; border-top: 1px solid rgba(201,146,42,0.15); }
  .footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 2rem; }
  .footer-logo { font-family: 'Cinzel', serif; font-size: 1.2rem; font-weight: 700; color: var(--bronze); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
  .footer-brand-desc { font-size: 0.78rem; color: var(--fog); font-weight: 300; max-width: 220px; line-height: 1.6; }
  .footer-col-title { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); font-weight: 500; margin-bottom: 1rem; }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
  .footer-links a { font-size: 0.78rem; color: var(--fog); text-decoration: none; font-weight: 300; transition: color 0.2s; }
  .footer-links a:hover { color: var(--bronze-light); }
  .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.05); }
  .footer-copy { font-size: 0.72rem; color: var(--ash); font-weight: 300; }
  .footer-legal { font-size: 0.72rem; color: var(--ash); font-weight: 300; line-height: 1.6; text-align: right; max-width: 480px; }
  /* =============================================
     MODAL FORGE
     ============================================= */
  .forge-modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(5,5,8,0);
    backdrop-filter: blur(0px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
    pointer-events: none;
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
  }
  .forge-modal-overlay.open {
    background: rgba(5,5,8,0.85);
    backdrop-filter: blur(8px);
    pointer-events: all;
  }
  .forge-modal {
    position: relative;
    width: 100%; max-width: 680px;
    background: var(--charcoal);
    border: 1px solid rgba(201,146,42,0.2);
    padding: 3rem;
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
    clip-path: polygon(3% 0, 97% 0, 100% 3%, 100% 97%, 97% 100%, 3% 100%, 0 97%, 0 3%);
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ash) transparent;
  }
  .forge-modal-overlay.open .forge-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .forge-modal-close {
    position: absolute; top: 1.2rem; right: 1.5rem;
    background: none; border: none; cursor: pointer;
    font-size: 1.2rem; color: var(--fog); line-height: 1;
    transition: color 0.2s; font-family: 'Raleway', sans-serif;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  }
  .forge-modal-close:hover { color: var(--white); }
  .forge-modal-border-svg {
    position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%;
  }
  .forge-modal-header {
    display: flex; align-items: center; gap: 1.2rem;
    margin-bottom: 2rem; padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(201,146,42,0.12);
  }
  .forge-modal-symbol { font-size: 2.8rem; filter: drop-shadow(0 0 12px currentColor); flex-shrink: 0; }
  .forge-modal-header-text { flex: 1; }
  .forge-modal-name {
    font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700; letter-spacing: 0.06em; line-height: 1.1; margin-bottom: 0.3rem;
  }
  .forge-modal-subtitle {
    font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65;
  }
  .forge-modal-body { display: flex; flex-direction: column; gap: 1.8rem; }
  .forge-modal-section-title {
    font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--bronze); font-weight: 500; margin-bottom: 0.7rem;
  }
  .forge-modal-desc {
    font-size: 0.92rem; font-weight: 300; line-height: 1.85; color: var(--mist);
  }
  .forge-modal-infos {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  }
  .forge-modal-info-item {
    background: var(--iron); border: 1px solid var(--ash);
    padding: 1rem 1.2rem; position: relative; overflow: hidden;
  }
  .forge-modal-info-item::before {
    content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 100%;
    background: var(--bronze-dark);
  }
  .forge-modal-info-label {
    font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--fog); font-weight: 500; margin-bottom: 0.35rem;
  }
  .forge-modal-info-value {
    font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600;
  }
  .forge-modal-status-row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 1rem 1.2rem; background: var(--iron); border: 1px solid var(--ash);
  }
  .forge-modal-address-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem; background: var(--iron); border: 1px solid var(--ash);
    cursor: pointer; transition: border-color 0.2s;
    gap: 1rem;
  }
  .forge-modal-address-row:hover { border-color: var(--bronze-dark); }
  .forge-modal-address-text { font-family: monospace; font-size: 0.9rem; letter-spacing: 0.05em; }
  .forge-modal-copy-hint { font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze); opacity: 0.8; white-space: nowrap; }
  .forge-modal-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.5rem; }
  .forge-modal-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.4rem; font-family: 'Raleway', sans-serif;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none; border: 1px solid var(--ash); background: transparent;
    color: var(--mist); cursor: pointer; transition: all 0.25s;
  }
  .forge-modal-btn:hover { border-color: var(--bronze); color: var(--bronze-light); transform: translateY(-1px); }
  .forge-modal-btn.primary { background: var(--bronze); color: var(--obsidian); border-color: var(--bronze); }
  .forge-modal-btn.primary:hover { background: var(--bronze-light); border-color: var(--bronze-light); }
  .forge-modal-players-list {
    display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.2rem;
  }
  .forge-modal-player {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.5rem 0.8rem; background: var(--iron); border: 1px solid var(--ash);
  }
  .forge-modal-player-skin {
    width: 24px; height: 24px; image-rendering: pixelated;
    border: 1px solid var(--ash); flex-shrink: 0;
  }
  .forge-modal-player-name {
    font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 600;
    color: var(--mist); letter-spacing: 0.04em;
  }
  .forge-modal-no-players {
    font-size: 0.82rem; font-weight: 300; color: var(--fog); font-style: italic;
  }

  /* Ces trois regles etaient ecrites pour le mobile mais leur @media avait
     disparu : elles s appliquaient donc sur tous les ecrans, et la fenetre de
     detail d une forge s affichait en une seule colonne meme sur grand ecran.
     Une accolade en trop tenait lieu de fermeture. Corrige le 2026-08-30. */
  @media (max-width: 900px) {
    .forge-modal { padding: 2rem 1.5rem; }
    .forge-modal-infos { grid-template-columns: 1fr; }
    .forge-modal-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  }

  @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
  .hero > * { animation: fadeInUp 0.8s ease forwards; }
  .hero > *:nth-child(1) { animation-delay: 0.1s; }
  .hero > *:nth-child(2) { animation-delay: 0.2s; }
  .hero > *:nth-child(3) { animation-delay: 0.3s; }
  .hero > *:nth-child(4) { animation-delay: 0.4s; }
  .hero > *:nth-child(5) { animation-delay: 0.5s; }
  .hero > *:nth-child(6) { animation-delay: 0.6s; }
  .btn-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 101; }
  .btn-hamburger span { display: block; width: 22px; height: 2px; background: var(--bronze-light); transition: all 0.3s; }
  .btn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .btn-hamburger.open span:nth-child(2) { opacity: 0; }
  .btn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (max-width: 900px) {
    .nav-links { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: #0A0A0B; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; z-index: 100; overflow: hidden; }
    .nav-links.open { display: flex; }
    .nav-links a { font-size: 1rem; letter-spacing: 0.2em; }
    section, .forges-grid-wrap { padding: 4rem 1.5rem; }
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .support-grid { grid-template-columns: 1fr; }
    footer { padding: 2.5rem 1.5rem 1.5rem; }
    .footer-top { flex-direction: column; gap: 2rem; }
    .footer-brand-desc { max-width: 100%; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 0.8rem; }
    .footer-legal { text-align: center; max-width: 100%; }
    .footer-copy { text-align: center; }
    section#guide > div { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .btn-top { padding: 0.4rem 0.8rem !important; }
    .btn-top-label { display: none !important; }
    .btn-hamburger { display: flex; }
  }
  /* ==========================================================================
     AJOUTS DE LA REFONTE — accueil compact, page de téléchargement, navigation
     ========================================================================== */

  /* --- Compteur de joueurs en direct, dans la barre ---------------------- */
  /* Premier signe de vie du serveur : visible sur toutes les pages plutôt
     qu'enterré au milieu d'une page. */
  .nav-live {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.7rem; border: 1px solid rgba(76,175,80,0.35);
    background: rgba(76,175,80,0.08); border-radius: 999px;
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: #6FCF73; text-decoration: none; font-weight: 500;
    transition: all 0.3s; white-space: nowrap;
  }
  .nav-live:hover { border-color: rgba(76,175,80,0.6); background: rgba(76,175,80,0.14); }
  .nav-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #4CAF50;
    box-shadow: 0 0 6px rgba(76,175,80,0.9); animation: pulseLive 2.4s ease-in-out infinite;
  }
  .nav-live--eteint { border-color: rgba(226,75,74,0.3); background: rgba(226,75,74,0.07); color: #E27B7A; }
  .nav-live-dot.eteint { background: #E24B4A; box-shadow: none; animation: none; }
  @keyframes pulseLive { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

  /* --- Menu : page active et entrée mise en avant ------------------------ */
  .nav-links a.active { color: var(--bronze-light); }
  .nav-links a.nav-cta {
    color: var(--obsidian); background: var(--bronze);
    padding: 0.45rem 1rem; border-radius: 2px; font-weight: 600;
  }
  .nav-links a.nav-cta:hover { background: var(--bronze-light); }
  .nav-links a.nav-cta.active { color: var(--obsidian); }

  /* --- Accueil en un seul écran ------------------------------------------ */
  /* L'accueil ne raconte plus toute l'histoire : il dit ce que c'est et où
     cliquer. Le reste vit sur ses propres pages. */
  .hero--plein { min-height: 100vh; padding-bottom: 6rem; }
  .hero--plein .hero-desc { margin-bottom: 2.5rem; }
  .hero-discret {
    margin-top: 1.8rem; font-size: 0.8rem; font-weight: 300;
    color: var(--fog); text-decoration: none; letter-spacing: 0.05em;
    transition: color 0.3s;
  }
  .hero-discret:hover { color: var(--bronze-light); }

  /* --- Bouton de téléchargement ------------------------------------------ */
  .btn-telecharger { align-items: center; gap: 0.9rem; padding: 0.9rem 1.8rem; text-transform: none; letter-spacing: 0.04em; }
  .btn-telecharger-icone { font-size: 1.35rem; line-height: 1; font-weight: 700; }
  .btn-telecharger-titre { display: block; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .btn-telecharger-sous { display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.75; margin-top: 0.15rem; }
  .btn-telecharger--grand { padding: 1.15rem 2.4rem; }

  /* --- Pages intérieures -------------------------------------------------- */
  .contenu { position: relative; z-index: 1; }
  .contenu--telecharger, .contenu--forges, .contenu--soutenir, .contenu--modpacks { padding-top: 7rem; }
  .page-tete { max-width: 780px; margin: 0 auto; padding: 3rem 2rem 1rem; text-align: center; }
  .page-titre {
    font-family: 'Cinzel', serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 600;
    letter-spacing: 0.04em; margin: 0.8rem 0 1.2rem;
    background: linear-gradient(to bottom, var(--bronze-light), var(--bronze-dark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  }
  .page-chapo { font-size: 1rem; font-weight: 300; line-height: 1.8; color: var(--mist); }
  .section-titre {
    font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 600; text-align: center;
    color: var(--white); margin-bottom: 2.5rem; letter-spacing: 0.05em;
  }

  .dl-bloc { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
  .dl-note { font-size: 0.75rem; font-weight: 300; color: var(--fog); }

  /* --- Les trois étapes ---------------------------------------------------- */
  .etapes { max-width: 780px; margin: 4rem auto 0; padding: 0 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
  .etape { display: flex; gap: 1.4rem; align-items: flex-start; background: var(--iron); border: 1px solid var(--steel); border-left: 2px solid var(--bronze); padding: 1.4rem 1.6rem; }
  .etape-num {
    flex-shrink: 0; width: 34px; height: 34px; border: 1px solid var(--bronze);
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    font-family: 'Cinzel', serif; font-size: 0.95rem; color: var(--bronze-light);
  }
  .etape-titre { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--white); margin-bottom: 0.4rem; }
  .etape-texte { font-size: 0.88rem; font-weight: 300; line-height: 1.75; color: var(--mist); }
  .etape-texte strong { color: var(--bronze-light); font-weight: 500; }

  /* --- Ce que fait le launcher --------------------------------------------- */
  .atouts { max-width: 1040px; margin: 5rem auto 0; padding: 0 2rem; }
  .atouts-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; }
  .atout { background: var(--charcoal); border: 1px solid var(--steel); padding: 1.4rem 1.5rem; }
  .atout-titre { font-family: 'Cinzel', serif; font-size: 0.95rem; color: var(--bronze-light); margin-bottom: 0.6rem; }
  .atout p { font-size: 0.85rem; font-weight: 300; line-height: 1.7; color: var(--fog); }

  /* --- Repli CurseForge, replié par défaut ---------------------------------- */
  /* La méthode manuelle reste disponible, mais ce n'est plus le chemin
     principal : elle est dix fois plus longue que le launcher. */
  .repli { max-width: 780px; margin: 4.5rem auto 5rem; padding: 0 2rem; }
  .repli details { background: var(--charcoal); border: 1px solid var(--steel); }
  .repli summary {
    cursor: pointer; padding: 1.1rem 1.4rem; font-size: 0.85rem; font-weight: 500;
    color: var(--fog); list-style: none; transition: color 0.3s;
  }
  .repli summary::-webkit-details-marker { display: none; }
  .repli summary::before { content: "\25B8  "; color: var(--bronze); }
  .repli details[open] summary::before { content: "\25BE  "; }
  .repli summary:hover { color: var(--bronze-light); }
  .repli-corps { padding: 0 1.4rem 1.6rem; border-top: 1px solid var(--steel); }
  .repli-intro { font-size: 0.85rem; font-weight: 300; line-height: 1.75; color: var(--mist); margin: 1.2rem 0; }
  .repli-etapes { margin: 0 0 1.6rem 1.1rem; padding: 0; }
  .repli-etapes li { font-size: 0.84rem; font-weight: 300; line-height: 1.9; color: var(--fog); }
  .repli-etapes strong { color: var(--mist); font-weight: 500; }
  .repli-etapes a { color: var(--bronze-light); }
  .repli-ram { background: var(--iron); border: 1px solid var(--ash); padding: 1.1rem 1.3rem; }
  .repli-ram-titre { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--bronze); margin-bottom: 0.9rem; }
  .repli-ram-ligne { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0; }
  .repli-ram-ligne span { font-size: 0.82rem; font-weight: 400; color: var(--mist); }
  .repli-ram-ligne strong { font-family: 'Cinzel', serif; font-size: 0.88rem; color: var(--bronze-light); font-weight: 600; white-space: nowrap; }
  .repli-ram-sep { height: 1px; background: var(--ash); }
  .repli-ram-note { font-size: 0.74rem; font-weight: 300; line-height: 1.7; color: var(--fog); margin-top: 0.9rem; }

  .donors-vide { font-size: 0.9rem; font-weight: 300; color: var(--fog); font-style: italic; margin-top: 2rem; }

  @media (max-width: 900px) {
    .nav-live { display: none; }
    .contenu--telecharger, .contenu--forges, .contenu--soutenir, .contenu--modpacks { padding-top: 5rem; }
    .etape { flex-direction: column; gap: 0.9rem; }
  }

  /* --- Éclat du titre (2026-08-30) ---------------------------------------- */
  /*
   * Le titre était un dégradé figé, du doré clair vers un bronze très sombre :
   * de loin, le bas des lettres partait dans le noir et l'ensemble paraissait
   * terne plutôt que métallique. On garde le dégradé vertical qui donne le
   * relief, mais on relève le bas et on y fait passer un reflet.
   *
   * Le reflet est une bande claire dans le dégradé, dont on déplace la position
   * — rien n'est redessiné, c'est le même effet qu'une lumière qui glisse sur
   * du métal poli.
   */
  .hero-title {
    background: linear-gradient(
      100deg,
      #8B6014 0%,
      #C9922A 18%,
      #E8B84B 34%,
      #FFF4D6 46%,
      #E8B84B 58%,
      #C9922A 76%,
      #8B6014 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: eclatTalos 7s ease-in-out infinite;
    filter:
      drop-shadow(0 2px 14px rgba(0, 0, 0, 0.85))
      drop-shadow(0 0 26px rgba(201, 146, 42, 0.35));
  }

  @keyframes eclatTalos {
    0%   { background-position: 100% 0; }
    55%  { background-position: 0% 0; }
    100% { background-position: 100% 0; }
  }


  /* Un visiteur qui a demandé moins d'animations garde le titre, sans le
     balayage — l'effet est décoratif, jamais porteur d'information. */
  @media (prefers-reduced-motion: reduce) {
    .hero-title { animation: none; background-position: 50% 0; }
  }

  /* --- Accueil : téléchargement, Discord, accès aux forges ---------------- */

  /* Le Discord était un lien discret d'une ligne, sous les boutons. Il devient
     un rectangle de plein droit : c'est là que se passe l'entraide, et un lien
     gris de 0,8 rem ne le disait pas. Bordure et fond sourds pour rester en
     dessous des boutons dorés dans la hiérarchie. */
  .hero-discord {
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 1rem auto 0;
    padding: 0.9rem 1.6rem;
    border: 1px solid var(--ash);
    background: rgba(20, 22, 26, 0.55);
    text-decoration: none;
    text-align: center;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
  }
  .hero-discord:hover {
    border-color: var(--bronze);
    background: rgba(28, 31, 36, 0.75);
    transform: translateY(-2px);
  }
  .hero-discord-titre {
    display: block;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--mist);
  }
  .hero-discord:hover .hero-discord-titre { color: var(--bronze-light); }
  .hero-discord-sous {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem; font-weight: 300; color: var(--fog);
  }

  /* Grand accès aux forges, en bas de l'écran d'accueil.
     Le reflet qui balaie le rectangle remplace le clignotement demandé : un
     élément qui s'allume et s'éteint attire l'œil mais devient pénible sur une
     page qu'on regarde plus de quelques secondes, et les alternances marquées
     sont déconseillées pour les personnes photosensibles. Le balayage attire
     autant sans agresser. */
  .hero-forges {
    position: relative;
    display: block;
    width: 100%;
    max-width: 620px;
    margin: 2.2rem auto 0;
    padding: 1.15rem 2rem;
    border: 1px solid var(--bronze);
    background: rgba(201, 146, 42, 0.08);
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  .hero-forges-texte {
    position: relative; z-index: 1;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--bronze-light);
  }
  .hero-forges::after {
    content: '';
    position: absolute; top: 0; bottom: 0; left: -60%;
    width: 55%;
    background: linear-gradient(
      100deg,
      transparent,
      rgba(232, 184, 75, 0.28) 45%,
      rgba(232, 184, 75, 0.42) 50%,
      rgba(232, 184, 75, 0.28) 55%,
      transparent
    );
    transform: skewX(-18deg);
    animation: hero-forges-reflet 3.6s ease-in-out infinite;
  }
  .hero-forges:hover {
    background: rgba(201, 146, 42, 0.16);
    transform: translateY(-2px);
    box-shadow: 0 0 22px -6px rgba(201, 146, 42, 0.55);
  }

  @keyframes hero-forges-reflet {
    /* Le reflet traverse en un tiers du cycle, puis attend : un balayage
       continu deviendrait un scintillement permanent, donc du bruit. */
    0%   { left: -60%; }
    35%  { left: 105%; }
    100% { left: 105%; }
  }

  /* Réglage système « réduire les animations » : on retire le balayage et on
     garde un liseré fixe, pour que le bouton reste le plus visible de la page
     sans rien faire bouger. */
  @media (prefers-reduced-motion: reduce) {
    .hero-forges::after { animation: none; display: none; }
    .hero-forges { box-shadow: 0 0 18px -8px rgba(201, 146, 42, 0.6); }
  }

  /* --- Page de téléchargement : un seul bouton, Windows ------------------- */

  /* Windows seulement depuis le 2026-10-11 : la grille à deux colonnes
     (Windows | Linux) laissait une moitié vide. Le bouton est centré, assez
     large pour peser sur la page sans s'étirer sur toute la colonne. */
  .dl-choix {
    display: flex;
    justify-content: center;
    max-width: 860px;
    margin: 0 auto;
  }
  .dl-choix .btn-telecharger {
    justify-content: center;
    width: 100%;
    max-width: 440px;
  }

  /* ---------------------------------------------------------------
     Fresques des modpacks (page /modpacks)
     La frise elle-meme est un SVG dont la largeur grandit avec le
     nombre de saisons ; elle defile dans .fresque-scroll plutot que
     de se tasser. Le texte courant reste hors du SVG.
     --------------------------------------------------------------- */
  #fresques { max-width: 1200px; margin: 0 auto; padding: 0 2rem 5rem; }
  .fresques-intro {
    max-width: 62ch; font-size: 0.95rem; font-weight: 300;
    color: var(--fog); line-height: 1.8; margin-bottom: 3.5rem;
  }
  .fresques-attente { color: var(--fog); font-weight: 300; font-size: 0.9rem; }
  .fresques-pied {
    margin-top: 3rem; font-size: 0.82rem; font-weight: 300;
    color: var(--ash); line-height: 1.7;
  }

  .fresque { margin-bottom: 3.5rem; }
  .fresque-entete {
    display: flex; align-items: baseline; gap: 1rem;
    padding-bottom: 0.8rem; margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--iron);
  }
  .fresque-titre {
    font-family: 'Cinzel', serif; font-size: 1.35rem;
    font-weight: 600; letter-spacing: 0.04em;
  }
  .fresque-compte {
    font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ash); font-weight: 500; margin-left: auto;
  }
  .fresque-vide { color: var(--fog); font-weight: 300; font-size: 0.9rem; }

  /* La frise deborde volontiers : elle defile dans son propre cadre,
     jamais en faisant glisser la page entiere. */
  .fresque-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 0.4rem; }
  .fresque-svg { display: block; width: 100%; min-width: 820px; height: auto; }
  .fresque-svg a { cursor: pointer; }
  .fresque-svg a:hover .fr-nom { text-decoration: underline; }

  .fresque-svg text { text-anchor: middle; }
  .fr-periode {
    font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase; fill: #6B6B7A;
  }
  .fr-nom { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; }
  .fr-version {
    font-family: 'Raleway', sans-serif; font-size: 15px;
    font-weight: 400; letter-spacing: 0.06em;
  }
  .fr-suite {
    font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: 400;
    letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.55;
  }

  .fresque-notes { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.6rem; }
  .fresque-note {
    display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem;
    font-size: 0.86rem; font-weight: 300; line-height: 1.6;
    color: var(--fog); opacity: 0.65;
  }
  .fresque-note.est-courante { opacity: 1; }
  .fresque-note-pack {
    font-family: 'Cinzel', serif; font-size: 0.82rem;
    font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  }
  .fresque-note-texte { flex: 1 1 20ch; }

  @media (max-width: 900px) {
    #fresques { padding: 0 1.2rem 4rem; }
    .fresque { margin-bottom: 2.8rem; }
    .fresque-compte { display: none; }
  }

  /* Pulsation discrete du jalon en cours : la forge est vivante. */
  .fr-jalon--courant polygon { animation: fr-battement 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  @keyframes fr-battement { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
  @media (prefers-reduced-motion: reduce) {
    .fr-jalon--courant polygon { animation: none; }
  }