@import url("/assets/theme-decor.css");
/*
 * Esprit Padel — Tournois · Thèmes saisonniers (palettes + chrome + cartes)
 * -----------------------------------------------------------------------------
 * Deux attributs posés par theme.js :
 *   • data-theme  → palette du CONTENU (accents, nav, pied, cartes). Ce fichier.
 *   • data-season → DÉCOR (scènes illustrées), fond de page, polices de titre,
 *                   logo. Géré par /assets/theme-decor.css (généré depuis la
 *                   maquette approuvée).
 *
 * 4 thèmes SOMBRES (halloween, noel, hiver, terre) : fond de nuit, nav/pied/héros
 * sombres, texte clair, cartes en « verre » sombre (override par page).
 * 2 thèmes CLAIRS (printemps, ete) : fond clair coloré, cartes claires (défaut),
 * nav/pied clairs teintés, texte sombre.
 *
 * Défaut (aucun data-theme) = rendu Esprit Padel standard, strictement inchangé.
 * Couleurs de niveau --n-* et logo : inchangés. Mode écran : pas de décor.
 */

/* ── Réglages communs aux 4 thèmes SOMBRES (texte clair du chrome) ── */
html[data-theme="halloween"]:not([data-ecran]),
html[data-theme="noel"]:not([data-ecran]),
html[data-theme="hiver"]:not([data-ecran]),
html[data-theme="terre"]:not([data-ecran]) {
  --heading-ink:#FFF3E6; --muted-ink:#C9B6E6;
  --epnav-dark:#F4ECFF; --epnav-grey:#B9A7D6;
  --epfooter-ink:#B9A7D6; --epfooter-link:#FFFFFF;
  --shadow:0 14px 36px rgba(0,0,0,.5);
}

/* ╔═══════════════ PALETTES SOMBRES ═══════════════╗ */
html[data-theme="halloween"] {
  --orange:#FF7A1A; --orange-dk:#E06400; --blue-lt:#2A1842;
  --ep-accent:#B24BFF; --ep-accent-2:#FF7A1A;
  --epnav-surface:rgba(26,14,38,.92); --epnav-border:#FF7A1A; --epnav-blue:#FF9A4D;
  --epfooter-surface:#140C22; --epfooter-border:#2E1B47;
  --hero-a:#3A1760; --hero-b:#7A1FA0;
  --title-glow:0 0 24px rgba(255,122,26,.55), 0 0 6px rgba(178,75,255,.6);
}
html[data-theme="noel"] {
  --orange:#F0414E; --orange-dk:#C8102E; --blue-lt:#10241A;
  --ep-accent:#39B36A; --ep-accent-2:#F0C44C;
  --epnav-surface:rgba(10,24,18,.92); --epnav-border:#F0414E; --epnav-blue:#56C98A;
  --epfooter-surface:#081410; --epfooter-border:#17301F;
  --hero-a:#0D3B24; --hero-b:#8E1226;
  --title-glow:0 0 22px rgba(240,65,78,.5), 0 0 6px rgba(240,196,76,.55);
}
html[data-theme="hiver"] {
  --orange:#5AB0F0; --orange-dk:#2E8FD0; --blue-lt:#0C2742;
  --ep-accent:#9AD8FF; --ep-accent-2:#5AB0F0;
  --epnav-surface:rgba(6,23,46,.92); --epnav-border:#5AB0F0; --epnav-blue:#8FCBF5;
  --epfooter-surface:#05121F; --epfooter-border:#14304C;
  --hero-a:#0A2847; --hero-b:#1E5A8C;
  --title-glow:0 0 22px rgba(90,176,240,.55), 0 0 6px rgba(154,216,255,.6);
}
html[data-theme="terre"] {
  --orange:#E8734A; --orange-dk:#C8553D; --blue-lt:#2A160E;
  --ep-accent:#F0A868; --ep-accent-2:#E8734A;
  --epnav-surface:rgba(26,14,9,.92); --epnav-border:#E8734A; --epnav-blue:#F0A868;
  --epfooter-surface:#160B06; --epfooter-border:#331E12;
  --hero-a:#3A1C10; --hero-b:#8A3A22;
  --title-glow:0 0 22px rgba(232,115,74,.5), 0 0 6px rgba(240,168,104,.55);
}

/* ╔═══════════════ PALETTES CLAIRES ═══════════════╗ */
html[data-theme="printemps"] {
  --orange:#E84C8A; --orange-dk:#C83A72; --blue-lt:#FCEAF2;
  --ep-accent:#2E9E68; --ep-accent-2:#FFB3D1;
  --epnav-surface:#FFF7FB; --epnav-border:#E84C8A; --epnav-blue:#D14E86;
  --epfooter-surface:#FFF7FB; --epfooter-border:#F2E2EC;
  --heading-ink:#3A2440; --muted-ink:#8A6E86;
  --epnav-dark:#3A2440; --epnav-grey:#8A6E86;
  --epfooter-ink:#8A6E86; --epfooter-link:#D14E86;
  --shadow:0 10px 26px rgba(180,90,140,.16);
  --title-glow:none;
}
html[data-theme="ete"] {
  --orange:#E85D1A; --orange-dk:#C44E12; --blue-lt:#E6F7FA;
  --ep-accent:#0E8A94; --ep-accent-2:#FFC93C;
  --epnav-surface:#F4FCFD; --epnav-border:#00A9B8; --epnav-blue:#0E8A94;
  --epfooter-surface:#F4FCFD; --epfooter-border:#CDEBEF;
  --heading-ink:#0C2E35; --muted-ink:#4E8088;
  --epnav-dark:#0C2E35; --epnav-grey:#4E8088;
  --epfooter-ink:#4E8088; --epfooter-link:#0E8A94;
  --shadow:0 10px 26px rgba(0,120,140,.18);
  --title-glow:none;
}

