/* ===== Reset doux ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
:root{
  --bg: #0a0a0f;
  --text: #f3f5f7;

  /* Images */
  --aion-img: url("images/aion.jpg");
  --wow-img:  url("images/wow.jpg");

  /* Couleurs */
  --aion-accent: #74c0ff;
  --wow-accent:  #ffb84d;
}

body{
  background: radial-gradient(1200px 800px at 50% 50%, #141622 0%, var(--bg) 45%, #05060a 100%);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  overflow: hidden;
}

/* ===== Mise en page (mobile-first) ===== */
.split{
  display: grid;
  grid-template-columns: 1fr;                 /* empilement par défaut */
  grid-auto-rows: minmax(50svh, 50vh);
  height: auto;
}
.split::before{ display: none; }

/* Desktop / tablette large */
@media (min-width: 821px){
  .split{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: initial;
    height: 100%;
  }
  .split::before{ 
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #ffffff33, transparent);
    box-shadow: 0 0 20px #ffffff22;
    transform: translateX(-50%);
    pointer-events: none;
    display: block;
  }
}

/* ===== Carte cliquable ===== */
.panel{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  animation: pulse 4s ease-in-out infinite;
}
.panel::before{
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  z-index: -2;
  filter: saturate(1.05) contrast(1.05) brightness(0.95);
  transition: transform .6s ease, filter .6s ease;
}
.panel::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 40%, #0000 0%, #0009 55%, #000d 100%),
    linear-gradient(0deg, #0008, #0000 40%);
  z-index: -1;
  transition: opacity .6s ease;
  opacity: .9;
}
.label{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: clamp(18px, 3.5vw, 40px);
  text-shadow: 0 2px 6px #000, 0 0 20px #000;
  padding: .4em .6em;
  border-radius: 12px;
  backdrop-filter: blur(2px);
  transition: transform .35s ease, text-shadow .35s ease, box-shadow .35s ease;
}
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Variantes ===== */
.aion::before{ background-image: var(--aion-img); }
.wow::before{  background-image: var(--wow-img); }
.aion .label{
  border: 2px solid #82c9ff55;
  box-shadow: 0 0 18px #82c9ff33, inset 0 0 8px #82c9ff22;
}
.wow .label{
  border: 2px solid #ffd38a55;
  box-shadow: 0 0 18px #ffd38a33, inset 0 0 8px #ffd38a22;
}

/* ===== Hover ===== */
.panel:hover{ animation-play-state: paused; transform: scale(1.01); }
.panel:hover::before{ transform: scale(1.08); filter: saturate(1.25) contrast(1.15) brightness(1.05); }
.panel:hover .label{ transform: translateY(-2px); text-shadow: 0 2px 10px #000, 0 0 30px currentColor; }
.aion:hover .label{ color: var(--aion-accent); }
.wow:hover  .label{ color: var(--wow-accent); }

/* ===== Animations ===== */
@keyframes pulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
@keyframes vibrate{
  0%   { transform: translate(0) rotate(0); }
  25%  { transform: translate(0.4px, -0.3px) rotate(0.05deg); }
  50%  { transform: translate(-0.3px, 0.4px) rotate(-0.05deg); }
  75%  { transform: translate(0.3px, 0.2px) rotate(0.03deg); }
  100% { transform: translate(0) rotate(0); }
}

/* ===== Header ===== */
header { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 100; text-align: center; }
header h1 {
  font-family: 'MedievalSharp', cursive !important;
  font-size: clamp(20px, 4vw, 48px);
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 2px 6px #000, 0 0 12px #fff, 0 0 20px #ff6600, 0 0 35px #ff660088;
}
header h1 span {
  color: #ffcc00;
  text-shadow: 0 0 8px #ffcc00, 0 0 16px #ff6600;
}

/* ===== Symbole central ===== */
.symbol-wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; }
.symbol{ width: 280px; max-width: 40vw; animation: icyGlow 6s ease-in-out infinite; filter: drop-shadow(0 0 15px #88ccff) drop-shadow(0 0 35px #55aaffaa); }
@keyframes icyGlow{
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* === Police WoW (LifeCraft, même dossier) === */
@font-face {
  font-family: 'LifeCraft';
  src: url('LifeCraft_Font.woff2') format('woff2'),
       url('LifeCraft_Font.woff') format('woff'),
       url('LifeCraft_Font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Polices === */
.aion .label {
  font-family: 'Cormorant Garamond', serif !important;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.wow .label {
  font-family: 'LifeCraft', cursive !important;
  letter-spacing: 0.02em;
  font-weight: normal;
  margin-left: -20px;
}
/* Responsive */
@media (max-width: 820px){
  .wow .label{ margin-left: -50px !important; }
}


/* ===== Bouton de téléchargement ===== */
.download-btn {
  font-family: 'Cormorant Garamond', serif !important;
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background: #222a;
  border: 2px solid #66ff6655;
  border-radius: 12px;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 2px 6px #000;
  box-shadow: 0 0 12px #66ff6633, inset 0 0 6px #66ff6622;
  backdrop-filter: blur(3px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  position: relative;
  z-index: 10;
}

.download-btn:hover {
  transform: scale(1.05);
  color: #66ff66;
  box-shadow: 0 0 18px #66ff66, inset 0 0 10px #66ff6622;
}


/* Ce z-index XXL ne doit PAS s'appliquer au bouton forum */
.symbol-wrapper .download-btn:not(.forum-btn){
  pointer-events: auto;
  position: relative;
  z-index: 1000;
}


.symbol-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.symbol-wrapper .download-btn {
  pointer-events: auto;
  margin-top: 20px;
}
/* ===== Bouton Forum corrigé ===== */
/* Place le bouton FORUM entre le titre et le logo, dans le flux normal */
.symbol-wrapper .forum-btn {
  position: relative;        /* il suit le flux interne de symbol-wrapper */
  margin-top: 20px;          /* espace après le titre */
  margin-bottom: 20px;       /* espace avant le logo */
  z-index: 10;               /* visible au-dessus du décor mais pas au-dessus du titre */
}


/* ==== PATCH LOGO ==== */
.symbol-wrapper img {
  width: 180px;       /* taille fixe en pixels → même rendu partout */
  height: auto;       /* conserve le ratio */
  max-width: none;    /* évite qu'un % ou un max-width vienne casser la taille */
  display: block;     /* supprime d'éventuels espaces fantômes inline */
  margin: 0 auto;     /* centré si container plus large */
}