/* ETERNAL RP — Page d'accueil uniquement — V1 */
:root {
  --charbon: #0D0A0A;
  --sang: #B90E12;
  --braise: #EF3926;
  --ivoire: #E8D9BD;
  --laiton: #A97D4A;
  --muted: #B0A198;
  --border: #49322A;
  --radius: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; background: var(--charbon); }
body {
  margin: 0; min-height: 100%; min-height: 100dvh;
  color: var(--ivoire);
  font-family: 'Lato', Arial, sans-serif;
  background:
    radial-gradient(ellipse 39% 42% at 50% 36%, rgba(141, 24, 14, .33), transparent 87%),
    radial-gradient(ellipse 40% 40% at 4% 88%, rgba(115, 15, 10, .20), transparent 85%),
    linear-gradient(110deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .10) 50%, rgba(0, 0, 0, .82)),
    var(--charbon);
  overflow-x: hidden;
}
body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; }
body::before {
  background-image: url('assets/grain-charbon.webp');
  background-size: cover; background-position: center;
  opacity: .20; mix-blend-mode: screen; z-index: 0;
}
body::after {
  background: radial-gradient(ellipse 65% 70% at 50% 44%, transparent 5%, rgba(0,0,0,.28) 80%, rgba(0,0,0,.6) 100%);
  z-index: 0;
}
.landing {
  position: relative; isolation: isolate; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: max(22px, env(safe-area-inset-top)) 16px max(30px, env(safe-area-inset-bottom));
}
.welcome {
  width: min(100%, 740px); display: flex; flex-direction: column; align-items: center;
  text-align: center; transform: translateY(-6px);
}
.brand-logo {
  display: block; width: clamp(260px, min(43vw, 54vh), 485px);
  height: auto; object-fit: contain;
  /* Aucune déformation, aucun halo appliqué au logo officiel. */
  filter: none;
}
.brand-story { margin-top: 0; width: 100%; }
.brand-manifesto {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  margin: 0;
  font-family: 'Noto Serif Display', Georgia, serif;
  font-weight: 700; font-size: clamp(10px, 1.06vw, 15px);
  line-height: 1.55; letter-spacing: .28em; color: #b99661;
}
.brand-manifesto .line { width: 20px; height: 1px; background: var(--sang); flex: 0 0 20px; }
.brand-question {
  margin: 12px 0 0; font: 700 clamp(10px, .99vw, 14px)/1.5 'Noto Serif Display', Georgia, serif;
  letter-spacing: .22em; color: var(--ivoire);
}
.connect-button {
  margin-top: 31px; min-width: 166px; min-height: 46px; padding: 10px 27px;
  border: 1px solid var(--laiton); border-radius: var(--radius);
  background: linear-gradient(180deg, #372920 0%, #251b16 100%);
  color: var(--ivoire); font: 700 16px/1.2 'Noto Serif Display', Georgia, serif;
  cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.connect-button:hover { border-color: #dfb77b; background: linear-gradient(180deg, #493125, #32221b); transform: translateY(-1px); }
.connect-button:active { transform: translateY(0); }
.connect-button:focus-visible, .logout-link:focus-visible, .sub-links a:focus-visible { outline: 2px solid var(--ivoire); outline-offset: 5px; }
.logout-link { display: inline-block; margin-top: 12px; padding: 4px 8px; border: 0; background: none; cursor: pointer; color: #a48259; font: 700 12px/1.2 'PT Sans Narrow', 'Arial Narrow', sans-serif; letter-spacing: .11em; text-decoration: underline; text-underline-offset: 3px; }
.logout-link[hidden] { display: none; }
.logout-link:hover { color: var(--ivoire); }
.logout-link:disabled { opacity: .5; cursor: wait; }
.sub-links {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 15px;
  margin-top: 25px;
  font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif;
  font-weight: 700; letter-spacing: .12em; font-size: 12px;
}
.sub-links a { color: #a48259; text-decoration: none; transition: color .18s; }
.sub-links a:hover { color: var(--ivoire); }
.link-separator { color: var(--sang); font-size: 15px; line-height: 1; }
.status-text {
  font-size: 12px; color: var(--ivoire); margin: 13px 0 0;
  min-height: 17px; opacity: 0; transition: opacity .2s;
}
.status-text:not(:empty) { opacity: .85; }
@media (max-width: 600px) {
  .landing { padding: 28px 18px 24px; }
  .welcome { transform: none; }
  .brand-logo { width: clamp(235px, 78vw, 370px); }
  .brand-manifesto { font-size: clamp(9px, 2.35vw, 11px); letter-spacing: .14em; gap: 8px; white-space: nowrap; }
  .brand-manifesto .line { width: 11px; flex-basis: 11px; }
  .brand-question { font-size: 11px; letter-spacing: .15em; margin-top: 9px; }
  .connect-button { margin-top: 24px; }
  .sub-links { margin-top: 23px; gap: 10px; font-size: 11px; letter-spacing: .06em; }
}
@media (max-width: 370px) {
  .sub-links { flex-direction: column; gap: 5px; }
  .link-separator { display: none; }
  .brand-manifesto { font-size: 8px; letter-spacing: .10em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}