/* === MODERN ESTACUP CSS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* === GLOBAL RESET === */
* { box-sizing: border-box; margin:0; padding:0; }

:root{
  --bg-primary:#0A0E1A;--bg-secondary:#161B26;--bg-tertiary:#1E2530;--bg-card:#232B39;
  --accent-primary:#6366F1;--accent-secondary:#8B5CF6;--accent-tertiary:#EC4899;
  --accent-success:#10B981;--accent-warning:#F59E0B;--accent-danger:#EF4444;
  --text-primary:#F8FAFC;--text-secondary:#CBD5E1;--text-muted:#94A3B8;
  --border-primary:#334155;--border-secondary:#475569;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 /.1),0 2px 4px -2px rgb(0 0 0 /.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 /.1),0 4px 6px -4px rgb(0 0 0 /.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 /.1),0 8px 10px -6px rgb(0 0 0 /.1);
  --shadow-glow:0 0 30px rgb(99 102 241 / .3);
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;
  --transition-fast:150ms ease-in-out;--transition-normal:250ms ease-in-out;--transition-slow:350ms ease-in-out
}

/* =======================================================================
   🔥 LE SECRET DU DIAPORAMA FLUIDE SANS COUPURE (OPTIMISÉ GPU POUR LA 3D)
   =======================================================================
*/
html {
  min-height: 100vh;
  background-color: #0A0E1A;
  font-size: 13px; /* 16px par défaut. 13px donne un zoom d'environ 80% */
}

/* Calque 1 : Le diaporama en arrière-plan fixe optimisé */
html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: globalSlideshow 66s infinite ease-in-out;
  will-change: background-image; 
}

/* Calque 2 : Le filtre sombre par-dessus (Remplace le blend-mode ultra gourmand) */
html::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background-color: rgba(10, 14, 26, 0.85); /* Assombrit les photos en douceur */
  pointer-events: none; /* Laisse passer les clics */
}

body {
  width:100%;
  min-height:100vh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  color:var(--text-primary);
  font-size: 1rem;
  line-height:1.6;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0;
  position:relative;
  background: transparent; /* Laisse transparaître les calques fixes */
}

/* === CHEMINS ET EXTENSIONS DES 11 IMAGES === */
@keyframes globalSlideshow {
  0%, 6% { background-image: url('bg/bg_ec_1.jpg'); }
  9%, 15% { background-image: url('bg/bg_ec_2.jpg'); }
  18%, 24% { background-image: url('bg/bg_ec_3.jpg'); }
  27%, 33% { background-image: url('bg/bg_ec_4.png'); }
  36%, 42% { background-image: url('bg/bg_ec_6.jpg'); }
  45%, 51% { background-image: url('bg/bg_ec_7.jpg'); }
  54%, 60% { background-image: url('bg/bg_es_1.jpg'); }
  63%, 69% { background-image: url('bg/bg_es_2.png'); }
  72%, 78% { background-image: url('bg/bg_es_3.png'); }
  81%, 87% { background-image: url('bg/bg_es_4.png'); }
  90%, 96% { background-image: url('bg/bg_es_5.png'); }
  100% { background-image: url('bg/bg_ec_1.jpg'); }
}

/* Leds néons décoratives de fond */
body::before{
  content:'';position:fixed;top:0;left:0;width:100%;height:100%;
  background-image:radial-gradient(circle at 25% 25%,rgba(99,102,241,.06) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(236,72,153,.04) 0%,transparent 50%);
  pointer-events:none;z-index:-1;
}

/* Header */
.site-header{width:100%;text-align:center;padding:2rem 0 1.5rem;position:relative}
.site-logo{max-width:180px;height:auto;filter:drop-shadow(0 8px 16px rgba(99,102,241,.3));transition:all var(--transition-normal)}
.site-logo:hover{transform:scale(1.05) rotate(1deg);filter:drop-shadow(0 12px 24px rgba(99,102,241,.4))}

/* Container */
.container{
  width:100%;max-width:1200px;background:rgba(22, 27, 38, 0.85);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);padding:3rem;border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-xl),inset 0 1px 0 rgba(255,255,255,.05);
  margin:1rem 1.5rem 3rem;position:relative;overflow:hidden
}
.container::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.6),transparent)}

/* Typography */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;margin-bottom:1.5rem}
h2{font-size:2.5rem;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:2rem}
h3{font-size:1.875rem;color:var(--text-primary)}
h4{font-size:1.5rem;color:var(--text-primary)}
p,label{margin:.75rem 0;color:var(--text-secondary);font-weight:400}

