/* ==== Classements ======================================================= */
.cls { max-width: 1280px; }
.cls-head { max-width: 1240px; }
/* les couleurs d'entreprise très claires restent lisibles en initiales */
.cls .avatar { color: color-mix(in srgb, var(--c) 62%, #000); }
.cls-head .title-hero { margin-top: 14px; font-size: clamp(46px, 5.4vw, 100px); }
.cls-head .lead { margin-top: 22px; }

/* Les six compétences, en bento */
.cls-bento {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: clamp(56px, 9vh, 110px);
}
.cls-card {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  min-height: 300px; padding: 34px 34px 30px; border-radius: var(--radius-lg);
  background: var(--bg-alt);
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease), transform 300ms var(--ease);
}
.cls-card:hover { transform: translateY(-3px); }
.cls-card.is-active { background: var(--bg-raised); box-shadow: var(--shadow-lg); }
.cls-card__name { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.025em; }
.cls-card__desc { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.cls-card__champ { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: auto; padding-top: 28px; }
.cls-card__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cls-card__who b { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.cls-card__who small { font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-card .belt { background: var(--bg); }
.cls-card.is-active .belt { background: var(--bg-alt); }
.cls-card__me { margin-top: 20px; font-size: var(--fs-sm); color: var(--text-2); }
.cls-card__me b { color: var(--team-a); font-weight: 700; }

/* Le classement détaillé */
.cls-board { margin-top: var(--section); scroll-margin-top: calc(var(--nav-h) + 32px); }
.cls-board__head { display: flex; flex-direction: column; gap: 26px; margin-bottom: 36px; }
.cls-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.cls-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cls-chips button {
  height: 40px; padding: 0 18px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2);
  background: var(--bg-alt); transition: background 240ms var(--ease), color 240ms var(--ease);
}
.cls-chips button:hover { color: var(--text); }
.cls-chips button.is-active { background: var(--text); color: var(--bg); font-weight: 600; }

.cls-list { list-style: none; margin: 0; padding: 0; position: relative; }
.cls-list li { border-bottom: 1px solid var(--line); }
.cls-row {
  display: grid; grid-template-columns: 72px 48px 1fr auto 110px; align-items: center; gap: 22px;
  min-height: 84px; padding: 10px 18px; border-radius: 20px; transition: background 200ms var(--ease);
}
a.cls-row:hover { background: var(--bg-alt); }
.cls-rank { font-size: clamp(30px, 2.4vw, 44px); color: var(--text-3); }
.is-podium .cls-rank { color: var(--text); }
.cls-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cls-who b { display: flex; align-items: center; gap: 12px; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.cls-who em {
  font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--team-a);
  padding: 3px 10px; border-radius: 999px; background: var(--team-a-soft); letter-spacing: 0;
}
.cls-who small { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.cls-who small .clogo__mono { font-size: 8px; }
.cls-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-lg); font-weight: 600; text-align: right; letter-spacing: -0.02em; }
.cls-score--gain { color: var(--win); }

.is-me .cls-row { background: var(--team-a-soft); }
.cls-list--me { margin-top: 14px; padding-top: 14px; border-top: 2px dotted var(--line-strong); }
.cls-list--me li { border-bottom: 0; }
.cls-foot { margin-top: 22px; font-size: var(--fs-sm); color: var(--text-3); text-align: right; }

.cls-list-move { transition: transform 700ms var(--ease); }
.cls-list-enter-active { transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
.cls-list-leave-active { transition: opacity 250ms var(--ease); position: absolute; width: 100%; }
.cls-list-enter-from { opacity: 0; transform: translateY(14px); }
.cls-list-leave-to { opacity: 0; }
.cls-swap-enter-active, .cls-swap-leave-active { transition: opacity 260ms var(--ease); }
.cls-swap-enter-from, .cls-swap-leave-to { opacity: 0; }

@media (max-width: 1100px) { .cls-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .cls-bento { grid-template-columns: 1fr; }
  .cls-row { grid-template-columns: 40px 1fr auto; gap: 12px; }
  .cls-row .avatar, .cls-row > .clogo, .cls-score { display: none; }
}

/* ---- Derbys : par secteur, par région ---- */
.cls-derby { margin-top: var(--section); }
.cls-derby__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: clamp(36px, 6vh, 64px); }
.cls-derby__head .title-xl { max-width: 24ch; }
.cls-derby__head .segmented { margin-top: 12px; }
.cls-derby__grid { display: flex; flex-direction: column; gap: 20px; }
.cls-derby__others { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; align-items: start; }
.cls-derby__card { padding: 30px 30px 26px; border-radius: var(--radius-lg); background: var(--bg-alt); }
.cls-derby__card h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.cls-derby__card ol { list-style: none; margin: 0; padding: 0; }
.cls-derby__card li { display: grid; grid-template-columns: 26px 28px 1fr auto; align-items: center; gap: 12px; min-height: 46px; }
.cls-derby__card li + li { border-top: 1px solid var(--line); }
.cls-derby__rank { font-size: var(--fs-md); color: var(--text-3); }
.cls-derby__name { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cls-derby__name em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--team-a); padding: 3px 10px; border-radius: 999px; background: var(--team-a-soft); }
.cls-derby__val { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); text-align: right; }
.cls-derby__val small { margin-left: 6px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }

