/* =========================================================================
   Classement (Panthéon) + Gazette — podium animé & gazette vivante.
   Porté À L'IDENTIQUE depuis le handoff « Gazette et classement.dc.html »
   (blocs #5a / #5b). TOUT est scopé sous .classement-page / .gazette-page
   pour ne jamais fuiter (.grow / .med / .rim / .podcard restaient globaux
   dans la maquette). Chargé APRÈS parchemin.css → ses règles scopées gagnent.
   Valeurs (couleurs, keyframes, timings) recopiées telles quelles de la source.
   ========================================================================= */

/* La police serif de la maquette (.c-serif) == var(--serif) du projet
   ("Palatino Linotype","Book Antiqua",Palatino,Georgia,serif). */
.classement-page .cserif,
.gazette-page .cserif { font-family: var(--serif); }

/* ---- Carte parchemin commune (source .card) ---- */
.classement-page .cls-card,
.gazette-page .gaz-card {
  position: relative;
  background: #f3e6c2;
  background-image: radial-gradient(rgba(138,109,47,.05) 1px, transparent 1.4px);
  background-size: 8px 8px;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  padding: 34px 38px 40px;
  color: #2a1d0e;
}

/* ---- Hero (pill / titre / sous-titre / ornement) ---- */
.classement-page .cc-pill,
.gazette-page .cc-pill {
  display: inline-block; background: #fff8e6; border: 1px solid #c9b06a;
  color: #6b5124; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 15px; border-radius: 20px;
}
.classement-page .cc-h1,
.gazette-page .cc-h1 {
  font-size: 42px; text-transform: uppercase; letter-spacing: 1px; margin-top: 12px;
  font-family: var(--serif); font-weight: 700; line-height: 1.08; color: #2a1d0e;
}
.classement-page .cc-sub,
.gazette-page .cc-sub {
  font-size: 15px; font-style: italic; color: #6b5124; margin-top: 6px;
  max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.5;
  font-family: var(--serif);
}
.classement-page .cc-orn,
.gazette-page .cc-orn { color: #a8842f; margin-top: 14px; letter-spacing: 6px; }

/* ---- Bouton « ↻ Rejouer » (source .replay) ---- */
.classement-page .replay,
.gazette-page .replay {
  position: absolute; top: 20px; right: 22px; display: inline-flex; align-items: center;
  gap: 6px; background: #fbf3dc; color: #6b5124; font-weight: 700; font-size: 12px;
  padding: 7px 13px; border-radius: 9px; border: 1px solid #c9b06a; cursor: pointer;
  font-family: inherit;
}
.classement-page .replay:hover,
.gazette-page .replay:hover { filter: brightness(.97); }

/* ---- Stat (niveau / victoires) — source .st ---- */
.classement-page .st { text-align: center; font-size: 10px; color: #7a5f2c; text-transform: uppercase; letter-spacing: .5px; }
.classement-page .st b { display: block; font-family: var(--serif); font-size: 15px; color: #2a1d0e; }

/* ---- Avatar générique (source .av) ---- */
.classement-page .av,
.gazette-page .av {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a5a2c, #2a1d0e);
  border: 2px solid #bc9e58; flex: none;
}

/* =====================  GAZETTE (#5a)  ===================== */
.gazette-page .grow {
  position: relative; overflow: hidden; background: #fbf3dc; border: 1px solid #e7d5a6;
  border-radius: 12px; padding: 13px 16px 13px 24px; display: flex; align-items: center;
  gap: 14px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gazette-page .grow:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); background: #fdf5df; }
.gazette-page .acc { position: absolute; left: 0; top: 8px; bottom: 8px; width: 5px; border-radius: 0 4px 4px 0; }
.classement-page .bthumb,
.gazette-page .bthumb {
  width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 18px;
  color: #fff; border: 1px solid rgba(0,0,0,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); flex: none;
}
.gazette-page .feat {
  position: relative; overflow: hidden; background: linear-gradient(180deg,#fbeec2,#f4e3ab);
  border: 1px solid #d9b95e; border-radius: 14px; padding: 18px 20px 18px 26px; display: flex;
  align-items: center; gap: 16px; box-shadow: 0 12px 28px rgba(0,0,0,.32); margin-bottom: 12px;
}
.gazette-page .shinefx {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%);
  background-size: 240% 100%; animation: cc-shine 4s ease-in-out infinite; pointer-events: none;
}
.classement-page .rev,
.gazette-page .rev {
  display: inline-flex; align-items: center; gap: 6px; background: #f3e6c2; color: #5a3d12;
  font-weight: 700; font-size: 12.5px; padding: 8px 15px; border-radius: 9px; border: 1px solid #c9b06a;
  cursor: pointer; text-decoration: none; flex: none;
}
.gazette-page .rev:hover { filter: brightness(.98); color: #5a3d12; }
.gazette-page .revg { background: linear-gradient(180deg,#e0bb65,#c9a24a 60%,#a8842f); border-color: #8a6d2f; color: #2a1d0e; }
.gazette-page .newtag {
  font-family: "Segoe UI", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  background: #2e9c54; color: #fff; padding: 2px 7px; border-radius: 10px; text-transform: uppercase;
}
.gazette-page .feat-tag {
  font-size: 10px; color: #8a6d2f; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}

/* =====================  CLASSEMENT (#5b)  ===================== */
/* Onglets Gloire / Fortune */
.classement-page .cls-onglets { display: flex; justify-content: center; gap: 6px; margin-bottom: 24px; }
.classement-page .cls-onglet {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px;
  padding: 8px 18px; border-radius: 20px; text-decoration: none;
}
.classement-page .cls-onglet.actif {
  background: linear-gradient(180deg,#e0bb65,#c9a24a 60%,#a8842f); color: #2a1d0e; border: 1px solid #8a6d2f;
}
.classement-page .cls-onglet.inactif {
  background: #f3e6c2; color: #7a5f2c; border: 1px solid #d8c393; cursor: pointer;
}

/* podium */
.classement-page .podwrap {
  display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: 18px; align-items: end; margin-bottom: 26px;
}
.classement-page .podcard { border-radius: 14px; padding: 22px 16px 18px; text-align: center; position: relative; }
/* cadre ornemental double */
.classement-page .podcard .frame { position: absolute; inset: 7px; border-radius: 9px; pointer-events: none; }
.classement-page .podcard .frame::before { content: ''; position: absolute; inset: 0; border: 1.5px solid rgba(138,109,47,.55); border-radius: 9px; }
.classement-page .podcard .frame::after  { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(138,109,47,.32); border-radius: 6px; }
.classement-page .corner { position: absolute; width: 9px; height: 9px; color: #a8842f; font-size: 9px; line-height: 9px; z-index: 3; }
.classement-page .corner.tl { top: 9px; left: 9px; }
.classement-page .corner.tr { top: 9px; right: 9px; }
.classement-page .corner.bl { bottom: 9px; left: 9px; }
.classement-page .corner.br { bottom: 9px; right: 9px; }
/* lauriers autour du nom du champion */
.classement-page .laurel { display: inline-block; opacity: .75; filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.classement-page .laurel.r { transform: scaleX(-1); }
/* ruban de rang */
.classement-page .ribbon {
  display: inline-block; font-family: var(--serif); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; font-size: 10px; padding: 3px 14px; border-radius: 4px; position: relative; margin-top: 12px;
}
.classement-page .ribbon::before, .classement-page .ribbon::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 7px; background: inherit; filter: brightness(.82);
}
.classement-page .ribbon::before { left: -6px; clip-path: polygon(0 50%,100% 0,100% 100%); }
.classement-page .ribbon::after  { right: -6px; clip-path: polygon(100% 50%,0 0,0 100%); }
/* braises flottantes du champion */
.classement-page .embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 14px; z-index: 1; }
.classement-page .ember { position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle,#ffe6a0,#e0a83a); opacity: 0; }
.classement-page .pod1.show .ember { animation: cc-ember 3.2s linear infinite; }
.classement-page .pod1.show .ember:nth-child(1) { left: 16%; animation-delay: .2s; }
.classement-page .pod1.show .ember:nth-child(2) { left: 34%; animation-delay: 1.1s; }
.classement-page .pod1.show .ember:nth-child(3) { left: 52%; animation-delay: .6s; }
.classement-page .pod1.show .ember:nth-child(4) { left: 70%; animation-delay: 1.7s; }
.classement-page .pod1.show .ember:nth-child(5) { left: 86%; animation-delay: 2.3s; }
@keyframes cc-ember {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: .9; }
  80% { opacity: .5; }
  100% { transform: translateY(-150px) scale(.3); opacity: 0; }
}
/* rayons de lumière tournants derrière le champion */
.classement-page .rays {
  position: absolute; top: 2px; left: 50%; width: 190px; height: 190px; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(240,214,126,.30) 0deg 7deg, transparent 7deg 22deg);
  border-radius: 50%; opacity: 0; z-index: 0; pointer-events: none;
  -webkit-mask: radial-gradient(circle, #000 26%, transparent 60%);
          mask: radial-gradient(circle, #000 26%, transparent 60%);
}
.classement-page .pod1.show .rays { opacity: 1; animation: cc-spin 20s linear infinite; }
@keyframes cc-spin { to { transform: translateX(-50%) rotate(360deg); } }
/* bordure chatoyante animée du champion */
.classement-page .pod1 { background-clip: padding-box; }
.classement-page .shimmer {
  position: absolute; inset: -1.5px; border-radius: 15px; padding: 1.5px;
  background: linear-gradient(120deg,#e9c869,#fff3c8,#c9a24a,#fff3c8,#e9c869);
  background-size: 280% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; z-index: 2; pointer-events: none;
}
.classement-page .pod1.show .shimmer { opacity: 1; animation: cc-borderflow 4.5s linear infinite; }
@keyframes cc-borderflow { to { background-position: 280% 0; } }
/* balayage brillant (argent) */
.classement-page .cardshine { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; z-index: 1; pointer-events: none; }
.classement-page .cardshine::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60%; left: -70%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
}
.classement-page .pod2.show .cardshine::before { animation: cc-sweep 4.5s ease-in-out 1s infinite; }
@keyframes cc-sweep { 0% { left: -70%; } 45%,100% { left: 150%; } }
/* rangs nobles escaladés (rangs 4-5) */
.classement-page .rrow.tier5 { background: linear-gradient(180deg,#fbf3dc,#f5ecd2)!important; border: 1px solid #dcc79a!important; }
.classement-page .rrow.tier4 { background: linear-gradient(180deg,#fbeecb,#f3e4ba)!important; border: 1px solid #d3ba7f!important; box-shadow: 0 5px 14px rgba(0,0,0,.16)!important; }
.classement-page .ringnum {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-family: var(--serif); font-weight: 700; font-size: 14px; flex: none;
}
.classement-page .ringnum.r5 { background: linear-gradient(180deg,#efe4c8,#ddcba0); border: 1.5px solid #c3ad7c; color: #5f4b26; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.classement-page .ringnum.r4 { background: linear-gradient(180deg,#f3e2b0,#e0c583); border: 1.5px solid #c19a52; color: #4f3b13; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 4px rgba(0,0,0,.2); }
.classement-page .minirib { font-family: var(--serif); font-weight: 700; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.classement-page .minirib.r4 { background: linear-gradient(180deg,#f3e2b0,#e0c583); color: #4f3b13; border: 1px solid #c19a52; }
.classement-page .minirib.r5 { background: linear-gradient(180deg,#efe4c8,#ddcba0); color: #5f4b26; border: 1px solid #c3ad7c; }
/* rangée escaladée (source .grow.rrow + variantes) */
.classement-page .grow {
  position: relative; overflow: hidden; background: #fbf3dc; border: 1px solid #e7d5a6;
  border-radius: 12px; padding: 13px 16px 13px 24px; display: flex; align-items: center; gap: 14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.classement-page .grow:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.28); background: #fdf5df; }
.classement-page .rrow { padding-left: 16px; }
.classement-page .rrow .rnum { width: 26px; text-align: center; font-size: 16px; color: #8a6d2f; font-family: var(--serif); font-weight: 700; flex: none; }
.classement-page .rrow .rid { flex: 1; min-width: 0; }
.classement-page .rrow .rid .rnom { font-family: var(--serif); font-size: 15px; font-weight: 700; }
.classement-page .rrow .rid .rsous { font-size: 11.5px; color: #7a5f2c; }
.classement-page .rrow .rgloire { font-family: var(--serif); width: 82px; text-align: right; font-size: 17px; }
.classement-page .rrow .av { width: 38px; height: 38px; }
/* ligne « TOI » */
.classement-page .rrow.moi { background: linear-gradient(180deg,#fbeec2,#f4e3ab); border: 1px solid #d9b95e; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.classement-page .rrow.moi .av { background: radial-gradient(circle at 35% 30%,#8a6534,#2a1d0e); border-color: #e3b768; }
.classement-page .toi-badge {
  font-family: "Segoe UI", sans-serif; font-size: 10px; font-weight: 700; background: #8a6d2f;
  color: #fff5df; padding: 2px 7px; border-radius: 10px; vertical-align: middle;
}

/* Bloc du podium (nom / méta / gloire) */
.classement-page .pod-nom { font-family: var(--serif); font-weight: 700; }
.classement-page .pod2 .pod-nom { font-size: 16px; margin-top: 10px; }
.classement-page .pod3 .pod-nom { font-size: 16px; margin-top: 10px; }
.classement-page .pod1 .pod-nom { font-size: 20px; color: #c9741f; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.classement-page .pod-meta { font-size: 11px; color: #7a5f2c; }
.classement-page .pod-gloire { font-family: var(--serif); margin-top: 12px; }
.classement-page .pod2 .pod-gloire, .classement-page .pod3 .pod-gloire { font-size: 27px; }
.classement-page .pod1 .pod-gloire { font-size: 36px; color: #3f2c0c; }
.classement-page .pod-lbl { font-size: 10px; color: #7a5f2c; text-transform: uppercase; letter-spacing: 1px; }

/* ---- Médaillons ornementaux circulaires (source .med) ---- */
.classement-page .med { position: relative; display: inline-block; }
.classement-page .med .rim {
  position: relative; border-radius: 50%; padding: 7px; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(from 210deg,#8a6d2f,#f0d67e 12%,#c9a24a 26%,#f5db85 40%,#a8842f 54%,#f0d67e 70%,#8a6d2f 84%,#e9c869 100%);
  box-shadow: 0 5px 14px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 6px rgba(0,0,0,.4);
}
.classement-page .med .rim::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid rgba(42,29,14,.28); pointer-events: none; }
.classement-page .med .core { border-radius: 50%; box-shadow: inset 0 3px 8px rgba(0,0,0,.6); overflow: hidden; }
.classement-page .med .top { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 4; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.classement-page .med .fl { position: absolute; top: 50%; margin-top: -9px; font-size: 17px; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.classement-page .med .fl.l { left: -13px; transform: rotate(-18deg); }
.classement-page .med .fl.r { right: -13px; transform: scaleX(-1) rotate(-18deg); }
.classement-page .med.big .rim { padding: 9px; }
.classement-page .med.sm .rim { padding: 5px; }
.classement-page .med.xs .rim { padding: 4px; }
.classement-page .med.silver .rim { background: conic-gradient(from 210deg,#8f8a7a,#f4f0e6 12%,#c8bda0 26%,#ffffff 40%,#9a927e 54%,#ece6d8 70%,#8f8a7a 84%,#d8d0be 100%); }
.classement-page .med.bronze .rim { background: conic-gradient(from 210deg,#6e4a26,#e6a86a 12%,#b47f45 26%,#f0c088 40%,#8a5c30 54%,#dca06a 70%,#6e4a26 84%,#c98d55 100%); }
/* L'avatar réel (Avatar::rendre) remplit le cœur du médaillon. */
.classement-page .med .core .ava { width: 100% !important; height: 100% !important; display: block; }

/* Médaille numérotée (source .medal inline → classes) */
.classement-page .medal {
  position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.classement-page .pod2 .medal { top: -13px; width: 30px; height: 30px; font-size: 13px; color: #5a5038; background: linear-gradient(180deg,#ece6d8,#c8bda0); border: 2px solid #b3a684; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.classement-page .pod3 .medal { top: -13px; width: 30px; height: 30px; font-size: 13px; color: #4a3016; background: linear-gradient(180deg,#dcab6d,#b47f45); border: 2px solid #9a6a38; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.classement-page .pod1 .medal { top: -16px; width: 34px; height: 34px; font-size: 15px; color: #4a3410; background: linear-gradient(180deg,#f5db85,#c9a24a); border: 2px solid #a8842f; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
/* couronne du champion */
.classement-page .crown { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); font-size: 30px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }

/* Rubans nommés du podium */
.classement-page .pod2 .ribbon { background: linear-gradient(180deg,#e4dcc9,#c8bda0); color: #5a5038; border: 1px solid #b3a684; }
.classement-page .pod3 .ribbon { background: linear-gradient(180deg,#dcab6d,#b47f45); color: #3f2810; border: 1px solid #9a6a38; }
.classement-page .pod1 .ribbon { background: linear-gradient(180deg,#f0d67e,#c9a24a); color: #3f2c0c; border: 1px solid #a8842f; }

/* Fonds de cartes du podium */
.classement-page .pod2 { background: linear-gradient(180deg,#f6efe0,#e9dfc6); border: 1px solid #b8ab8c; box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.classement-page .pod3 { background: linear-gradient(180deg,#f1e0c4,#e2c9a0); border: 1px solid #b98d5a; box-shadow: 0 12px 28px rgba(0,0,0,.34); }
.classement-page .pod1 { background: linear-gradient(180deg,#f8e9b6,#eccf77); border: 1.5px solid #c9a24a; padding: 26px 18px 22px; box-shadow: 0 16px 36px rgba(0,0,0,.45); }

/* ---- Animations partagées ---- */
@keyframes cc-rowIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes cc-goldPulse {
  0%,100% { box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 0 rgba(233,183,104,0); }
  50% { box-shadow: 0 16px 42px rgba(0,0,0,.5), 0 0 36px rgba(233,183,104,.62); }
}
@keyframes cc-crownDrop {
  0% { transform: translate(-50%,-46px) rotate(-24deg); opacity: 0; }
  60% { transform: translate(-50%,5px) rotate(9deg); opacity: 1; }
  100% { transform: translate(-50%,0) rotate(0); opacity: 1; }
}
@keyframes cc-shine { 0% { background-position: -140% 0; } 60%,100% { background-position: 240% 0; } }
@keyframes cc-medalPop { 0% { transform: translateX(-50%) scale(0); } 70% { transform: translateX(-50%) scale(1.28); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes cc-burst { 0% { transform: scale(.2); opacity: .75; } 100% { transform: scale(2.7); opacity: 0; } }

.classement-page .podcard { opacity: 0; transform: translateY(36px) scale(.94); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.85,.25,1); }
.classement-page .podcard.show { opacity: 1; transform: none; }
.classement-page .pod1.show { animation: cc-goldPulse 2.8s 1s ease-in-out infinite; }
.classement-page .crown { opacity: 0; }
.classement-page .pod1.show .crown { animation: cc-crownDrop .85s .15s both; }
.classement-page .medal { opacity: 0; }
.classement-page .podcard.show .medal { animation: cc-medalPop .5s .1s both; }
.classement-page .burst {
  position: absolute; top: 36px; left: 50%; width: 130px; height: 130px; margin-left: -65px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,214,126,.75), rgba(240,214,126,0) 70%); opacity: 0; pointer-events: none;
}
.classement-page .pod1.show .burst { animation: cc-burst .85s .1s both; }
.classement-page .rrow { opacity: 0; transform: translateX(-16px); transition: opacity .4s ease, transform .4s ease; }
.classement-page .rrow.show { opacity: 1; transform: none; }

/* Gazette : cascade des rangées quand la carte est « .anim » */
.gazette-page .anim .grow, .gazette-page .anim .feat { animation: cc-rowIn .45s both; }

/* ---- Progressive enhancement / accessibilité ----
   Sans .anim, la gazette reste pleinement visible (les .grow n'ont pas d'état
   caché). Le podium, lui, part masqué → si le JS ne s'exécute pas (ou en
   reduced-motion) on force l'état révélé. La classe .no-anim est posée par le
   JS uniquement en reduced-motion ; le sélecteur :not(.js-anim) couvre le
   cas « JS coupé » (le JS ajoute .js-anim au moment de piloter la carte). */
.classement-page .cls-card:not(.js-anim) .podcard,
.classement-page .cls-card.no-anim .podcard { opacity: 1; transform: none; }
.classement-page .cls-card:not(.js-anim) .rrow,
.classement-page .cls-card.no-anim .rrow { opacity: 1; transform: none; }
.classement-page .cls-card:not(.js-anim) .medal,
.classement-page .cls-card.no-anim .medal { opacity: 1; }
.classement-page .cls-card:not(.js-anim) .crown,
.classement-page .cls-card.no-anim .crown { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .classement-page .podcard, .classement-page .rrow, .classement-page .medal, .classement-page .crown { opacity: 1 !important; transform: none !important; }
  .classement-page .pod1.show, .classement-page .pod1.show .rays, .classement-page .pod1.show .shimmer,
  .classement-page .pod1.show .ember, .classement-page .pod2.show .cardshine::before,
  .classement-page .pod1.show .crown, .classement-page .pod1.show .burst,
  .gazette-page .shinefx, .gazette-page .anim .grow, .gazette-page .anim .feat { animation: none !important; }
}

/* =====================  Responsive  ===================== */
@media (max-width: 720px) {
  .classement-page .cls-card, .gazette-page .gaz-card { padding: 26px 16px 30px; }
  .classement-page .cc-h1, .gazette-page .cc-h1 { font-size: 30px; }
  /* le bouton Rejouer ne doit pas chevaucher le titre : on le repositionne au fil */
  .classement-page .replay, .gazette-page .replay { position: static; display: inline-flex; margin: 0 auto 14px; }
  .classement-page .cls-hero, .gazette-page .gaz-hero { margin-top: 4px; }
  /* podium empilé : le champion d'abord */
  .classement-page .podwrap { grid-template-columns: 1fr; gap: 30px; }
  .classement-page .pod1 { order: -1; }
  /* rangées : masquer les colonnes stat étroites au besoin reste lisible */
  .classement-page .rrow .rgloire { width: auto; }
  .gazette-page .feat, .gazette-page .grow { flex-wrap: wrap; }
  .gazette-page .feat .rev, .gazette-page .grow .rev { margin-left: auto; }
}
