:root { --primary-blue: #4A90E2;
--primary-green: #7ED321;
--primary-orange: #F5A623;
--primary-red: #D0021B;
--primary-purple: #9013FE;
--primary-pink: #E91E63; --pastel-blue: #E3F2FD;
--pastel-green: #E8F5E8;
--pastel-orange: #FFF3E0;
--pastel-purple: #F3E5F5;
--pastel-pink: #FCE4EC; --gradient-rainbow: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7);
--gradient-sunset: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-forest: linear-gradient(135deg, #7ED321 0%, #4A90E2 100%);
--gradient-fire: linear-gradient(135deg, #F5A623 0%, #D0021B 100%); --shadow-soft: 0 4px 15px rgba(0,0,0,0.1);
--shadow-medium: 0 8px 25px rgba(0,0,0,0.15);
--shadow-strong: 0 15px 35px rgba(0,0,0,0.2);
--shadow-glow: 0 0 20px rgba(74, 144, 226, 0.3); --bounce-duration: 0.6s;
--slide-duration: 0.4s;
--fade-duration: 0.3s;
} @keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0,0,0);
}
40%, 43% {
transform: translate3d(0,-15px,0);
}
70% {
transform: translate3d(0,-7px,0);
}
90% {
transform: translate3d(0,-2px,0);
}
}
@keyframes slideInUp {
from {
transform: translate3d(0,100%,0);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translate3d(0,-100%,0);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%,0,0);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translate3d(100%,0,0);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
opacity: 1;
}
}
@keyframes fadeInScale {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0);
}
15% {
transform: rotateZ(-15deg);
}
20% {
transform: rotateZ(10deg);
}
25% {
transform: rotateZ(-10deg);
}
30% {
transform: rotateZ(6deg);
}
35% {
transform: rotateZ(-4deg);
}
40%, 100% {
transform: rotateZ(0);
}
}
@keyframes rainbow {
0% { color: #FF6B6B; }
16% { color: #4ECDC4; }
32% { color: #45B7D1; }
48% { color: #96CEB4; }
64% { color: #FFEAA7; }
80% { color: #DDA0DD; }
100% { color: #FF6B6B; }
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1);
}
} .tournoi-e-bracket-container {
background: var(--gradient-rainbow);
border-radius: 25px;
padding: 30px;
margin: 20px auto;
max-width: 1200px;
box-shadow: var(--shadow-strong);
position: relative;
overflow: hidden;
animation: slideInUp var(--slide-duration) ease-out;
}
.tournoi-e-bracket-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.3;0.1" dur="2s" repeatCount="indefinite"/></circle><circle cx="80" cy="40" r="1.5" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.4;0.1" dur="3s" repeatCount="indefinite"/></circle><circle cx="40" cy="80" r="1" fill="white" opacity="0.1"><animate attributeName="opacity" values="0.1;0.5;0.1" dur="2.5s" repeatCount="indefinite"/></circle></svg>');
pointer-events: none;
z-index: 1;
}
.tournoi-e-bracket-container > * {
position: relative;
z-index: 2;
} .tournoi-e-bracket-header {
text-align: center;
margin-bottom: 30px;
animation: slideInDown var(--slide-duration) ease-out;
}
.tournoi-e-bracket-header h3 {
font-size: 2.5rem;
font-weight: 800;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin: 0 0 15px 0;
animation: bounce var(--bounce-duration) ease-out 0.5s;
position: relative;
}
.tournoi-e-bracket-header h3::before {
content: '🏆';
font-size: 3rem;
position: absolute;
left: -60px;
top: -10px;
animation: float 3s ease-in-out infinite;
}
.tournoi-e-bracket-header h3::after {
content: '🎯';
font-size: 3rem;
position: absolute;
right: -60px;
top: -10px;
animation: float 3s ease-in-out infinite 1.5s;
}
.tournoi-e-bracket-info {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
animation: fadeInScale var(--fade-duration) ease-out 0.8s;
}
.tournoi-e-bracket-status {
background: white;
color: var(--primary-blue);
padding: 12px 25px;
border-radius: 50px;
font-weight: 700;
font-size: 1.1rem;
box-shadow: var(--shadow-medium);
animation: pulse 2s ease-in-out infinite;
position: relative;
overflow: hidden;
}
.tournoi-e-bracket-status::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.5s;
}
.tournoi-e-bracket-status:hover::before {
left: 100%;
}
.tournoi-e-bracket-participants {
background: rgba(255,255,255,0.9);
color: var(--primary-purple);
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
box-shadow: var(--shadow-soft);
animation: wiggle 2s ease-in-out infinite 3s;
} .tournoi-e-bracket-waiting {
background: linear-gradient(135deg, var(--pastel-blue), var(--pastel-green));
border-radius: 20px;
padding: 40px;
text-align: center;
box-shadow: var(--shadow-medium);
animation: slideInUp var(--slide-duration) ease-out 0.3s;
position: relative;
overflow: hidden;
}
.tournoi-e-waiting-icon {
font-size: 4rem;
margin-bottom: 20px;
animation: pulse 1.5s ease-in-out infinite;
display: inline-block;
}
.tournoi-e-bracket-waiting h4 {
font-size: 2rem;
color: var(--primary-blue);
margin: 0 0 30px 0;
font-weight: 700;
animation: rainbow 3s ease-in-out infinite;
} .tournoi-e-participants-list {
background: white;
border-radius: 15px;
padding: 25px;
margin: 20px 0;
box-shadow: var(--shadow-soft);
animation: fadeInScale var(--fade-duration) ease-out 0.6s;
}
.tournoi-e-participants-list h5 {
color: var(--primary-purple);
font-size: 1.3rem;
margin: 0 0 20px 0;
font-weight: 600;
text-align: center;
}
.tournoi-e-participants-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
list-style: none;
padding: 0;
margin: 0;
}
.tournoi-e-participant-item {
background: var(--gradient-sunset);
color: white;
padding: 15px 20px;
border-radius: 12px;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
animation: slideInLeft var(--slide-duration) ease-out;
position: relative;
overflow: hidden;
}
.tournoi-e-participant-item:nth-child(even) {
animation: slideInRight var(--slide-duration) ease-out;
}
.tournoi-e-participant-item::before {
content: '🎮';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
opacity: 0.7;
}
.tournoi-e-participant-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-strong);
}
.tournoi-e-participant-name {
font-weight: 700;
font-size: 1.1rem;
display: block;
margin-bottom: 5px;
}
.tournoi-e-participant-date {
opacity: 0.8;
font-size: 0.9rem;
} .tournoi-e-progress {
margin-top: 25px;
animation: slideInUp var(--slide-duration) ease-out 0.9s;
}
.tournoi-e-progress-bar {
background: rgba(255,255,255,0.3);
border-radius: 25px;
height: 20px;
overflow: hidden;
position: relative;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.tournoi-e-progress-fill {
background: var(--gradient-fire);
height: 100%;
border-radius: 25px;
transition: width 1s ease-out;
position: relative;
overflow: hidden;
}
.tournoi-e-progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: slideInRight 2s ease-in-out infinite;
}
.tournoi-e-progress-text {
display: block;
text-align: center;
margin-top: 10px;
font-weight: 600;
color: var(--primary-blue);
font-size: 1.1rem;
} .tournoi-e-user-match {
background: var(--gradient-sunset);
color: white;
padding: 30px;
border-radius: 20px;
margin: 30px 0;
box-shadow: var(--shadow-strong);
animation: slideInUp var(--slide-duration) ease-out;
position: relative;
overflow: hidden;
}
.tournoi-e-user-match::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 20px 20px;
animation: float 10s linear infinite;
pointer-events: none;
}
.tournoi-e-user-match h4 {
font-size: 1.8rem;
margin: 0 0 25px 0;
text-align: center;
animation: bounce var(--bounce-duration) ease-out 0.5s;
}
.match-participants {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.participant {
background: rgba(255,255,255,0.15);
padding: 20px;
border-radius: 15px;
text-align: center;
flex: 1;
min-width: 150px;
transition: all 0.3s ease;
animation: fadeInScale var(--fade-duration) ease-out;
}
.participant:hover {
background: rgba(255,255,255,0.25);
transform: scale(1.05);
}
.participant.current-user {
background: var(--gradient-fire);
box-shadow: var(--shadow-glow);
animation: pulse 2s ease-in-out infinite;
}
.participant-name {
font-weight: 700;
font-size: 1.2rem;
display: block;
margin-bottom: 10px;
}
.participant-score {
font-size: 2rem;
font-weight: 800;
color: var(--primary-orange);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.vs-separator {
font-size: 2rem;
font-weight: 800;
color: var(--primary-orange);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: pulse 1.5s ease-in-out infinite;
margin: 0 10px;
} .tournoi-e-btn {
background: var(--gradient-forest);
color: white;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: var(--shadow-medium);
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
margin: 5px;
}
.tournoi-e-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.3);
border-radius: 50%;
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.tournoi-e-btn:hover::before {
width: 300px;
height: 300px;
}
.tournoi-e-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: var(--shadow-strong);
}
.tournoi-e-btn:active {
transform: translateY(0) scale(0.98);
}
.tournoi-e-btn-primary {
background: var(--gradient-sunset);
animation: pulse 2s ease-in-out infinite;
}
.tournoi-e-btn-secondary {
background: var(--gradient-ocean);
}
.tournoi-e-btn-success {
background: var(--gradient-forest);
}
.tournoi-e-btn-warning {
background: var(--gradient-fire);
} .play-interface {
background: rgba(255,255,255,0.1);
border-radius: 15px;
padding: 25px;
margin-top: 20px;
animation: slideInUp var(--slide-duration) ease-out 0.3s;
}
.exercise-link {
text-align: center;
margin-bottom: 20px;
}
.score-submission {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}
.score-input {
background: white;
border: 3px solid var(--primary-blue);
border-radius: 25px;
padding: 12px 20px;
font-size: 1.2rem;
font-weight: 600;
text-align: center;
width: 120px;
transition: all 0.3s ease;
}
.score-input:focus {
outline: none;
border-color: var(--primary-orange);
box-shadow: var(--shadow-glow);
transform: scale(1.05);
} .tournoi-e-champion {
background: var(--gradient-rainbow);
color: white;
text-align: center;
padding: 40px;
border-radius: 25px;
margin: 30px 0;
box-shadow: var(--shadow-strong);
animation: slideInUp var(--slide-duration) ease-out;
position: relative;
overflow: hidden;
}
.tournoi-e-champion::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,10 60,35 85,35 67,52 73,77 50,65 27,77 33,52 15,35 40,35" fill="gold" opacity="0.1"><animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="10s" repeatCount="indefinite"/></polygon></svg>');
background-size: 50px 50px;
pointer-events: none;
}
.tournoi-e-champion-icon {
font-size: 5rem;
margin-bottom: 20px;
animation: bounce var(--bounce-duration) ease-out infinite;
}
.tournoi-e-champion h3 {
font-size: 2.5rem;
margin: 0 0 20px 0;
animation: rainbow 2s ease-in-out infinite;
}
.tournoi-e-champion-name {
font-size: 2rem;
font-weight: 800;
margin: 20px 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: pulse 1.5s ease-in-out infinite;
}  @media (max-width: 768px) {
.tournoi-e-bracket-container {
padding: 20px;
margin: 10px;
border-radius: 20px;
}
.tournoi-e-bracket-header h3 {
font-size: 2rem;
}
.tournoi-e-bracket-header h3::before,
.tournoi-e-bracket-header h3::after {
display: none;
}
.tournoi-e-participants-grid {
grid-template-columns: 1fr;
}
.match-participants {
flex-direction: column;
gap: 10px;
}
.vs-separator {
transform: rotate(90deg);
margin: 10px 0;
}
.score-submission {
flex-direction: column;
gap: 10px;
}
} @media (max-width: 480px) {
.tournoi-e-bracket-container {
padding: 15px;
margin: 5px;
border-radius: 15px;
}
.tournoi-e-bracket-header h3 {
font-size: 1.5rem;
}
.tournoi-e-bracket-info {
flex-direction: column;
gap: 10px;
}
.tournoi-e-user-match {
padding: 20px;
}
.tournoi-e-btn {
padding: 12px 20px;
font-size: 1rem;
width: 100%;
margin: 5px 0;
}
.participant {
min-width: auto;
}
.tournoi-e-champion-icon {
font-size: 3rem;
}
.tournoi-e-champion h3 {
font-size: 1.8rem;
}
.tournoi-e-champion-name {
font-size: 1.5rem;
}
}  .tournoi-e-bracket-container::after {
content: '⭐ 🌟 ✨ 🎯 🏆 🎮 🎪 🎨';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 2rem;
opacity: 0.1;
pointer-events: none;
z-index: 1;
animation: float 15s linear infinite;
white-space: nowrap;
overflow: hidden;
} .tournoi-e-btn,
.tournoi-e-participant-item,
.participant {
position: relative;
}
.tournoi-e-btn::after,
.tournoi-e-participant-item::after,
.participant::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
border-radius: inherit;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
.tournoi-e-btn:hover::after,
.tournoi-e-participant-item:hover::after,
.participant:hover::after {
opacity: 1;
}  .loading {
position: relative;
overflow: hidden;
}
.loading::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: slideInRight 1.5s ease-in-out infinite;
} .success {
animation: bounce var(--bounce-duration) ease-out;
background: var(--gradient-forest) !important;
} .error {
animation: wiggle 0.5s ease-in-out;
background: var(--gradient-fire) !important;
}  .tournoi-e-btn:focus,
.score-input:focus {
outline: 3px solid var(--primary-orange);
outline-offset: 2px;
} @media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
} @media (prefers-contrast: high) {
:root {
--shadow-soft: 0 4px 15px rgba(0,0,0,0.5);
--shadow-medium: 0 8px 25px rgba(0,0,0,0.6);
--shadow-strong: 0 15px 35px rgba(0,0,0,0.7);
}
}  .theme-noel .tournoi-e-bracket-container {
background: linear-gradient(45deg, #c41e3a, #228b22, #ffd700);
}
.theme-noel .tournoi-e-bracket-container::after {
content: '🎄 ❄️ 🎅 ⭐ 🎁 🔔 ☃️ 🦌';
} .theme-halloween .tournoi-e-bracket-container {
background: linear-gradient(45deg, #ff6600, #800080, #000000);
}
.theme-halloween .tournoi-e-bracket-container::after {
content: '🎃 👻 🦇 🕷️ 🍭 🌙 ⚡ 🔮';
} .theme-printemps .tournoi-e-bracket-container {
background: linear-gradient(45deg, #98fb98, #ffb6c1, #87ceeb);
}
.theme-printemps .tournoi-e-bracket-container::after {
content: '🌸 🦋 🌺 🐝 🌷 🌻 🌈 ☀️';
}