/* === Super Sunday — Global sporty theme + hero background + subtle bubbles === */

/* Palette */
:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --ink: #101827;
  --muted: #6b7280;
  --border: #e5e9f2;

  --accent-start: #1ea7ff;
  --accent-end: #27d980;
  --accent: #1890ff;

  --radius: 16px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
  --shadow-hover: 0 10px 28px rgba(0,0,0,.12);
  --trans: 180ms ease;
}

*{box-sizing:border-box}
html,body{height:100%}/* === Super Sunday — Dark "Sirion-like" theme overrides === */

/* 0) Couleurs globales + typo */
:root{
  --ink: #e8eef6;              /* texte global clair */
  --ink-strong: #ffffff;       /* titres */
  --muted: #b7c3d6;            /* textes secondaires */
  --border-dark: rgba(255,255,255,.08);
  --surface-dark: rgba(15,23,42,.60);        /* slate-900 translucide */
  --surface-dark-2: rgba(15,23,42,.72);
}

/* 1) Fond sombre bleuté + image adoucie */
body{
  color: var(--ink);
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 85% at 20% -10%, rgba(3,7,18,.9) 0%, rgba(3,7,18,.6) 40%, rgba(3,7,18,.3) 60%, rgba(3,7,18,.2) 100%),
    linear-gradient(180deg, rgba(9,14,30,.75), rgba(9,14,30,.55) 40%, rgba(9,14,30,.75)),
    url("/assets/image/backgroundp24p.jpg") center top / cover no-repeat;
  filter: saturate(.9) contrast(.95) brightness(.9) blur(0.5px);
}
body::after{
  /* vignette douce pour focus centre */
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,.26) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,0) 60%, rgba(0,0,0,.22) 100%);
}

/* 2) Titres & textes */
h1,h2,h3{ color: var(--ink-strong); }
.hero-title{
  color:#fff !important;
  text-shadow: 0 8px 30px rgba(30,167,255,.25), 0 2px 12px rgba(0,0,0,.35);
}
.section-title{
  color:#f1f5ff;
}
.section-title::before{
  background: linear-gradient(180deg, #8ee7ff, #9fffcf);
  box-shadow: 0 6px 16px rgba(143, 237, 255, .35);
}
.muted{ color: var(--muted); }

/* 3) Header sombre translucide */
header{
  background: rgba(10,14,26,.78);
  color:#fff;
  border-bottom: 1px solid var(--border-dark);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
nav a{ color:#e9f2ff; }
nav a:hover{ background: rgba(255,255,255,.06); }

/* 4) Cartes dark glass */
.card{
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card.accent{
  background:
    linear-gradient(135deg, rgba(30,167,255,.12), rgba(39,217,128,.12)),
    var(--surface-dark-2);
  border-color: rgba(255,255,255,.12);
}

/* 5) Inputs / selects en sombre lisible */
input, select{
  color:#e8eef6;
  background: rgba(8,12,24,.6);
  border: 1px solid rgba(255,255,255,.10);
}
input::placeholder, select::placeholder{ color:#9fb0c7; }
input:focus, select:focus{
  border-color: rgba(143, 237, 255, .55);
  box-shadow: 0 0 0 3px rgba(143, 237, 255, .18);
}

/* 6) Boutons */
.btn{
  box-shadow: 0 12px 28px rgba(30,167,255,.3);
}
.btn-outline{
  color:#eaf3ff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);
}
.btn-outline:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
}

/* 7) État vide & préformatés */
.empty{
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  color: #c8d5e8;
}
pre{
  color:#e7efff;
  background: rgba(8,12,24,.55);
  border: 1px solid rgba(255,255,255,.08);
  padding: 12px; border-radius: 12px; overflow:auto;
}

/* 8) Légère retouche des bulles pour le mode sombre */
.bg-bubble{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity:.7;
}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  color:var(--ink);
  line-height:1.5;

  /* Hero background image */
  background-image: url("/assets/image/backgroundp24p.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

/* dark overlay to ensure readability */
body::before{
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.60));
  mix-blend-mode: normal;
  z-index:-1;
}

/* ===== Header / Nav ===== */
header{
  position: sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
  background: rgba(255,255,255,0.86);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px) saturate(120%);
}
header h1{margin:0; font-size:20px; font-weight:700; color:var(--ink)}
nav a{
  margin-left:16px; padding:8px 14px;
  color:var(--ink); text-decoration:none; border-radius:12px;
  transition: background var(--trans), transform var(--trans);
}
nav a:hover{ background: linear-gradient(90deg, rgba(30,167,255,.15), rgba(39,217,128,.15)); transform:translateY(-1px) }

/* ===== Layout ===== */
.container{ max-width:1100px; margin:24px auto; padding:0 16px }
.grid{ display:grid; gap:20px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)) }

/* ===== Cards ===== */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color:#dbe5f2 }
a.card{ display:block; color:inherit; text-decoration:none }
.card.accent{
  background: linear-gradient(135deg, rgba(30,167,255,.08), rgba(39,217,128,.08)), var(--surface);
  border-color: rgba(30,167,255,.25);
}

/* Titles / text */
h1,h2,h3{ line-height:1.2 }
h2{ margin: 20px 0 12px; font-size:22px; font-weight:600 }
.muted{ color: var(--muted) }
.mt{ margin-top:24px }