/* Forms */
input,select,textarea{
  width:100%;padding:1rem 1.25rem;margin-bottom:1.5rem;border-radius:var(--radius-lg);
  border:1px solid var(--border-primary);background:rgba(15,23,42,.8);backdrop-filter:blur(10px);
  color:var(--text-primary);font-size:1rem;font-weight:400;transition:all var(--transition-normal);outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,.1),var(--shadow-glow);transform:translateY(-1px)}
input:hover,select:hover,textarea:hover{border-color:var(--border-secondary)}
input[type="color"]{height:3rem;width:5rem;padding:.25rem;cursor:pointer;border-radius:var(--radius-md);margin-right:.75rem}
textarea{min-height:8rem;resize:vertical;font-family:inherit}

/* Correction alignement checkbox joker */
.joker-toggle input[type="checkbox"] { 
  margin: 0 !important; 
  padding: 0 !important; 
}

/* Outil de comparaison (Checkboxes stylisées) */
.compare-pilot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: #38bdf8 transparent;
}
.compare-pilot-list::-webkit-scrollbar { width: 6px; }
.compare-pilot-list::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 4px; }

.compare-pilot-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #cbd5e1;
  border: 1px solid transparent;
  margin: 0;
}
.compare-pilot-option:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}
.compare-pilot-option input[type="checkbox"] {
  width: 18px !important; 
  height: 18px !important; 
  margin: 0 !important; 
  padding: 0 !important;
  accent-color: #38bdf8;
  cursor: pointer;
}
/* Stylise toute la ligne quand la case est cochée */
.compare-pilot-option:has(input:checked) {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), transparent);
  border-left: 3px solid #38bdf8;
  color: #fff;
  font-weight: 600;
}

/* Buttons */
button{
  position:relative;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));
  color:#fff;border:none;padding:1rem 2rem;border-radius:var(--radius-lg);cursor:pointer;font-weight:600;font-size:1rem;
  transition:all var(--transition-normal);overflow:hidden;text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-md)
}
button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-slow)}
button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}
button:hover::before{left:100%}
button:active{transform:translateY(0)}
.logout{background:linear-gradient(135deg,var(--accent-danger),#DC2626)}
.logout:hover{box-shadow:var(--shadow-lg),0 0 30px rgba(239,68,68,.3)}
button:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Menus & Sections */
.menu,.admin-menu{
  display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3rem;justify-content:center;padding:1rem;
  background:rgba(15,23,42,.5);border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)
}
.menu button,.admin-menu button{
  padding:.875rem 1.5rem;border-radius:var(--radius-md);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  color:var(--accent-success);font-size:.875rem;font-weight:500;text-transform:none;letter-spacing:normal
}
.menu button:hover,.admin-menu button:hover{background:var(--accent-success);color:#fff;transform:translateY(-1px);box-shadow:0 0 20px rgba(16,185,129,.3)}
.menu button.active, .admin-menu button.active {
  background: var(--accent-success); color: #fff; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); transform: translateY(-1px);
}

.section,.admin-section{margin-bottom:3rem;animation:fadeInUp .6s ease-out}
.hidden{display:none !important;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Lists & Cards */
ul,ol{padding-left:0;list-style:none}
ul li,ol li{
  background:rgba(30,37,48,.8);backdrop-filter:blur(10px);padding:1.25rem 1.5rem;margin-bottom:1rem;border-radius:var(--radius-lg);
  border:1px solid var(--border-primary);font-size:1rem;transition:all var(--transition-normal);position:relative;overflow:hidden
}
ul li::before{content:'';position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));transform:scaleY(0);transition:transform var(--transition-normal)}
ul li:hover{transform:translateX(8px);border-color:var(--accent-primary);box-shadow:var(--shadow-md)}
ul li:hover::before{transform:scaleY(1)}
.course-box{
  background:rgba(30,37,48,.6);backdrop-filter:blur(15px);padding:2rem;border-radius:var(--radius-xl);margin-bottom:2rem;
  border:1px solid rgba(255,255,255,.1);transition:all var(--transition-normal);position:relative;overflow:hidden
}
.course-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary),var(--accent-tertiary));transform:scaleX(0);transition:transform var(--transition-normal)}
.course-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(99,102,241,.3)}
.course-box:hover::before{transform:scaleX(1)}

/* Engage */
.engage-card{padding:1.5rem;background:rgba(30,37,48,.8);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);margin-bottom:1.5rem;backdrop-filter:blur(10px);transition:all var(--transition-normal)}
.engage-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:var(--accent-primary)}
.engage-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.car-thumb{width:300px;height:auto;max-width:40%;filter:drop-shadow(0 12px 24px rgba(0,0,0,.3));border-radius:var(--radius-md);transition:transform var(--transition-normal)}
.car-thumb:hover{transform:scale(1.05)}