/* le derby de notre entreprise : en premier, plus grand */
.cls-derby__card.is-mine { padding: 40px 44px 40px; background: var(--bg-raised); box-shadow: var(--shadow-lg); }
.cls-derby__card.is-mine h3 { font-size: var(--fs-xl); letter-spacing: -0.035em; margin-bottom: 22px; }
.cls-derby__card.is-mine li { grid-template-columns: 44px 40px 1fr auto 110px; gap: 18px; min-height: 72px; }
.cls-derby__card.is-mine .cls-derby__rank { font-size: clamp(26px, 2vw, 36px); }
.cls-derby__card.is-mine .cls-derby__name { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.cls-derby__card.is-mine .cls-derby__val { font-size: var(--fs-md); }
.cls-derby__card.is-mine li.is-me { background: var(--team-a-soft); border-radius: 16px; margin: 0 -14px; padding: 0 14px; }
.cls-derby__card.is-mine .btn { margin-top: 28px; }

@media (max-width: 700px) {
  .cls-derby__card.is-mine { padding: 28px 22px; }
  .cls-derby__card.is-mine li { grid-template-columns: 30px 1fr auto; }
  .cls-derby__card.is-mine li .clogo, .cls-derby__card.is-mine li .belt { display: none; }
}

/* Vous / Votre équipe : le classement individuel et le collectif, côte à côte */
.cls-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: clamp(40px, 7vh, 72px) 0 clamp(56px, 9vh, 100px); }
.cls-duo__card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 40px 28px 34px; border-radius: var(--radius-lg); background: var(--bg-alt);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), background 300ms var(--ease);
}
.cls-duo__card:hover { transform: translateY(-3px); }
.cls-duo__card.is-active { background: var(--bg-raised); box-shadow: var(--shadow-lg), inset 0 0 0 2px var(--team-a); }
.cls-duo__tag { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.cls-duo__rank { font-size: clamp(64px, 7vw, 120px); margin-top: 6px; }
.cls-duo__sub { font-size: var(--fs-sm); color: var(--text-2); }
.cls-duo__plus { font-size: var(--fs-xl); font-weight: 300; color: var(--text-3); }

/* petits repères chaleureux */
.cls-mark {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; font-style: normal; letter-spacing: 0; white-space: nowrap;
}
.cls-duo .cls-mark { margin-top: 8px; }
.cls-mark--up { background: rgba(31, 157, 99, 0.10); color: var(--win); }
.cls-mark--fire { background: rgba(242, 100, 16, 0.10); color: var(--team-b); }
.cls-mark--team { background: var(--team-a-soft); color: var(--team-a); }
.cls-who .cls-mark { padding: 3px 9px; font-size: 13px; }
.cls-move { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.cls-move.is-up { color: var(--win); }
.cls-move.is-down { color: var(--text-3); }

@media (max-width: 800px) {
  .cls-duo { grid-template-columns: 1fr; }
  .cls-duo__plus { display: none; }
  .cls-who .cls-mark { display: none; }
}
.cls-share { margin: var(--section) 0 0; }