/* Buttons & inputs */
.btn{
  display:inline-block; padding:10px 18px; border-radius:12px; border:none;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  color:#fff; font-weight:600; text-decoration:none;
  box-shadow: 0 8px 20px rgba(24,144,255,.25);
  transition: transform var(--trans), box-shadow var(--trans);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(24,144,255,.35) }

input,select{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background: var(--surface-2); color: var(--ink); outline:none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
input:focus,select:focus{ border-color:#b8d8ff; box-shadow: 0 0 0 3px rgba(24,144,255,.20) }

/* Empty state */
.empty{
  padding: 20px; text-align:center; color:var(--muted);
  background: var(--surface-2); border:1px dashed var(--border);
  border-radius: var(--radius);
}

/* Specific existing sections */
#tournaments .card, #matches .card{ margin-bottom:12px }

/* ===== Animated bubbles (tennis/padel ball ghosts) ===== */
@keyframes float {
  0%   { transform: translateY(0) scale(1); opacity:.7; }
  50%  { transform: translateY(-36px) scale(1.05); opacity:.4; }
  100% { transform: translateY(0) scale(1); opacity:.7; }
}
.bg-bubble{
  position: fixed; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(255,255,255,0));
  filter: blur(0.2px);
  animation: float 9s ease-in-out infinite;
  mix-blend-mode: screen;
}
.bg-bubble.b1{ width:90px; height:90px; left:15%; top:72%; animation-duration:8s }
.bg-bubble.b2{ width:70px; height:70px; left:68%; top:64%; animation-duration:10s }
.bg-bubble.b3{ width:115px; height:115px; left:48%; top:78%; animation-duration:12s }
.bg-bubble.b4{ width:60px; height:60px; left:82%; top:20%; animation-duration:11s }
.bg-bubble.b5{ width:80px; height:80px; left:6%; top:18%; animation-duration:9s }

@media (prefers-reduced-motion: reduce){
  .bg-bubble{ animation: none; }
}

/* Footer (if needed) */
footer{ margin:40px 0 0; padding:24px 16px; text-align:center; color:var(--muted);
  border-top:1px solid var(--border); background: rgba(255,255,255,.75); backdrop-filter: blur(6px) }

  /* === Retouches: overlay noir + spacing formulaires === */

/* 1) Overlay plus noir, façon Sirion */
body::before{
  /* on garde l'image + on fonce nettement avec un voile noir bleuté */
  background:
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.55) 35%, rgba(0,0,0,.68)),
    radial-gradient(120% 85% at 20% -10%, rgba(0,10,20,.75) 0%, rgba(0,10,20,.35) 60%, rgba(0,10,20,.20) 100%),
    url("/assets/image/backgroundp24p.jpg") center top / cover no-repeat !important;
  filter: saturate(.95) contrast(.98) brightness(.88) blur(0.6px);
}

/* vignette un peu plus marquée sur les bords */
body::after{
  background:
    radial-gradient(145% 100% at 50% 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,.30) 100%),
    radial-gradient(125% 90% at 50% 100%, rgba(0,0,0,0) 58%, rgba(0,0,0,.24) 100%) !important;
}

/* 2) Spacing des formulaires (inputs & dropdowns) */
.card input,
.card select,
.card textarea {
  margin-top: 8px !important;
  margin-bottom: 14px !important;   /* +respiration */
  min-height: 42px;                  /* dropdowns plus grands */
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

/* espacement entre groupes de champs (si <div> direct dans .card) */
.card > div + div { margin-top: 16px; }

/* si tu utilises des <label>, on les rapproche proprement du champ */
.card label {
  display: block;
  font-weight: 600;
  color: #e9f1ff;
  margin-top: 12px;
  margin-bottom: 6px;
}

/* 3) Lisibilité du header encore meilleure sur overlay noir */
header{
  background: linear-gradient(180deg, rgba(5,8,14,.96), rgba(5,8,14,.88)) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
nav a{ color:#f2f6ff !important; }
nav a:hover{ background: rgba(255,255,255,.08) !important; }

/* 4) Cartes & blocs "empty" légèrement plus sombres pour contraster */
.card{
  background: rgba(12,18,32,.72) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.empty{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* 5) Sections et titres : contraste blanc franc */
.section-title{ color:#ffffff !important; }
.hero-title{ color:#ffffff !important; }

/* === Retouches inputs + boutons === */

/* 1) Inputs & selects : fond bleu foncé homogène */
.card input,
.card select,
.card textarea {
  background: #0f1b33 !important;   /* bleu nuit uniforme */
  color: #eaf3ff !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
.card input::placeholder,
.card select::placeholder,
.card textarea::placeholder {
  color: #93a4c0 !important;
}

/* 2) Boutons flat arrondis */
.btn {
  display:inline-block;
  padding:10px 18px;
  border-radius: 999px;              /* bien arrondi */
  border:none;
  background: #1890ff;               /* bleu flat */
  color:#fff;
  font-weight:600;
  box-shadow: none;                  /* pas d’ombre lourde */
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover {
  background: #3aa0ff;               /* bleu un peu plus clair au hover */
  transform: translateY(-1px);
}

/* Variante secondaire : outline */
.btn-outline {
  border-radius: 999px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,.25);
  background: transparent;
  color:#eaf3ff;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.45);
}