/* === VOTE CIRCUIT === */
.vote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vote-card{background:rgba(15,23,42,.6);border:1px solid var(--border-primary);border-radius:16px;padding:16px;box-shadow:var(--shadow-md)}
.vote-title{font-weight:700;margin-bottom:10px;color:var(--text-primary)}
.vote-options{display:flex;gap:12px;flex-wrap:wrap}
.vote-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border-primary);border-radius:12px;background:rgba(2,6,23,.6);cursor:pointer;user-select:none}
.vote-option input{display:none}
.vote-option .vote-pill{display:flex;align-items:center;gap:10px}
.vote-flag{width:24px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.vote-option:has(input:checked){border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.vote-actions{margin-top:16px}
.btn-validate{background:linear-gradient(135deg,var(--accent-success),#16a34a)}
.btn-validate:hover{box-shadow:var(--shadow-lg),0 0 30px rgba(16,185,129,.25)}

/* Scrollbar & selection */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,var(--accent-secondary),var(--accent-primary))}
::selection{background:rgba(99,102,241,.3);color:var(--text-primary)}

/* Podiums */
.podium-1 { background: linear-gradient(90deg, rgba(234,179,8,0.18), rgba(15,23,42,0.0)); }
.podium-2 { background: linear-gradient(90deg, rgba(148,163,184,0.18), rgba(15,23,42,0.0)); }
.podium-3 { background: linear-gradient(90deg, rgba(244,114,182,0.18), rgba(15,23,42,0.0)); }
.bestlap-global { color: #a855f7; font-weight: 600; }

/* === BARRE DE NAVIGATION GLOBALE === */
.top-navbar {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 1rem 2rem; background: rgba(10, 14, 26, 0.95); border-bottom: 2px solid var(--accent-primary);
  position: sticky; top: 0; z-index: 1000; box-sizing: border-box;
}
.nav-logo { height: 40px; transition: transform 0.2s; }
.nav-logo:hover { transform: scale(1.05); }
.nav-links { display: flex; gap: 2rem; margin-left: auto; margin-right: 2rem; align-items: center; }
.nav-links a { color: white; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--accent-primary); }

.dropdown { position: relative; display: inline-block; padding-bottom: 20px; margin-bottom: -20px; }
.dropdown-content {
  display: none; position: absolute; background-color: rgba(10, 14, 26, 0.95); min-width: 220px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.5); z-index: 1005; border-radius: 8px; border: 1px solid var(--accent-primary);
  top: 100%; right: 0; left: auto; margin-top: -5px;
}
.dropdown-content a { padding: 12px 16px; display: block; }
.dropdown-content a:hover { background-color: rgba(99, 102, 241, 0.2); color: var(--accent-primary); border-radius: 8px; }
.dropdown:hover .dropdown-content { display: block; }

.nav-btn-login {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white;
  padding: 0.5rem 1.5rem; border-radius: var(--radius-md); text-decoration: none; font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-btn-login:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }

/* =========================================
   COMPOSANTS NAVBAR (Réseaux & Auth)
========================================= */
.nav-socials {
  display: flex; gap: 1.2rem; align-items: center; margin-left: 0.5rem; 
  border-left: 1px solid rgba(255,255,255,0.1); padding-left: 1.5rem;
}
.nav-social-link { display: flex; align-items: center; }
.nav-social-link img { height: 24px; transition: transform 0.2s; }
.nav-social-link img:hover { transform: scale(1.15); }
.nav-auth-zone { display: inline-block; margin-left: 1rem; }

/* =========================================
   ADAPTATION TABLETTES (iPad paysage : 901px à 1250px)
========================================= */
@media (max-width: 1250px) and (min-width: 901px) {
  .top-navbar { padding: 0.8rem 1rem; }
  .nav-logo { height: 30px; }
  
  /* On réduit les espaces et la taille du texte */
  .nav-links { gap: 0.8rem; margin-right: 0; }
  .nav-links a { font-size: 0.8rem; letter-spacing: -0.2px; }
  
  /* On compacte les logos des réseaux sociaux */
  .nav-socials { padding-left: 0.8rem; gap: 0.8rem; margin-left: 0; }
  .nav-social-link img { height: 20px; }
  
  /* On ajuste le bouton/menu utilisateur */
  .nav-auth-zone { margin-left: 0.5rem; }
  .nav-btn-login { padding: 0.4rem 1rem; font-size: 0.8rem; }
}

/* =========================================
   COMPOSANTS MENU BURGER (Cachés sur PC)
========================================= */
.mobile-menu-btn { display: none; }
.nav-overlay { display: none; }
.mobile-menu-header { display: none; }

/* =========================================
   ADAPTATION MOBILE & PETITES TABLETTES (jusqu'à 900px)
========================================= */
@media (max-width: 900px) {
  /* La Navbar repasse en ligne, avec le logo à gauche et le burger à droite */
  .top-navbar { flex-direction: row; padding: 1rem 1.5rem; justify-content: space-between; }
  .nav-logo { height: 32px; }
  
  /* Affiche le bouton Burger */
  .mobile-menu-btn { display: flex; align-items: center; cursor: pointer; z-index: 10001; }
  
  /* Panneau latéral masqué par défaut (glissé vers la droite) */
  .nav-links {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100vh;
    background: rgba(10, 14, 26, 0.98); backdrop-filter: blur(15px); border-left: 1px solid var(--border-primary);
    flex-direction: column; justify-content: flex-start; align-items: flex-start;
    padding: 2rem 1.5rem; transition: right 0.3s ease; z-index: 10002;
    box-shadow: -10px 0 30px rgba(0,0,0,0.7); gap: 1.5rem; margin: 0;
  }
  
  /* Classe ajoutée par JS pour faire glisser le panneau */
  .nav-links.open { right: 0; }
  
  /* En-tête du menu latéral avec la croix pour fermer */
  .mobile-menu-header {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 0.5rem;
  }
  .close-menu-btn { font-size: 1.8rem; color: #94a3b8; cursor: pointer; font-weight: bold; line-height: 1; }
  .close-menu-btn:hover { color: #ef4444; }
  
  /* Liens du menu séparés par des lignes */
  .nav-links a { font-size: 1.1rem; width: 100%; display: block; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.8rem; }
  
  /* Dropdown adapté au mobile (il s'ouvre au clic au lieu du survol) */
  .dropdown { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.8rem; }
  .dropdown > a { border-bottom: none; padding-bottom: 0; }
  .dropdown-content { position: static; box-shadow: none; border: none; background: rgba(255,255,255,0.02); margin-top: 0.5rem; min-width: 100%; padding-left: 1rem; }
  
  /* Réseaux Sociaux et Bouton Connexion */
  .nav-socials { margin: 1rem 0 0 0; padding: 1.5rem 0 0 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; justify-content: center; gap: 1.5rem; }
  .nav-auth-zone { margin: 1rem 0 0 0; width: 100%; display: flex; justify-content: center; }
  .nav-btn-login { width: 100%; text-align: center; border-bottom: none !important; }

  /* Overlay assombrissant (cliquable pour fermer) */
  .nav-overlay { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); z-index: 10001; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .nav-overlay.open { opacity: 1; pointer-events: auto; }

  /* Ajustements des titres qui débordaient */
  h1, .site-header h1, .hero-section h1 { font-size: 2.2rem !important; word-wrap: break-word; }
  .hero-section { padding: 3rem 1rem !important; }
  .hero-section p { font-size: 1.1rem !important; }
}

/* =========================================
   RESTAURATION DES STYLES EFFACÉS (Bandeau, Admin, Toasts)
========================================= */

.admin-table { table-layout: fixed; width: 100%; }
.admin-table th { white-space: nowrap; }
.admin-table td { height: 60px; }
.admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.admin-table td { vertical-align: middle; }

.dropdown-content .dropdown-user-name { user-select: none; cursor: default; background: rgba(255, 255, 255, 0.02); }
.dropdown-content a[href="admin-users.html"] { border-top: 1px dashed var(--border-primary); }

.scrolling-banner {
  position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(10, 14, 26, 0.95);
  border-top: 2px solid var(--accent-primary); overflow: hidden; z-index: 1000; padding: 8px 0; box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
}
.scrolling-banner-track { display: flex; width: max-content; animation: scrollBanner 15s linear infinite; }
.banner-items { display: flex; align-items: center; flex-shrink: 0; }
.banner-items span { display: flex; align-items: center; gap: 12px; margin: 0 40px; color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.banner-items img { height: 24px; width: auto; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1)); }
@keyframes scrollBanner { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } }

/* =======================================================================
   🔥 TOASTS & CUSTOM CONFIRM (Remplacement alert / confirm)
   ======================================================================= */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--accent-primary);
  box-shadow: var(--shadow-lg), 0 0 15px rgba(0,0,0,0.5);
  font-size: 0.95rem;
  font-weight: 500;
  animation: slideInRight 0.3s ease forwards;
  pointer-events: auto;
  max-width: 350px;
}

