/*
  ╔══════════════════════════════════════════════════════╗
  ║  AUBODSKY — Système de design                        ║
  ║  Fichier CSS de référence — NE PAS MODIFIER          ║
  ║  Palette : Noir + Jaune Pittsburgh (#FFD100)         ║
  ╚══════════════════════════════════════════════════════╝

  Usage :
    <link rel="stylesheet" href="aubodsky-theme.css">
    (Charger APRÈS Tailwind CSS)

  Palette :
    Jaune primaire  #FFD100  → actions, éléments actifs
    Jaune-orange    #E87F00  → danger, erreur, éliminé
    Jaune clair     #FFF176  → succès, qualifié, positif
    Noir            #0a0a0b  → fond principal
    Gris foncé      #18181b  → cartes / surfaces
    Blanc           #f4f4f5  → texte principal
*/

    :root{
      --accent:#FFD100;
      --accent-dim:rgba(255,209,0,0.12);
      --accent-border:rgba(255,209,0,0.28);
      --bg:#0a0a0b;
      --bg1:#111113;
      --bg2:#18181b;
      --bg3:#1f1f24;
      --border:#27272a;
      --border-light:#3f3f46;
      --txt:#f4f4f5;
      --txt-muted:#71717a;
      --txt-dim:#52525b;
    }
    *{box-sizing:border-box}
    body{
      font-family:'Inter',system-ui,sans-serif;
      background:var(--bg);
      color:var(--txt);
      -webkit-font-smoothing:antialiased;
    }
    /* Scrollbars */
    .sb::-webkit-scrollbar{width:4px;height:4px}
    .sb::-webkit-scrollbar-track{background:var(--bg2)}
    .sb::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}
    @media print{.np{display:none!important}}
    .bracket-col{display:flex;flex-direction:column;justify-content:space-around}

    /* ── Backgrounds ── */
    .bg-slate-900,.bg-slate-900\/95{background-color:var(--bg1)!important}
    .bg-slate-800,.bg-slate-800\/60,.bg-slate-800\/40{background-color:var(--bg2)!important}
    .bg-slate-700,.bg-slate-700\/50{background-color:var(--bg3)!important}
    .bg-slate-900\/50,.bg-slate-900\/40{background-color:rgba(17,17,19,0.5)!important}

    /* ── Borders ── */
    .border-slate-700,.border-slate-800{border-color:var(--border)!important}
    .border-slate-600{border-color:var(--border-light)!important}

    /* ── Text ── */
    .text-slate-400{color:var(--txt-muted)!important}
    .text-slate-500{color:var(--txt-dim)!important}
    .text-slate-600{color:#3f3f46!important}
    .text-slate-300{color:#d4d4d8!important}
    .text-slate-200{color:#e4e4e7!important}
    .text-white{color:#ffffff!important}

    /* ── Orange → Accent yellow (boutons simulation uniquement désormais) ── */
    .bg-orange-500{background-color:#f97316!important;color:#fff!important}
    .bg-orange-600{background-color:#ea6e00!important;color:#fff!important}
    .hover\:bg-orange-400:hover{background-color:#fb923c!important;color:#fff!important}
    .hover\:bg-orange-500:hover{background-color:#f97316!important;color:#fff!important}
    .text-orange-400,.text-orange-500{color:#f97316!important}
    .focus\:ring-orange-500:focus{--tw-ring-color:rgba(249,115,22,0.4)!important}

    /* ── Amber → Accent yellow ── */
    .bg-amber-400,.bg-amber-500{background-color:var(--accent)!important;color:#000!important}
    .hover\:bg-amber-300:hover,.hover\:bg-amber-400:hover{background-color:#ffe033!important;color:#000!important}
    .text-amber-400,.text-amber-500{color:var(--accent)!important}
    .text-amber-300{color:#ffe566!important}
    .bg-amber-500\/20,.bg-amber-400\/20{background-color:var(--accent-dim)!important}
    .bg-amber-500\/10,.bg-amber-400\/10{background-color:rgba(255,209,0,0.07)!important}
    .border-amber-500\/30,.border-amber-400\/30{border-color:var(--accent-border)!important}
    .focus-visible\:ring-amber-400,.focus-visible\:ring-amber-500{--tw-ring-color:rgba(255,209,0,0.4)!important}
    .shadow-amber-500\/20{--tw-shadow-color:rgba(255,209,0,0.12)!important}
    .border-amber-500{border-color:var(--accent)!important}
    .border-amber-400{border-color:var(--accent)!important}

    /* ── Nav ── */
    nav.fixed{
      background:rgba(10,10,11,0.97)!important;
      border-bottom:1px solid var(--border)!important;
      backdrop-filter:blur(16px);
    }

    /* ── Radius: flatter, more technical ── */
    .rounded-xl,.rounded-2xl{border-radius:6px!important}
    .rounded-lg{border-radius:5px!important}
    .rounded-full{border-radius:9999px!important}

    /* ── Typography: headers use Barlow Condensed ── */
    h1,h2,h3,
    .text-2xl.font-black,.text-3xl.font-black,.text-xl.font-black,.text-lg.font-black,
    .font-black{
      font-family:'Barlow Condensed',sans-serif!important;
      letter-spacing:0.02em;
    }
    .text-2xl{font-size:1.75rem!important;line-height:1.1!important}
    .text-3xl{font-size:2.25rem!important;line-height:1.05!important}
    .font-black{font-weight:900!important}

    /* ── Card section labels ── */
    h3.text-xs.font-bold,
    .text-xs.font-bold.text-slate-400.uppercase{
      font-family:'Barlow Condensed',sans-serif!important;
      font-size:0.7rem!important;
      letter-spacing:0.14em!important;
    }

    /* ── Badges ── */
    span.inline-flex.items-center.rounded{
      border-radius:3px!important;
      font-family:'Barlow Condensed',sans-serif!important;
      letter-spacing:0.08em!important;
      text-transform:uppercase!important;
      font-size:0.62rem!important;
    }

    /* ── Inputs ── */
    input[type="text"],input[type="password"],input[type="number"],input[type="email"],textarea{
      background:var(--bg2)!important;
      border:1px solid var(--border-light)!important;
      color:var(--txt)!important;
      border-radius:5px!important;
    }
    input::placeholder,textarea::placeholder{color:var(--txt-dim)!important}
    input:focus,textarea:focus{
      border-color:var(--accent)!important;
      outline:none!important;
      box-shadow:0 0 0 2px rgba(255,209,0,0.18)!important;
    }

    /* ── Modal ── */
    .bg-black\/75{background:rgba(0,0,0,0.9)!important}

    /* ── VS label ── */
    .text-orange-400.font-bold{
      font-family:'Barlow Condensed',sans-serif!important;
      letter-spacing:0.1em!important;
    }

    /* ── Progress bars ── */
    .h-3.bg-orange-500,.h-2\.5.bg-orange-500{background-color:var(--accent)!important}

    /* ── Smooth interactions ── */
    button{transition:background-color 0.1s ease,color 0.1s ease,opacity 0.1s ease!important}

    /* ── Auth gate big action buttons ── */
    .py-6.rounded-2xl{
      border-radius:6px!important;
      letter-spacing:0.05em!important;
      font-family:'Barlow Condensed',sans-serif!important;
      font-size:1.1rem!important;
      font-weight:800!important;
    }
    .bg-orange-500.py-6{color:#000!important}

    /* ── Amber champion card ── */
    .bg-amber-900\/20{background-color:rgba(30,20,0,0.5)!important}
    .border-amber-500\/40{border-color:rgba(255,180,0,0.35)!important}
    .text-amber-400{color:#FFD100!important}
    .text-amber-300{color:#ffe566!important}
    .bg-amber-500\/20{background-color:rgba(255,209,0,0.1)!important}
    .border-amber-500{border-color:var(--accent)!important}

    /* ── Palette Aubodsky : jaune uniquement ──
       Jaune primaire  #FFD100  → actions, actif
       Jaune-orange    #E87F00  → remplace rouge/violet/danger
       Jaune clair     #FFF176  → remplace vert/bleu/succès
    ── */
    :root{
      --accent-warm:#E87F00;
      --accent-warm-dim:rgba(232,127,0,0.12);
      --accent-warm-border:rgba(232,127,0,0.28);
      --accent-cool:#FFF176;
      --accent-cool-dim:rgba(255,241,118,0.10);
      --accent-cool-border:rgba(255,241,118,0.25);
    }

    /* ── Emerald/green → jaune clair ── */
    .border-emerald-700\/40{border-color:var(--accent-cool-border)!important}
    .bg-emerald-900\/10{background-color:var(--accent-cool-dim)!important}
    .text-emerald-400{color:var(--accent-cool)!important}
    .text-emerald-300{color:#fffde7!important}
    .bg-emerald-500\/20{background-color:var(--accent-cool-dim)!important}
    .border-emerald-500\/30{border-color:var(--accent-cool-border)!important}
    .bg-emerald-900\/30{background-color:rgba(255,241,118,0.08)!important}
    .border-emerald-700\/50{border-color:rgba(255,241,118,0.2)!important}
    .bg-emerald-600{background-color:var(--accent-cool)!important;color:#000!important}
    .hover\:bg-emerald-500:hover{background-color:#ffe000!important;color:#000!important}
    .text-emerald-200{color:#fffde7!important}
    .bg-emerald-500\/30{background-color:rgba(255,241,118,0.12)!important}

    /* ── Red/danger → jaune-orange ── */
    .bg-red-900\/5{background-color:rgba(232,127,0,0.06)!important}
    .border-red-900\/40{border-color:rgba(232,127,0,0.25)!important}
    .text-red-400{color:var(--accent-warm)!important}
    .text-red-300{color:#ffb347!important}
    .bg-red-500\/20{background-color:var(--accent-warm-dim)!important}
    .border-red-500\/30{border-color:var(--accent-warm-border)!important}
    .bg-red-700{background-color:var(--accent-warm)!important;color:#000!important}
    .hover\:bg-red-600:hover{background-color:#ff9a1a!important;color:#000!important}
    .text-red-500{color:#ff9a00!important}

    /* ── Violet/purple → jaune-orange ── */
    .text-violet-200{color:#ffe0a3!important}
    .text-violet-300{color:#ffcb6b!important}
    .text-violet-400{color:var(--accent-warm)!important}
    .bg-violet-900\/40{background-color:rgba(232,127,0,0.12)!important}
    .border-violet-700\/50{border-color:rgba(232,127,0,0.25)!important}
    .bg-violet-600\/30{background-color:rgba(232,127,0,0.1)!important}
    .bg-violet-900\/20{background-color:rgba(232,127,0,0.08)!important}
    .border-violet-700\/30{border-color:rgba(232,127,0,0.2)!important}
    .text-indigo-300{color:var(--accent-cool)!important}
    .bg-indigo-900\/30{background-color:var(--accent-cool-dim)!important}
    .border-indigo-700\/30{border-color:var(--accent-cool-border)!important}

    /* ── Blue → jaune clair ── */
    .text-blue-400{color:var(--accent-cool)!important}
    .text-blue-300{color:#fffde7!important}
    .bg-blue-500\/20{background-color:var(--accent-cool-dim)!important}
    .border-blue-500\/30{border-color:var(--accent-cool-border)!important}
    .bg-blue-500{background-color:var(--accent-cool)!important;color:#000!important}
    .h-2\.5.bg-blue-500{background-color:var(--accent-cool)!important}

    /* ── Score input big numbers ── */
    .text-5xl.font-black{
      font-family:'Barlow Condensed',sans-serif!important;
      font-size:3.5rem!important;
      font-weight:900!important;
    }

    /* ── Knockout bracket ── */
    .border-2.border-slate-600{border-color:var(--border)!important}
    .border-2.border-orange-500{border-color:var(--accent)!important}
    .border-2.border-emerald-500{border-color:#FFF176!important}

    /* ══════════════════════════════════════════════════════════════════════════
       PALETTE EXTENSION — élimine violet/sky/purple/cyan/indigo résiduels
       Toutes les teintes non couvertes au-dessus sont mappées ici.
    ══════════════════════════════════════════════════════════════════════════ */

    /* ── Orange supplémentaires ── */
    .bg-orange-500\/10{background-color:rgba(255,209,0,0.07)!important}

    /* ── Emerald/opacity rares ── */
    .text-emerald-400\/70{color:rgba(255,241,118,0.55)!important}
    .bg-emerald-900\/20{background-color:rgba(255,241,118,0.05)!important}
    .border-emerald-700\/20{border-color:rgba(255,241,118,0.12)!important}

    /* ── Violet/opacity supplémentaires ── */
    .bg-violet-500\/50{background-color:rgba(232,127,0,0.20)!important}
    .border-violet-500\/50{border-color:rgba(232,127,0,0.30)!important}
    .bg-violet-600\/40{background-color:rgba(232,127,0,0.15)!important}
    .border-violet-600\/40{border-color:rgba(232,127,0,0.28)!important}

    /* ── Cyan supplémentaires ── */
    .bg-cyan-900\/20{background-color:rgba(255,209,0,0.05)!important}
    .border-cyan-700\/30{border-color:rgba(255,209,0,0.18)!important}

    /* ── Purple supplémentaires ── */
    .bg-purple-900\/20{background-color:rgba(232,127,0,0.05)!important}

    /* ── Violet supplémentaires → orange chaud ── */
    .border-violet-500{border-color:var(--accent-warm)!important}
    .border-violet-500\/60{border-color:rgba(232,127,0,0.40)!important}
    .border-violet-700\/50{border-color:rgba(232,127,0,0.28)!important}
    .border-violet-700\/60{border-color:rgba(232,127,0,0.35)!important}
    .bg-violet-900\/30{background-color:rgba(232,127,0,0.10)!important}
    .bg-violet-600{background-color:var(--accent-warm)!important;color:#000!important}
    .hover\:bg-violet-500:hover{background-color:#ff9a1a!important;color:#000!important}
    .bg-violet-600\/30{background-color:rgba(232,127,0,0.10)!important}

    /* ── Sky → orange chaud ── */
    .bg-sky-900\/50{background-color:rgba(232,127,0,0.10)!important}
    .text-sky-400{color:var(--accent-warm)!important}
    .border-sky-700\/40{border-color:rgba(232,127,0,0.25)!important}
    .text-sky-300{color:#ffcb6b!important}

    /* ── Purple → orange chaud ── */
    .bg-purple-900\/30{background-color:rgba(232,127,0,0.08)!important}
    .bg-purple-900\/40{background-color:rgba(232,127,0,0.12)!important}
    .border-purple-700\/30{border-color:rgba(232,127,0,0.20)!important}
    .border-purple-700\/40{border-color:rgba(232,127,0,0.25)!important}
    .border-purple-900\/40{border-color:rgba(232,127,0,0.20)!important}
    .text-purple-300{color:#ffcb6b!important}
    .text-purple-400{color:var(--accent-warm)!important}
    .bg-purple-400{background-color:var(--accent-warm)!important}

    /* ── Cyan → jaune doré ── */
    .bg-cyan-900\/40{background-color:rgba(255,209,0,0.08)!important}
    .border-cyan-700\/40{border-color:rgba(255,209,0,0.22)!important}
    .text-cyan-300{color:#ffe566!important}
    .bg-cyan-400{background-color:var(--accent)!important}

    /* ── Indigo supplémentaires → jaune clair ── */
    .bg-indigo-700\/40{background-color:rgba(255,241,118,0.10)!important}
    .bg-indigo-900\/40{background-color:rgba(255,241,118,0.08)!important}
    .border-indigo-700\/40{border-color:rgba(255,241,118,0.22)!important}
    .bg-indigo-400{background-color:var(--accent-cool)!important}

    /* ── Emerald supplémentaires → jaune clair ── */
    .bg-emerald-900\/5{background-color:rgba(255,241,118,0.03)!important}
    .bg-emerald-900\/40{background-color:rgba(255,241,118,0.08)!important}
    .bg-emerald-900\/50{background-color:rgba(255,241,118,0.08)!important}
    .bg-emerald-500\/5{background-color:rgba(255,241,118,0.03)!important}
    .border-emerald-700\/20{border-color:rgba(255,241,118,0.12)!important}
    .border-emerald-700\/30{border-color:rgba(255,241,118,0.18)!important}
    .bg-emerald-400{background-color:var(--accent-cool)!important}
    .h-1\.5.bg-emerald-500,.h-1.bg-emerald-500{background-color:var(--accent-cool)!important}
    .text-emerald-500{color:var(--accent-cool)!important}

    /* ── Header PC — les classes Tailwind h-14 / lg:h-20 gèrent la hauteur.
       La nav admin possède un inner-div lg:h-20 ; la nav participant garde h-14. ── */

/* ══════════════════════════════════════════════════════════
   ONGLET ÉCRAN — Barre de progression (balayage lumineux)
   ══════════════════════════════════════════════════════════
   Principe : un "spot" jaune/ambre balaye la barre de gauche
   à droite en une durée égale au délai entre deux slides.
   Utilisation :
     <div class="pd-track">
       <div key={animKey} class="pd-bar" style="animation-duration:9s"/>
     </div>
   Le key change à chaque avancement → CSS animation repart de zéro.
*/
@keyframes pd-sweep {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

.pd-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: #0f172a;
  overflow: hidden;
}

.pd-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(232,127,0,0.15) 20%,
    rgba(255,209,0,0.55) 40%,
    #FFD100              50%,
    rgba(255,209,0,0.55) 60%,
    rgba(232,127,0,0.15) 80%,
    transparent          100%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: pd-sweep linear;
  animation-fill-mode: forwards;
}