/* ===== Écran du Colisée : grande scène d'arène, portes, boss du mois, classement, médailles, armoire, podium =====
   Fichier dédié, chargé après style.css et colisee-boss.css. Direction artistique « Colisée » : marbre blanc et or,
   arches, gradins, torches ; l'arène s'illumine quand les portes sont ouvertes (classe .ouvert sur #co-hero). */

/* --- Grande scène d'en-tête --- */
.colisee-page .co-hero { position: relative; display: flex; align-items: flex-start; min-height: 300px; margin: -24px -24px 20px; padding: 40px 26px 22px; overflow: hidden; border-radius: var(--rayon) var(--rayon) 0 0; isolation: isolate; }
.co-hero-decor, .co-hero-decor > span { position: absolute; display: block; }
.co-hero-decor { inset: 0; z-index: -1; }
.co-ciel { inset: 0; background: linear-gradient(180deg, #1b1840 0%, #4a2a52 45%, #b5603a 82%, #e09a52 100%); transition: filter 0.6s; }
.co-hero.ouvert .co-ciel { background: linear-gradient(180deg, #2a2050 0%, #8a4a3a 40%, #f2a64a 78%, #ffd98a 100%); }
.co-astre { right: 9%; top: 18px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #fff6d8 0 40%, #ffd98a 60%, transparent 72%); box-shadow: 0 0 40px 10px #ffd98a55; animation: co-respire 5s ease-in-out infinite; }
/* Velum : les toiles tendues au-dessus des gradins, qui ondulent */
.co-hero-decor .co-velum { left: -2%; right: -2%; top: 0; height: 26px; display: flex; }
.co-velum i { flex: 1; margin: 0 1px; background: linear-gradient(180deg, #e8d7b0, #c9a86a); clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 70%); transform-origin: top; animation: co-velum 4s ease-in-out infinite alternate; }
.co-velum i:nth-child(even) { background: linear-gradient(180deg, #a8323a, #7a1f28); animation-delay: -2s; }
/* Gradins en arches (marbre doré, ouvertures sombres), en deux étages courbés */
.co-gradins { left: -6%; right: -6%; border-radius: 50% 50% 0 0 / 22px 22px 0 0; }
.co-gradins.haut { bottom: 92px; height: 54px; background: radial-gradient(ellipse 7px 12px at 50% 100%, #2b1d10 96%, transparent 100%) 0 100% / 22px 72% repeat-x, linear-gradient(180deg, #f4ead0, #d9c38e); box-shadow: 0 -2px 0 #fff6, 0 6px 14px #0006; }
.co-gradins.bas { bottom: 34px; height: 64px; background: radial-gradient(ellipse 9px 16px at 50% 100%, #24170c 96%, transparent 100%) 0 100% / 28px 76% repeat-x, linear-gradient(180deg, #efe2c0, #c9ac6c); box-shadow: 0 -2px 0 #fff6, 0 8px 18px #0007; }
.co-arene { left: 0; right: 0; bottom: 0; height: 38px; background: linear-gradient(180deg, #e2c48a, #b8925a); }
.co-poussiere { left: 0; right: 0; bottom: 0; height: 60px; background: radial-gradient(ellipse at 30% 100%, #ffe2a855, transparent 60%), radial-gradient(ellipse at 75% 100%, #ffe2a844, transparent 55%); animation: co-poussiere 8s ease-in-out infinite alternate; }
/* Torches : flamme qui danse, lueur plus vive quand l'arène est ouverte */
.co-torche { bottom: 36px; width: 8px; height: 46px; border-radius: 2px; background: linear-gradient(90deg, #5a3a1a, #8a5a2a, #5a3a1a); }
.co-torche.g { left: 4%; } .co-torche.d { right: 4%; }
.co-torche i { position: absolute; left: 50%; bottom: 100%; width: 18px; height: 28px; margin-left: -9px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 70%, #fff3b0 0 18%, #ffb22e 45%, #ff5a1a 75%, transparent 80%); filter: drop-shadow(0 0 10px #ff9a3a); transform-origin: 50% 100%; animation: co-flamme 0.45s ease-in-out infinite alternate; }
.co-hero.ouvert .co-torche i { filter: drop-shadow(0 0 18px #ffb84a) brightness(1.15); }
/* Texte de la scène */
.co-hero-texte { position: relative; max-width: 620px; text-shadow: 0 2px 8px #000a; } /* dans le ciel, au-dessus des gradins */
.co-hero-sur { margin: 0; color: #ffd98a; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.co-hero h1 { margin: 2px 0 4px; font-family: Cinzel, Georgia, serif; font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: 0.04em; background: linear-gradient(180deg, #fff6d8, #f5c542 55%, #c9971c); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 10px #0006; }
.co-hero .sous-titre { margin: 0 0 10px; color: #f4ead0; }
.co-statut { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; border: 1px solid #ffffff44; background: #0b1430cc; color: var(--texte); }
.co-statut:empty { display: none; }
.co-statut.ouvert { border-color: #ffb84a; color: #ffd98a; box-shadow: 0 0 14px #ffb84a66; animation: co-respire 2.4s ease-in-out infinite; }
.co-statut.test { border-color: var(--bleu); color: #a9c8ff; }
@keyframes co-respire { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes co-velum { from { transform: scaleY(0.9) skewX(-2deg); } to { transform: scaleY(1.05) skewX(2deg); } }
@keyframes co-poussiere { from { transform: translateX(-3%); opacity: 0.6; } to { transform: translateX(3%); opacity: 1; } }
@keyframes co-flamme { from { transform: scale(0.92, 1) rotate(-3deg); } to { transform: scale(1.06, 1.12) rotate(3deg); } }

/* --- Mise en page : encart du podium à gauche, contenu à droite --- */
.colisee-grille { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 20px; align-items: start; }
.colisee-page h2 { font-family: Cinzel, Georgia, serif; }

/* --- Les portes de l'arène (accès, compte à rebours, entrée) --- */
.co-acces { position: relative; margin-bottom: 18px; padding: 18px 18px 18px 22px; border-radius: var(--rayon); border: 1px solid #c9971c; background: linear-gradient(135deg, #1a1530, #0b1430 60%); box-shadow: inset 4px 0 0 #c9971c; }
.co-acces.ouvert { border-color: #ffb84a; box-shadow: inset 4px 0 0 #ffb84a, 0 0 24px #ffb84a33; }
.co-acces.test { border-color: var(--bleu); box-shadow: inset 4px 0 0 var(--bleu); }
.co-acces p { margin-top: 0; }
.co-acces .co-acces-titre { margin: 0 0 6px; color: #ffd98a; font-family: Cinzel, Georgia, serif; font-weight: 900; letter-spacing: 0.04em; }
.co-acces .decompte-grand { display: block; margin: 6px 0 14px; font-size: clamp(0.95rem, 2.2vw, 1.12rem); font-weight: 900; color: var(--or); font-variant-numeric: tabular-nums; text-shadow: 0 0 14px #f5c54244; }

/* --- Boss du mois : médaillon, pastille de rang, étiquettes de règle --- */
.colisee-page .co-saison { padding: 18px; }
.colisee-page .co-boss { gap: 12px; }
.colisee-page .co-boss-carte { position: relative; align-items: center; gap: 8px; padding: 16px 12px 14px; text-align: center; border-radius: 12px; background: linear-gradient(180deg, #0b0a1acc, #050816ee); transition: transform 0.2s, box-shadow 0.2s; }
.colisee-page .co-boss-carte:hover { transform: translateY(-3px); box-shadow: 0 10px 24px #0008; }
.co-boss-rang { padding: 2px 10px; border-radius: 999px; background: #ffffff14; color: var(--texte-doux); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.co-boss-carte.final .co-boss-rang { background: #b3261e; color: #fff; box-shadow: 0 0 12px #ff3b3b66; }
.co-boss-medaillon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a2140, #0b0a1a 70%); border: 2px solid #c9971c; box-shadow: 0 0 0 4px #c9971c22, 0 0 22px #f9731633; }
.co-boss-carte.final .co-boss-medaillon { border-color: #ff5d5d; box-shadow: 0 0 0 4px #ff5d5d22, 0 0 26px #ff3b3b55; animation: co-menace 2.6s ease-in-out infinite; }
.colisee-page .co-boss-carte .co-boss-icone { font-size: 2.3rem; filter: drop-shadow(0 2px 6px #000); }
@keyframes co-menace { 0%, 100% { box-shadow: 0 0 0 4px #ff5d5d22, 0 0 18px #ff3b3b44; } 50% { box-shadow: 0 0 0 6px #ff5d5d33, 0 0 30px #ff3b3b77; } }
.colisee-page .co-boss-carte strong { font-family: Cinzel, Georgia, serif; font-size: 1.02rem; line-height: 1.25; }
.colisee-page .co-boss-carte small { font-style: italic; }
.colisee-page .co-boss-regle { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: auto; }
.co-boss-etiquette { padding: 2px 8px; border-radius: 6px; background: #ffffff10; border: 1px solid #ffffff1f; font-size: 0.74rem; font-weight: 700; color: var(--texte); }
.co-boss-voir.btn-secondaire { margin-top: 4px; padding: 6px 12px; font-size: 0.82rem; }

/* --- Classement de la semaine : rangs en médaillons --- */
.co-classement td:first-child { width: 3em; }
.co-rang { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--fond); border: 1px solid var(--bord); font-weight: 800; font-variant-numeric: tabular-nums; }
.co-classement .rang-1 .co-rang { background: linear-gradient(135deg, #fff1b0, #f5c542 50%, #b8860b); border-color: #f5c542; color: #2a1206; box-shadow: 0 0 10px #f5c54266; }
.co-classement .rang-2 .co-rang { background: linear-gradient(135deg, #ffffff, #c0c7d6 55%, #8a93a6); border-color: #c0c7d6; color: #1a2147; }
.co-classement .rang-3 .co-rang { background: linear-gradient(135deg, #f2c49a, #cd8a4a 55%, #8a5428); border-color: #cd8a4a; color: #2a1206; }
.co-classement .rang-1 td { font-weight: 800; }

/* --- Médailles : une carte par métal --- */
.co-medailles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 8px; }
.co-medaille { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; text-align: center; border-radius: 12px; border: 1px solid var(--bord); background: var(--fond); }
.co-medaille-icone { font-size: 2.4rem; filter: drop-shadow(0 3px 6px #0008); }
.co-medaille strong { font-family: Cinzel, Georgia, serif; font-size: 0.92rem; }
.co-medaille-seuil { color: var(--texte-doux); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.co-medaille.or { border-color: #f5c54299; background: linear-gradient(180deg, #f5c54218, var(--fond)); }
.co-medaille.argent { border-color: #c0c7d699; background: linear-gradient(180deg, #c0c7d614, var(--fond)); }
.co-medaille.bronze { border-color: #cd8a4a99; background: linear-gradient(180deg, #cd8a4a16, var(--fond)); }
.co-medaille.obtenue { box-shadow: 0 0 16px #f5c54233; }
.co-medaille-obtenue { margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: #2ecc7122; color: var(--vert); font-size: 0.74rem; font-weight: 800; }

/* --- Armoire à trophées : médailles posées sur une étagère de marbre --- */
.armoire { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 14px 14px 22px; border-radius: 12px; background: linear-gradient(180deg, #1a1530, #0b1430); border: 1px solid #c9971c55; }
.armoire::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 8px; border-radius: 3px; background: linear-gradient(180deg, #f4ead0, #c9ac6c); box-shadow: 0 4px 10px #0008; }
.trophee { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 14px; border-radius: 10px; background: #ffffff08; border: 1px solid var(--bord); text-align: center; }
.trophee.or { border-color: #f5c542; box-shadow: 0 0 14px #f5c54233; }
.trophee.argent { border-color: #c0c7d6; }
.trophee.bronze { border-color: #cd8a4a; }
.trophee-icone { font-size: 2.4rem; filter: drop-shadow(0 3px 6px #0008); }
.trophee-date { font-size: 0.8rem; color: var(--texte-doux); }
.trophee-points { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Encart de gauche : plaque de marbre et podium en marches --- */
.co-podium { position: sticky; top: 16px; padding: 16px; border-radius: var(--rayon); color: #1a2147; border: 1px solid #e8d28a; background: linear-gradient(160deg, #ffffff, #f4ecd8); box-shadow: 0 10px 28px #0006; }
.co-podium h2 { margin: 0 0 2px; font-size: 1.1rem; color: #8a6510; text-align: center; }
.co-podium .note { color: #4a5275; }
.podium-date { margin: 0 0 14px; font-size: 0.82rem; color: #4a5275; text-align: center; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; }
.podium-place { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; text-align: center; }
.podium-place.deuxieme { order: 1; } .podium-place.empereur { order: 2; } .podium-place.troisieme { order: 3; }
.podium-icone { font-size: 1.5rem; }
.podium-place.empereur .podium-icone { font-size: 2rem; filter: drop-shadow(0 0 8px #f5c542aa); animation: co-couronne 3s ease-in-out infinite; }
@keyframes co-couronne { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.podium-titre { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6510; }
.podium-place.empereur .podium-titre { font-family: Cinzel, Georgia, serif; font-size: 0.72rem; }
.podium-nom { max-width: 100%; font-weight: 800; font-size: 0.85rem; line-height: 1.15; overflow-wrap: anywhere; }
.podium-points { font-size: 0.75rem; font-weight: 700; color: #4a5275; font-variant-numeric: tabular-nums; }
.podium-marche { display: grid; place-items: center; width: 100%; margin-top: 4px; border-radius: 6px 6px 0 0; color: #fff; font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: 1.2rem; text-shadow: 0 1px 3px #0006; }
.podium-place.empereur .podium-marche { height: 64px; background: linear-gradient(115deg, #b8860b, #f5c542 45%, #fff4c2 55%, #f5c542 70%, #b8860b); background-size: 220% 100%; animation: reflet-ticket 5s ease-in-out infinite; }
.podium-place.deuxieme .podium-marche { height: 46px; background: linear-gradient(180deg, #d6dbe6, #9aa3b6); }
.podium-place.troisieme .podium-marche { height: 34px; background: linear-gradient(180deg, #e2a774, #a8662f); }

@media (max-width: 700px) {
  .colisee-grille { grid-template-columns: 1fr; }
  .co-podium { position: static; }
}
@media (max-width: 420px) { .co-medailles { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .colisee-page .co-hero { min-height: 300px; margin: -18px -18px 16px; padding: 36px 16px 16px; }
  .co-torche { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .co-hero-decor *, .co-statut, .co-boss-carte.final .co-boss-medaillon, .podium-place.empereur .podium-icone, .podium-place.empereur .podium-marche { animation: none !important; }
}