/* Succès à paliers — handoff `design_handoff_cards_collection/ACHIEVEMENTS.md` (2026-10-07).
   Valeurs reprises telles quelles de la maquette : couleurs, tailles, espacements, courbes. */

/* ── Bandeau de complétion ── */
.ac-strip {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 16px 20px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(29, 58, 117, .55), rgba(9, 17, 36, .7));
  box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .16);
}
.ac-strip-left { flex: 1 1 280px; }
.ac-strip-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.ac-strip-k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; color: #5d7cb8; }
.ac-strip-v { font-family: 'Chakra Petch', sans-serif; font-size: 22px; font-weight: 600; color: #f2f7ff; }
.ac-strip-n { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #b9cdf2; }
.ac-strip-track { display: block; height: 6px; border-radius: 999px; background: rgba(6, 12, 27, .65); overflow: hidden; }
.ac-strip-fill { display: block; height: 100%; border-radius: 999px; background: #6ea8ff;
  box-shadow: 0 0 12px rgba(110, 168, 255, .5); transition: width .5s cubic-bezier(.2, .8, .2, 1); }

/* ── Filtre segmenté ── */
.ac-seg { display: flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: rgba(6, 12, 27, .6); box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .14); }
.ac-seg-item { padding: 8px 13px; border: 0; border-radius: 8px; background: transparent;
  font-size: 12px; font-weight: 600; color: #7d97cc; cursor: pointer; transition: background .18s ease, color .18s ease; }
.ac-seg-item.is-active { background: rgba(110, 168, 255, .18); color: #eaf1ff; }
.ac-seg-n { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #5d7cb8; margin-left: 5px; }

/* ── Grille ── */
.ac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
  gap: 14px; margin-top: 18px; }
/* Le séparateur traverse toute la grille : c'est une ligne de titre, pas une carte parmi d'autres. */
.ac-sep { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.ac-sep h2 { font-family: 'Chakra Petch', sans-serif; font-size: 18px; font-weight: 600; color: #f2f7ff; margin: 0; }
.ac-sep-n { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: #5d7cb8; }
.ac-sep-line { flex: 1; height: 1px; background: rgba(110, 168, 255, .12); }

/* ── Carte ── */
.ac-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(18, 33, 66, .66), rgba(9, 17, 36, .7));
  box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .14);
  transition: box-shadow .2s ease; }
.ac-card:hover { box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .28); }
/* Prête à encaisser : LA CARTE ENTIÈRE est le bouton, il n'y en a pas d'autre. */
.ac-card.is-ready { cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 194, 102, .1), rgba(9, 17, 36, .8));
  box-shadow: inset 0 0 0 1px rgba(255, 194, 102, .45); }
.ac-card.is-ready:hover, .ac-card.is-ready:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 194, 102, .85); }

/* ── Badge ── */
/* `perspective` sur l'enveloppe et rotation sur la couche interne : sans les deux, la pièce
   tourne à plat et l'effet se lit comme un écrasement. */
.ac-badge { flex: 0 0 auto; width: 72px; height: 80px; perspective: 600px; }
.ac-badge-in { width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.2, .75, .25, 1); }
.ac-badge-img { width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), filter .28s cubic-bezier(.3, 1.6, .5, 1); }
.ac-card:hover .ac-badge-img { transform: translateY(-4px) rotate(-6deg) scale(1.1); }

/* La lueur suit la RARETÉ atteinte, jamais l'état « à réclamer » : le badge raconte le palier, la
   carte raconte ce qu'il reste à prendre. Deux informations, deux couleurs. */
.ac-badge-img.is-common    { filter: drop-shadow(0 0 14px rgba(170, 184, 204, .35)); }
.ac-badge-img.is-copper    { filter: drop-shadow(0 0 14px rgba(214, 124, 46, .5)); }
.ac-badge-img.is-uncommon  { filter: drop-shadow(0 0 14px rgba(63, 208, 138, .45)); }
.ac-badge-img.is-rare      { filter: drop-shadow(0 0 14px rgba(59, 140, 255, .5)); }
.ac-badge-img.is-epic      { filter: drop-shadow(0 0 14px rgba(162, 75, 255, .5)); }
.ac-badge-img.is-legendary { filter: drop-shadow(0 0 14px rgba(255, 163, 26, .5)); }
.ac-badge-img.is-mythic    { filter: drop-shadow(0 0 14px rgba(240, 43, 216, .5)); }
.ac-card:hover .ac-badge-img.is-common    { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(170, 184, 204, .35)); }
.ac-card:hover .ac-badge-img.is-copper    { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(214, 124, 46, .5)); }
.ac-card:hover .ac-badge-img.is-uncommon  { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(63, 208, 138, .45)); }
.ac-card:hover .ac-badge-img.is-rare      { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(59, 140, 255, .5)); }
.ac-card:hover .ac-badge-img.is-epic      { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(162, 75, 255, .5)); }
.ac-card:hover .ac-badge-img.is-legendary { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(255, 163, 26, .5)); }
.ac-card:hover .ac-badge-img.is-mythic    { filter: brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(240, 43, 216, .5)); }

/* ── Colonne de droite ── */
.ac-body { flex: 1; min-width: 0; }
.ac-line { display: flex; align-items: baseline; gap: 12px; }
.ac-name { font-size: 14px; font-weight: 600; color: #f2f7ff; }
.ac-count { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #b9cdf2; white-space: nowrap; }
.ac-desc { margin: 3px 0 10px; font-size: 12px; color: #7d97cc; }

.ac-track { display: block; height: 8px; border-radius: 999px; background: rgba(6, 12, 27, .7);
  box-shadow: inset 0 0 0 1px rgba(110, 168, 255, .12); overflow: hidden; }
/* La barre reste BLEUE même sur un badge mythique : elle mesure une distance, elle ne décerne rien. */
.ac-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06), #6ea8ff);
  box-shadow: 0 0 12px #6ea8ff; transition: width .5s cubic-bezier(.2, .8, .2, 1); }

.ac-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ac-status { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em; color: transparent; }
.ac-status.is-ready { color: #ffc266; }
.ac-status.is-max { color: #5d7cb8; }
.ac-reward { display: inline-flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #b9cdf2; }
.ac-reward.is-ready { color: #ffc266; }
.ac-reward.is-max { color: #5d7cb8; }
/* Le losange des cristaux, dessiné : c'est le symbole du jeu, pas une icône d'interface. */
.ac-gem { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); border-radius: 1px; }

.ac-empty { margin-top: 24px; text-align: center; color: #7d97cc; font-size: 13px; }

@media (max-width: 560px) {
  .ac-strip { padding: 14px 16px; }
  .ac-seg { width: 100%; overflow-x: auto; }
  .ac-card { padding: 14px; gap: 12px; }
}

/* ── Apercu admin (2026-10-07) ── */
/* Un liseré distinct pendant la simulation : voir des paliers qu'on n'a pas vraiment atteints, sans
   savoir qu'on est en apercu, serait le meilleur moyen de croire a un bug. */
.ac-sim { display: inline-flex; align-items: center; gap: 7px; font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .14em; color: #7d97cc; cursor: pointer; }
.ac-sim input { accent-color: #6ea8ff; cursor: pointer; }
.is-sim .ac-card { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(125, 151, 204, .5); }
.is-sim .ac-card.is-ready { box-shadow: inset 0 0 0 1px rgba(125, 151, 204, .5); }