/* ═══════════════════════════════════════════
   HERO — NBA Cinematic Split + NCAA Energy
═══════════════════════════════════════════ */
.hero{min-height:100vh;background:var(--navy);display:grid;grid-template-columns:55% 45%;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(4,9,26,1) 0%,rgba(7,16,43,.95) 40%,rgba(12,25,64,.7) 70%,transparent 100%);z-index:1;pointer-events:none}

/* Hero arena side */
.hero-arena{position:relative;overflow:hidden;background:linear-gradient(160deg,#0A1535 0%,#061020 100%)}
.hero-court-art{position:absolute;inset:0;opacity:.08}
.hero-court-art svg{width:100%;height:100%}
.hero-blue-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(ellipse,rgba(26,79,196,.25) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.hero-ball{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;animation:float3d 4s ease-in-out infinite}
@keyframes float3d{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-3deg)}50%{transform:translate(-50%,-50%) translateY(-28px) rotate(3deg)}}
.ball-glow{filter:drop-shadow(0 0 80px rgba(26,79,196,.6)) drop-shadow(0 20px 60px rgba(0,0,0,.9))}
.arena-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(26,79,196,.12);animation:ring-pulse 4s ease-out infinite;transform:translate(-50%,-50%)}
.arena-ring:nth-child(1){width:280px;height:280px;animation-delay:0s}
.arena-ring:nth-child(2){width:480px;height:480px;animation-delay:1.2s}
.arena-ring:nth-child(3){width:680px;height:680px;animation-delay:2.4s}
@keyframes ring-pulse{0%{opacity:.4;transform:translate(-50%,-50%) scale(.95)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}

/* Hero live card */
.hero-live-card{position:absolute;bottom:32px;right:28px;z-index:10;background:rgba(4,9,26,.92);border:1px solid var(--navy4);border-left:3px solid var(--red);padding:14px 18px;backdrop-filter:blur(20px);min-width:220px}
.hlc-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--blue3);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.hlc-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hlc-match{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:22px;color:var(--white);display:flex;align-items:center;gap:8px}
.hlc-vs{font-size:12px;color:var(--grey2);font-weight:500}
.hlc-date{font-size:11px;color:var(--grey1);margin-top:6px}
.hero-badge{position:absolute;top:28px;right:28px;z-index:10;background:var(--red);color:var(--white);font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;transform:rotate(1.5deg)}

/* Hero content */
.hero-content{position:relative;z-index:5;padding:100px 60px 80px;display:flex;flex-direction:column;justify-content:center}
.hero-overline{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
.hero-overline-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
.hero-overline-text{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--red)}
.hero-overline-sep{font-size:10px;color:var(--grey2)}
.hero-overline-sub{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey1)}
.hero-h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:clamp(68px,9vw,128px);line-height:.86;letter-spacing:-3px;text-transform:uppercase;margin-bottom:20px}
.h1-line1{color:var(--red);display:block}
.h1-line2{color:var(--black);display:block}
.h1-line3{-webkit-text-stroke:2px rgba(255,255,255,.15);color:transparent;display:block}
.hero-quote{font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:600;font-size:18px;color:var(--grey1);line-height:1.5;border-left:3px solid var(--blue2);padding-left:16px;margin-bottom:28px;max-width:440px}
.hero-desc{font-size:15px;line-height:1.8;color:var(--grey2);max-width:460px;margin-bottom:44px}


/* Hero stats strip */
.hero-stats{display:flex;margin-top:2px;padding-top:2px;border-top:1px solid var(--navy3);gap:0; padding-bottom: 25px;}
.hst{flex:1;padding-right:28px;border-right:1px solid var(--navy3);margin-right:28px}
.hst:last-child{border-right:none;margin-right:0;padding-right:0}
.hst-n{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:44px;color:var(--blue3);line-height:1;letter-spacing:-1.5px}
.hst-n sup{font-size:20px}
.hst-l{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--grey2);margin-top:4px}

/* Hero enter animation */
@keyframes hIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.hero-content>*{animation:hIn .7s ease both}
.hero-content>*:nth-child(1){animation-delay:.05s}
.hero-content>*:nth-child(2){animation-delay:.15s}
.hero-content>*:nth-child(3){animation-delay:.28s}
.hero-content>*:nth-child(4){animation-delay:.4s}
.hero-content>*:nth-child(5){animation-delay:.52s}
.hero-content>*:nth-child(6){animation-delay:.62s}

/* ═══════════════════════════════════════════
   USI INFO SECTION
═══════════════════════════════════════════ */