.toast-success { border-left-color: var(--accent-success); }
.toast-error { border-left-color: var(--accent-danger); }
.toast-warning { border-left-color: var(--accent-warning); }
.toast.fade-out { animation: fadeOutRight 0.3s ease forwards; }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* Modal Custom Confirm */
.confirm-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease forwards;
}
.confirm-box {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg); padding: 25px; max-width: 400px; width: 90%;
  text-align: center; box-shadow: var(--shadow-xl);
}
.confirm-box p { color: var(--text-primary); font-size: 1.05rem; margin-bottom: 20px; line-height: 1.5; }
.confirm-actions { display: flex; gap: 15px; justify-content: center; }
.btn-cancel { background: transparent; border: 1px solid var(--border-secondary); color: var(--text-secondary); }
.btn-cancel:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: var(--text-muted); }
.btn-ok { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: none; }

/* =========================================
   EN-TÊTES DE TABLEAUX FIXES (STICKY)
========================================= */
.table-standings th, .reglement-table th, .race-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(51, 65, 85, 0.95);
  backdrop-filter: blur(5px);
  /* Ajoute une petite bordure en bas pour bien délimiter quand on scrolle */
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* =========================================
   NOTIFICATIONS (Bordures Clignotantes & Toasts)
========================================= */

/* Puce (dot) pour les boutons parents (Catégories et Navigation Principale) */
.notify-dot-parent {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background-color: #ef4444; 
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
  box-shadow: 0 0 8px #ef4444;
  z-index: 10;
  animation: blink-dot-parent 1.5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes blink-dot-parent {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); box-shadow: 0 0 2px #ef4444; }
}

