/*
Theme Name: Arena
Text Domain: arena
Version: 1.8.2
Description:
Author: Alex Lemelle
*/

:root{
  --bg: #0b0b0b;
  --fg: #ffffff;
  --muted: #b7bcc3;
  --card: #151515;
  --gap: 14px;
  --radius: 18px;
  --header-h: 110px;
  --maxw: 560px;

  /* Icon config via options */
  --icon-size: 64px;
  --icon-radius: 16px;

  /* Back button (override via options) */
  --back-btn-bg: rgba(255,255,255,.1);
  --back-btn-fg: #ffffff;
  --back-btn-border: rgba(255,255,255,.12);

  /* Ticker */
  --ticker-bg: rgba(0,0,0,.75);
  --ticker-fg: #ffffff;
  --ticker-h: 36px;
  --ticker-speed: 25s;
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg) center/cover no-repeat fixed;
  background-attachment: fixed;
}

/* Layout to keep footer at bottom */
body > .site-header{}
body > .wrap{
  min-height: calc(100vh - var(--header-h));
  display:flex; flex-direction:column;
}
.site-main{flex:1 0 auto;}
.site-footer{flex-shrink:0;}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Header fixé haut de page */
.site-header{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:center;
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(0,0,0,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
}
.site-header > .header-inner{
  width: min(100%, var(--maxw)); margin: 0 auto; height:100%;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.site-logo{max-height:100px;height:auto}
.site-title{ margin:0; font-size:20px; font-weight:700;}

/* Bouton retour (couleurs via CSS vars) */
.back-btn{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  height:40px;width:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--back-btn-bg); backdrop-filter: blur(2px); border:1px solid var(--back-btn-border); color: var(--back-btn-fg);
}
.back-btn svg{width:22px;height:22px; stroke: currentColor;}
.back-btn:active{transform:translateY(-50%) scale(.97)}

/* Cadre contenu centré */
.wrap{
  margin:0 auto;
  max-width:var(--maxw);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
  position: relative;
  padding-top: var(--header-h);
}

.site-main{padding-bottom:20px}

/* Grille d'icônes : 3 par ligne */
.menu-grid{
  list-style:none;margin:0;padding:16px;
  display:grid;grid-template-columns: repeat(3, 1fr);gap: var(--gap);
}
.menu-grid > li{margin:0;padding:0}

/* Carte */
.icon-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;border-radius:var(--radius);
  padding:16px 10px;text-align:center;transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
  min-height:118px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  background:var(--card);
}
.icon-card:active{transform:scale(.98)}

/* Wrapper d'icône (reçoit la couleur personnalisée) */
.icon-wrap{
  width:var(--icon-size);
  height:var(--icon-size);
  border-radius:var(--icon-radius);
  background:#222;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.icon-wrap > img.icon-img{ width:100%;height:100%;object-fit:cover;border-radius:inherit; }
.icon-wrap > i{ font-size: calc(var(--icon-size) * 0.44); line-height:1; }

.icon-label{ font-size:13px;font-weight:600; letter-spacing:.2px; }

/* Social grid (shortcode) */
.social-grid{
  list-style:none;margin:0;padding:16px;
  display:grid;grid-template-columns: repeat(3, 1fr);gap: var(--gap);
}
.social-item .icon-card{ min-height:auto; padding:12px 8px; }
.social-item .icon-wrap{ margin: 0 auto; }
.social-item .icon-label{ margin-top:6px; font-size:12px; }

/* Sponsors grid (shortcode) */
.sponsors-grid{
  list-style:none;margin:0;padding:16px;
  display:grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap);
}
@media (max-width: 600px){
  .sponsors-grid{ grid-template-columns: 1fr; }
}
.sponsor-card{
  background:var(--card); border-radius:var(--radius); padding:12px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sponsor-card img{ max-height:64px; width:auto; }

/* Ticker bas de l'écran (uniquement accueil) */
.home .arena-ticker{
  position: fixed; left:0; right:0; bottom:0; height: var(--ticker-h);
  background: var(--ticker-bg); color: var(--ticker-fg); z-index: 200;
  overflow: hidden; border-top:1px solid rgba(255,255,255,.12);
}
.arena-ticker .track{
  display: inline-block; white-space: pre; 
  padding-left: 100%;
  animation: ticker var(--ticker-speed) linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Contenu des pages */
.page-content{ padding:16px; }
.page-content h1,.page-content h2,.page-content h3{ margin:0.6em 0 0.4em }
.page-content p{ margin:0.6em 0 }

/* Footer minimal */
.site-footer{color:var(--muted);font-size:12px;text-align:center;padding:10px 0 24px}

/* iOS zoom prevention for form fields */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* Update: admin En direct page - Tombola dedup + tw-meta highlight (2025-09-06) */