/* Style du conteneur principal */
.prochaines-editions {background-color: var(--red);padding: 40px;color: white;font-family: 'Barlow Condensed', sans-serif; border-radius: 16px;}
.prochaines-editions h2 {font-size: 2.5rem;font-weight: 900;text-transform: uppercase;margin-bottom: 30px;}
/* Grille des cartes */
.cards-container {display: flex;flex-direction: column;gap: 20px;max-width: 800px;}
/* Style de la carte individuelle */
.edition-card {display: flex;background: white;border-radius: 12px;overflow: hidden;color: #1a1a1a;transition: transform 0.3s ease;}
.edition-card:hover {transform: translateY(-5px);}
/* Image à gauche */
.card-image {width: 200px;min-width: 200px;background: #ddd;}
.card-image img {width: 100%;height: 100%;object-fit: cover;}
.gray-scale {filter: grayscale(100%);opacity: 0.7;}
/* Détails à droite */
.card-details {padding: 20px 30px;display: flex;flex-direction: column;justify-content: center;}
.card-details h3 {margin: 0;font-size: 1.8rem;font-weight: 800;}
.description {margin: 10px 0;color: #555;font-size: 1.1rem;}
.info-footer {font-weight: bold;color: #3081f1; /* Accent bleu */font-size: 1rem;}
.separator {margin: 0 10px;color: #ccc;}
.status {color: #888;font-style: italic;}

.sieu-right img{border: 2px solid var(--navy3);border-radius: 25px;}

/* ═══════════════════════════════════════════
   TOURNAMENT NEWS SECTION
═══════════════════════════════════════════ */
.tourn-news{background-color: var(--navy2);}
.carousel-container {position: relative;width: 100%; max-width: 1600px;max-height: 625px; aspect-ratio: 16/9;border-radius: 20px;overflow: hidden;box-shadow: 0 25px 80px rgba(0,0,0,0.6);}
.carousel-track {display: flex;transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); height: 100%;}
.carousel-slide {min-width: 100%;height: 100%;position: relative;}
.carousel-slide img {width: 100%;height: 100%;object-fit: cover;display: block;}
.slide-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);padding: 60px 40px 40px;color: white;transform: translateY(20px);opacity: 0;transition: all 0.5s ease;}
.carousel-slide.active .slide-overlay {transform: translateY(0);opacity: 1;}
.slide-title {font-family: 'Barlow Condensed', sans-serif;font-size: 2.2rem;font-weight: 700;margin-bottom: 10px;text-shadow: 2px 2px 4px rgba(0,0,0,0.5);}
.slide-desc {font-size: 1.1rem;opacity: 0.9;max-width: 600px;}
/* Navigation buttons */
.nav-btn {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255,255,255,0.15);backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.2);color: white;width: 50px;height: 50px;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;transition: all 0.3s ease;z-index: 10;}
.nav-btn:hover {background: rgba(255,255,255,0.3);transform: translateY(-50%) scale(1.1);}
.nav-btn.prev { left: 20px; }
.nav-btn.next { right: 20px; }
/* Progress bar */
.progress-container {position: absolute;bottom: 0;left: 0;right: 0;height: 4px;background: rgba(255,255,255,0.2);z-index: 10;}
.progress-bar {height: 100%;background: var(--red);width: 0%;transition: width 0.1s linear;}
/* Indicators */
.indicators {position: absolute;bottom: 25px;left: 50%;transform: translateX(-50%);display: flex;gap: 12px;z-index: 10;}
.indicator {width: 12px;height: 12px;border-radius: 50%;background: var(--white);cursor: pointer;transition: all 0.3s ease;border: 2px solid transparent;}
.indicator:hover {background: rgba(255,255,255,0.7);}
.indicator.active {background: var(--red);transform: scale(1.3);box-shadow: 0 0 15px rgba(255,255,255,0.5);}
/* Pause on hover */
.carousel-container:hover .progress-bar {animation-play-state: paused;}
/* Responsive */
@media (max-width: 768px) {
   .slide-title { font-size: 1.5rem; }
   .slide-desc { font-size: 0.9rem; }
   .nav-btn { width: 40px; height: 40px; font-size: 1.2rem; }
   .slide-overlay { padding: 40px 20px 30px; }
}
/* Ken Burns effect */
@keyframes kenBurns {0% { transform: scale(1); }100% { transform: scale(1.1); }}
.carousel-slide.active img {animation: kenBurns 15s ease-out forwards;}

/* ═══════════════════════════════════════════
   PROGRAMME SECTION
═══════════════════════════════════════════ */
/*Calendrier*/
.calendar-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;}
.card-jour {background: #fff;border: 1px solid #ddd;border-radius: 10px;overflow: hidden;transition: transform 0.3s ease;box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
.card-jour:hover {transform: translateY(-5px);}
.date-header {background: var(--red); /* Couleur ajustable */color: white;padding: 15px;text-align: center;font-size: 1.25rem;font-weight: bold;}
.card-jour .content {padding: 20px;}
.card-jour ul {list-style: none;padding: 0;margin: 0;}
.card-jour li {margin-bottom: 10px;font-size: 0.95rem;color: #555;border-bottom: 1px solid #eee;padding-bottom: 5px;}
.card-jour li:last-child {border-bottom: none;}

/* ── Header ── */
.bracket-header {display: flex;align-items: center;gap: 10px;margin-bottom: 28px;position: relative;z-index: 2;}
.bh-dot {width: 6px;height: 6px;border-radius: 50%;background: #DC2626;animation: blink 1.4s infinite;flex-shrink: 0;}
.bh-title {font-weight: 900;font-size: 13px;letter-spacing: 3px;text-transform: uppercase;color: #DC2626;}
.bh-sep {font-size: 10px;color: rgba(255,255,255,.3);}
.bh-sub {font-weight: 600;font-size: 11px;letter-spacing: 2px;text-transform: uppercase;color: rgba(255,255,255,.45);}
.bh-badge {margin-left: auto;background: #DC2626;color: #fff;font-weight: 900;font-size: 10px;letter-spacing: 2px;text-transform: uppercase;padding: 4px 10px;transform: rotate(1.5deg);}
/* ── Layout en 5 colonnes : ronde | conn | ronde | conn | ronde ── */
.bracket-grid {display: grid;grid-template-columns: 425px 60px 425px 60px 425px;align-items: start;position: relative;z-index: 2;}
/* ── Colonne de ronde ── */
.round-col {display: flex;flex-direction: column; padding-top: 15px;padding-bottom: 15px;}
.round-label {font-weight: 700;font-size: 14px;letter-spacing: 2.5px;text-transform: uppercase;color: rgba(255,255,255,.3);margin-bottom: 14px;text-align: center;} 
/* ── Match card ── */
.match-card {background: rgba(255,255,255,.03);border: 1px solid rgba(255,255,255,.07);border-left: 3px solid rgba(26,79,196,.4);position: relative;transition: border-color .2s, background .2s;}
.match-card:hover {border-color: rgba(26,79,196,.7);border-left-color: #1A4FC4;background: rgba(26,79,196,.06);}
.match-card.winner-match {border-left-color: #DC2626;}
/* ── Ligne d'équipe ── */
.team-row {display: flex;align-items: center;gap: 0;padding: 8px 10px;cursor: pointer;transition: background .15s;}
.team-row:first-of-type {border-bottom: 1px solid rgba(255,255,255,.06);}
.team-row:hover { background: rgba(255,255,255,.04); }
.team-seed {font-weight: 900;font-size: 10px;color: rgba(255,255,255,.25);width: 16px;flex-shrink: 0;} 
.team-name {font-weight: 700;font-size: 14px;letter-spacing: .5px;text-transform: uppercase;color: rgba(255,255,255,.7);flex: 1;}
.team-score {font-weight: 900;font-size: 14px;color: rgba(255,255,255,.3);min-width: 18px;text-align: right;}
.team-row.winner .team-name  { color: #fff; }
.team-row.winner .team-score { color: #4A7FE0; }
.team-row.loser  .team-name  { color: rgba(255,255,255,.3); }
.match-num {position: absolute;top: 4px;right: 6px;font-size: 9px;letter-spacing: 1.5px;color: rgba(255,255,255,.15);font-weight: 700;}
/* ── Espaceurs entre les matchs ── */
.gap-sm  { height: 16px; }
.gap-md  { height: 56px; }
.gap-lg  { height: 126px; }
.gap-sf  { height: 76px;  }
/* ── Colonne connecteur ── */
.conn-col {position: relative;align-self: stretch;}
.conn-col svg {position: absolute;top: 30px;left: 0;width: 60px;height: calc(100% - 30px);}
/* ── Finale ── */
.final-card {background: rgba(26,79,196,.08);border: 1px solid rgba(26,79,196,.3);border-left: 3px solid #DC2626;text-align: center;padding: 18px 12px;}
.final-label {font-weight: 700;font-size: 9px;letter-spacing: 3px;text-transform: uppercase;color: #DC2626;margin-bottom: 10px;} 
.final-teams {display: flex;align-items: center;justify-content: center;gap: 10px;margin-bottom: 10px;} 
.final-team {font-weight: 900;font-size: 16px;text-transform: uppercase;color: #fff;}
.final-vs {font-size: 10px;color: rgba(255,255,255,.35);font-weight: 600;}
 .final-status {font-size: 10px;letter-spacing: 2px;text-transform: uppercase;color: #4A7FE0;font-weight: 600;} 
/* ── Champion ── */
.champion-box {background: rgba(220,38,38,.08);border: 1px solid rgba(220,38,38,.25);border-left: 3px solid #DC2626;padding: 14px 12px;text-align: center;margin-top: 12px;}
.champ-label {font-size: 9px;letter-spacing: 3px;text-transform: uppercase;color: #DC2626;font-weight: 700;margin-bottom: 6px;} 
.champ-name {font-weight: 900;font-size: 18px;text-transform: uppercase;color: #fff;letter-spacing: 1px;} 
.champ-trophy {font-size: 11px;letter-spacing: 1.5px;color: rgba(255,255,255,.4);margin-top: 4px;font-weight: 600;}
/* ── Animations ── */
@keyframes blink {0%, 100% { opacity: 1;  }50%{ opacity: .3; }}

/* ═══════════════════════════════════════════
   USI TEAM SECTION
═══════════════════════════════════════════ */
.usi-team{background-color: var(--navy2);}

.team-grid {display: grid;grid-template-columns: repeat(4, 6fr);gap: 16px;max-width: 1280px;margin: 0 auto;}
.team-card {border-radius: 16px;overflow: hidden;border: 0.5px solid rgba(0,0,0,0.1);background: #ffffff;display: flex;flex-direction: column;transition: transform 0.18s ease;cursor: default;}
.team-card:hover {transform: translateY(-4px);} 
.card-header {height: 90px;display: flex;align-items: center;justify-content: center;}
.logo-circle {width: 75px;height: 75px;border-radius: 50%;background: #ffffff;display: flex;align-items: center;justify-content: center;font-size: 22px;font-family: 'Bebas Neue', sans-serif;letter-spacing: 1px;border: 3px solid rgba(255,255,255,0.5);}
.logo-circle img{width: 75%;height: 75%;object-fit: contain;}
.card-body {padding: 12px 14px 14px;display: flex;flex-direction: column;gap: 8px;flex: 1;}.team-name {font-family: 'Bebas Neue', sans-serif;font-size: 18px;letter-spacing: 1.5px;line-height: 1.1;}
.team-desc {font-size: 11.5px;color: #777;line-height: 1.45;}
.divider {height: 0.5px;background: rgba(0,0,0,0.08);}
.players-label {font-size: 10px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;color: #aaa;}
.players-list {display: flex;flex-wrap: wrap;gap: 4px;}
.player-tag {font-size: 10.5px;font-weight: 600;padding: 2px 8px;border-radius: 20px;}
 
/* ---- Couleurs par équipe ---- */

/* Bleu */
.c1 .card-header { background: linear-gradient(135deg,#378ADD, #185FA5); }
.c1 .logo-circle  { color: blue; }
.c1 .team-name    { color: blue; }
.c1 .player-tag   { background: #FCEBEB; color: blue; }
/* Gris */
.c2 .card-header { background: linear-gradient(135deg, var(--grey1), var(--grey3)); }
.c2 .logo-circle  { color: gray; }
.c2 .team-name    { color: gray; }
.c2 .player-tag   { background: #E6F1FB; color: gray; }
/* Rouge */
.c3 .card-header { background: linear-gradient(135deg, #E24B4A, #af1212); }
.c3 .logo-circle  { color: red; }
.c3 .team-name    { color: red; }
.c3 .player-tag   { background: #E1F5EE; color: red; }
/* Noir */
.c4 .card-header { background: linear-gradient(135deg, gray, black); }
.c4 .logo-circle  { color: black; }
.c4 .team-name    { color: black; }
.c4 .player-tag   { background: #EEEDFE; color: black; }
/* Violet */
.c5 .card-header { background: linear-gradient(135deg, #8A2BE2, #4B0082); }
.c5 .logo-circle  { color: blueviolet; }
.c5 .team-name    { color: blueviolet; }
.c5 .player-tag   { background: #FAEEDA; color: blueviolet; }
/* Jaune */
.c6 .card-header { background: linear-gradient(135deg, #EF9F27, yellow); }
.c6 .logo-circle  { color: yellow; }
.c6 .team-name    { color: yellow; }
.c6 .player-tag   { background: #FBEAF0; color: rgb(223, 201, 2); }
/* Marron */
.c7 .card-header { background: linear-gradient(135deg, #D85A30, #993C1D); }
.c7 .logo-circle  { color: #712B13; }
.c7 .team-name    { color: #712B13; }
.c7 .player-tag   { background: #FAECE7; color: #4A1B0C; }
/* Blanc */
.c8 .card-header { background: linear-gradient(135deg, rgb(207, 207, 207), white); }
.c8 .logo-circle  { color: wheat } 
.c8 .team-name    { color: black; }
.c8 .player-tag   { background: gray; color: whitesmoke; }
 
@media (max-width: 700px) {.team-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 400px) {.team-grid { grid-template-columns: 1fr; }}