/* Animations Bordures & Fond (Spécificité augmentée pour écraser le style de base) */
button.btn-notify-red, 
.menu button.btn-notify-red, 
.admin-menu button.btn-notify-red {
  animation: blink-bg-red 1.5s infinite ease-in-out !important;
  color: #ffffff !important; /* Force le texte en blanc */
  border-color: #ef4444 !important;
}

button.btn-notify-orange, 
.menu button.btn-notify-orange, 
.admin-menu button.btn-notify-orange {
  animation: blink-bg-orange 1.5s infinite ease-in-out !important;
  color: #ffffff !important; /* Force le texte en blanc */
  border-color: #f59e0b !important;
}

@keyframes blink-bg-red {
  0%, 100% { 
    box-shadow: 0 0 0 0px transparent; 
    background: rgba(239, 68, 68, 0.2) !important; /* Fond rouge léger */
  }
  50% { 
    box-shadow: 0 0 0 2px #ef4444, 0 0 15px rgba(239, 68, 68, 0.5); 
    background: rgba(239, 68, 68, 0.7) !important; /* Fond rouge intense */
  }
}

@keyframes blink-bg-orange {
  0%, 100% { 
    box-shadow: 0 0 0 0px transparent; 
    background: rgba(245, 158, 11, 0.2) !important; /* Fond orange léger */
  }
  50% { 
    box-shadow: 0 0 0 2px #f59e0b, 0 0 15px rgba(245, 158, 11, 0.5); 
    background: rgba(245, 158, 11, 0.7) !important; /* Fond orange intense */
  }
}

/* =========================================
   ŒIL POUR AFFICHER/MASQUER LE MOT DE PASSE
========================================= */
.password-field-container {
  position: relative;
  width: 100%;
}
.password-field-container input {
  margin-bottom: 0 !important; /* Pour éviter de doubler les marges */
  padding-right: 45px !important; /* Laisse de la place pour l'icône */
}
.password-toggle-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2rem;
  user-select: none;
  z-index: 10;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.password-toggle-icon:hover {
  opacity: 1;
}

/* =========================================
   AFFINAGE DU BOUTON "VUE ADMIN" (BAS GAUCHE)
========================================= */
.admin-toggle-container, 
#adminToggleContainer, 
.floating-admin-switch,
div:has(> #adminViewToggle),
.admin-view-floating {
  padding: 6px 14px !important;
  min-height: unset !important;
  height: auto !important;
  border-radius: 30px !important;
}

/* Ajustement spécifique de l'élément de switch/bouton bas gauche */
#adminViewToggle {
  transform: scale(0.85); /* Réduit légèrement la taille globale de l'interrupteur s'il est trop gros */
  margin: 0 !important;
}

/* Style des Toasts Pop-ups Administrateur */
.toast-admin {
  border-left-color: #a855f7 !important; /* Violet */
  background: rgba(30, 27, 75, 0.95) !important; /* Fond violet très sombre */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 15px rgba(168, 85, 247, 0.4) !important;
}