/* ── En-tête « Calendrier / Prochains tournois » : fond transparent sur le fond
   de la saison, titre coloré (--heading-ink) + glow (sombre) ── (tous thèmes) */
html[data-theme]:not([data-ecran]) .page-header {
  background:transparent !important;
  border-bottom-color:rgba(127,127,127,.14) !important;
}
html[data-theme]:not([data-ecran]) .page-header h1 { color:var(--heading-ink) !important; text-shadow:var(--title-glow, none); }
html[data-theme]:not([data-ecran]) .page-header p  { color:var(--muted-ink) !important; }

/* ── Bandeaux héros & en-têtes maison : dégradé sombre (thèmes SOMBRES seulement) ── */
html[data-theme="halloween"]:not([data-ecran]) .hero, html[data-theme="noel"]:not([data-ecran]) .hero,
html[data-theme="hiver"]:not([data-ecran]) .hero, html[data-theme="terre"]:not([data-ecran]) .hero,
html[data-theme="halloween"]:not([data-ecran]) .live-hero, html[data-theme="noel"]:not([data-ecran]) .live-hero,
html[data-theme="hiver"]:not([data-ecran]) .live-hero, html[data-theme="terre"]:not([data-ecran]) .live-hero,
html[data-theme="halloween"]:not([data-ecran]) .pay-header, html[data-theme="noel"]:not([data-ecran]) .pay-header,
html[data-theme="hiver"]:not([data-ecran]) .pay-header, html[data-theme="terre"]:not([data-ecran]) .pay-header,
html[data-theme="halloween"]:not([data-ecran]) body > header, html[data-theme="noel"]:not([data-ecran]) body > header,
html[data-theme="hiver"]:not([data-ecran]) body > header, html[data-theme="terre"]:not([data-ecran]) body > header,
html[data-theme="halloween"]:not([data-ecran]) .wrap > header, html[data-theme="noel"]:not([data-ecran]) .wrap > header,
html[data-theme="hiver"]:not([data-ecran]) .wrap > header, html[data-theme="terre"]:not([data-ecran]) .wrap > header {
  background:linear-gradient(135deg, var(--hero-a), var(--hero-b)) !important;
  border-bottom-color:var(--epnav-border) !important;
}
html[data-theme="halloween"]:not([data-ecran]) .hero h1, html[data-theme="noel"]:not([data-ecran]) .hero h1,
html[data-theme="hiver"]:not([data-ecran]) .hero h1, html[data-theme="terre"]:not([data-ecran]) .hero h1,
html[data-theme="halloween"]:not([data-ecran]) .live-hero .hero-title, html[data-theme="noel"]:not([data-ecran]) .live-hero .hero-title,
html[data-theme="hiver"]:not([data-ecran]) .live-hero .hero-title, html[data-theme="terre"]:not([data-ecran]) .live-hero .hero-title {
  text-shadow:var(--title-glow);
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  INTERRUPTEUR JOUEUR (header via nav.js + pied de page via footer.js)       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
.ep-theme-toggle {
  display:inline-flex; align-items:center; gap:7px;
  background:transparent; border:1.5px solid var(--epnav-border, #DDE3EC);
  color:var(--epfooter-ink, #6B7A99);
  font-family:'Lato',sans-serif; font-size:12px; font-weight:700;
  padding:7px 11px; min-height:38px; border-radius:9px; cursor:pointer;
  line-height:1; transition:background .15s,border-color .15s,color .15s;
}
.ep-theme-toggle:hover { background:rgba(127,127,127,.08); }
.ep-theme-toggle:focus-visible { outline:2px solid var(--epnav-border, #0070CD); outline-offset:2px; }
.ep-theme-toggle .ep-tt-ico { width:18px; height:18px; flex-shrink:0; color:var(--epnav-border, var(--orange, #FFB500)); }
.ep-theme-toggle[aria-pressed="false"] { color:var(--grey-txt, #6B7A99); border-color:var(--grey-bd, #DDE3EC); }
.ep-theme-toggle[aria-pressed="false"] .ep-tt-ico { color:var(--grey-txt, #6B7A99); opacity:.6; }

/* Variante header : bouton icône compact */
.epnav-theme-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-right:6px; border-radius:50%;
  background:transparent; border:1.5px solid var(--epnav-border, #DDE3EC);
  color:var(--epnav-border, var(--orange, #FFB500)); cursor:pointer;
  transition:background .15s,border-color .15s; flex-shrink:0;
}
.epnav-theme-btn:hover { background:rgba(127,127,127,.08); }
.epnav-theme-btn:focus-visible { outline:2px solid var(--epnav-border, #0070CD); outline-offset:2px; }
.epnav-theme-btn .ep-tt-ico { width:20px; height:20px; }
.epnav-theme-btn[aria-pressed="false"] { color:var(--epnav-grey, #556070); border-color:var(--epnav-grey,#556070); }
.epnav-theme-btn[aria-pressed="false"] .ep-tt-ico { opacity:.55; }

/* Rangée dédiée dans le pied de page */
.epfooter-theme { margin-top:12px; display:flex; justify-content:center; }

/* ── MODE ÉCRAN — thème conservé, aucun décor, pas d'interrupteur ── */
html[data-ecran] #ep-decor { display:none !important; }
html[data-ecran] .ep-theme-toggle,
html[data-ecran] .epnav-theme-btn { display:none !important; }