/* =============================================================
   PAGE AVATARS & COSMETIQUES
   La rarete est l'information principale: elle doit se lire avant
   le texte. Chaque grade a donc son badge, son filet et le halo de
   ses pastilles, tous tires du meme token.
   ============================================================= */

.eyebrow {
  font-family: var(--dop-font-body);
  font-weight: 700;
  font-size: var(--dop-fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
  margin-bottom: 18px;
}

.grad { color: var(--dop-primary); }

.sec-head { max-width: 720px; margin: 0 0 48px; }

.sec-head h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-section);
  line-height: var(--dop-lh-snug);
}

.sec-head p { margin-top: 18px; color: var(--dop-ink-2); font-size: var(--dop-fs-lead); line-height: var(--dop-lh-normal); }

/* ---------- Hero: le meme avatar, avant et apres ---------- */
.av-hero { padding: clamp(48px, 6vw, 84px) 0; border-bottom: 1px solid var(--dop-rule); }

.av-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
}

.av-hero h1 {
  font-size: var(--dop-fs-hero);
  font-weight: 800;
  line-height: var(--dop-lh-tight);
  letter-spacing: var(--dop-tracking-hero);
}

.av-hero .lead {
  margin-top: 22px;
  max-width: 46ch;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-lead);
  line-height: var(--dop-lh-normal);
}

.av-swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

.av-swap figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.av-swap img {
  width: 100%;
  height: auto;
  border-radius: var(--dop-radius-xl);
  border: 1px solid var(--dop-border-strong);
}

/* Le second porte le halo rose: c'est lui qui montre le resultat.
   La lueur passe derriere l'image pour deborder du cadre, le liseré
   et l'ombre portee restent sur l'image elle-meme. */
.av-swap figure:last-of-type { position: relative; isolation: isolate; }

.av-swap figure:last-of-type::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(221, 75, 149, .45), rgba(221, 75, 149, 0) 65%);
  filter: blur(26px);
  z-index: -1;
  pointer-events: none;
}

.av-swap figure:last-of-type img {
  border-color: rgba(221, 75, 149, .55);
  box-shadow:
    0 0 0 1px rgba(221, 75, 149, .45),
    0 0 28px rgba(221, 75, 149, .35),
    0 20px 48px rgba(221, 75, 149, .3);
}

.av-swap figcaption { color: var(--dop-ink-3); font-size: var(--dop-fs-xs); text-align: center; }
.av-arrow { color: var(--dop-primary); font-size: 26px; font-weight: 700; }

/* ---------- Les quatre grades ---------- */
.av-tiers .tier { padding: clamp(28px, 3.4vw, 44px) 0; border-top: 1px solid var(--dop-rule); }
.av-tiers .tier:first-of-type { border-top: 0; }

.tier[data-rarity="common"]    { --tier: var(--dop-common); }
.tier[data-rarity="rare"]      { --tier: var(--dop-rare); }
.tier[data-rarity="epic"]      { --tier: var(--dop-epic); }
.tier[data-rarity="legendary"] { --tier: var(--dop-legendary); }

.tier-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }

/* Le nom du grade porte sa couleur et sa pastille: la categorie se lit
   avant meme le texte qui la decrit. */
.tier-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
  color: var(--tier);
}

.tier-head h2::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tier);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tier) 20%, transparent),
              0 0 20px color-mix(in srgb, var(--tier) 60%, transparent);
}

.tier-head p { color: var(--dop-ink-2); max-width: 56ch; line-height: var(--dop-lh-normal); }

.tier-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.tier-items {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  width: max-content;
  list-style: none;
  padding: 6px 0;
  margin: 0;
  animation: tier-scroll 46s linear infinite;
}

.tier-marquee:hover .tier-items { animation-play-state: paused; }

@keyframes tier-scroll { to { transform: translateX(calc(-50% - 17px)); } }

/* Chaque grade a son rythme, et un sens alterne. */
.tier[data-rarity="rare"] .tier-items      { animation-duration: 54s; animation-direction: reverse; }
.tier[data-rarity="epic"] .tier-items      { animation-duration: 50s; }
.tier[data-rarity="legendary"] .tier-items { animation-duration: 58s; animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .tier-items { animation: none; }
  .tier-marquee { overflow-x: auto; }
}

.tier-items > li { flex: 0 0 auto; width: 116px; }

.tier-items li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.tier-items li::before {
  content: '';
  position: absolute;
  top: -8%;
  left: 50%;
  width: 92%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tier) 38%, transparent), transparent 70%);
  filter: blur(14px);
}

.tier-items img {
  position: relative;
  width: 100%;
  max-width: 116px;
  height: auto;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tier) 45%, transparent);
}

.tier-items span {
  position: relative;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-xs);
  line-height: 1.35;
}

/* ---------- La galerie: le resultat sur de vrais avatars ---------- */
.av-gallery-section { border-top: 1px solid var(--dop-rule); }

.avatar-card { margin: 0; }

.avatar-card img {
  width: 100%;
  height: auto;
  border-radius: var(--dop-radius-xl);
  border: 1px solid var(--dop-border-strong);
  box-shadow: var(--dop-shadow-card);
}

/* ---------- Clôture ---------- */
.av-cta { border-top: 1px solid var(--dop-rule); text-align: center; }
.av-cta h2 { font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; letter-spacing: var(--dop-tracking-section); }
.av-cta p { margin: 16px auto 0; max-width: 46ch; color: var(--dop-ink-2); font-size: var(--dop-fs-lead); }
.av-cta .store-buttons { justify-content: center; }

@media (max-width: 1000px) {
}

@media (max-width: 920px) {
  .av-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .av-swap { grid-template-columns: 1fr; }
  .av-arrow { transform: rotate(90deg); justify-self: center; }
}

/* Meme geste sur les grilles de la page: la piece survolee ressort. */
.tier-items img,
.tier-items li::before,
.tier-items span {
  transition: transform var(--dop-dur) var(--dop-ease-out),
              border-color var(--dop-dur),
              color var(--dop-dur);
}

.tier-items li:hover img {
  transform: scale(1.12);
  border-color: color-mix(in srgb, var(--tier) 80%, transparent);
}

.tier-items li:hover::before { transform: translateX(-50%) scale(1.25); }
.tier-items li:hover span { color: var(--dop-ink-1); }

.avatar-card img { transition: transform var(--dop-dur) var(--dop-ease-out), border-color var(--dop-dur); }
.avatar-card:hover img { transform: translateY(-6px); border-color: rgba(221, 75, 149, .45); }

@media (prefers-reduced-motion: reduce) {
  .tier-items li:hover img,
  .tier-items li:hover::before,
  .avatar-card:hover img { transform: none; }
}

/* ---------- Les cosmetiques de la mascotte ----------
   Meme grammaire que la grille des avatars: la rarete porte la couleur,
   la pastille son halo. On personnalise l'avatar et la mascotte, il faut
   donc que les deux soient montres. */
.av-mascot { border-top: 1px solid var(--dop-rule); }

.mascot-swap {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.mascot-swap figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }

.mascot-swap img {
  width: clamp(120px, 16vw, 190px);
  height: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
}

.mascot-swap figure:last-of-type img {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dop-legendary) 55%, transparent),
              0 0 34px color-mix(in srgb, var(--dop-legendary) 40%, transparent);
}

.mascot-swap figcaption { color: var(--dop-ink-3); font-size: var(--dop-fs-xs); text-align: center; }
.mascot-arrow { color: var(--dop-primary); font-size: 26px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  }

@media (max-width: 420px)  { .mascot-swap { grid-template-columns: 1fr; } .mascot-arrow { transform: rotate(90deg); } }

/* ---------- Carrousel des avatars ----------
   Meme mecanique que les autres pistes du site: le jeu est duplique et
   translate d'une demi-longueur, donc la boucle ne saute pas. */
.av-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.av-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 1.8vw, 24px);
  width: max-content;
  padding: 8px 0;
  animation: av-scroll 64s linear infinite;
}

.av-marquee:hover .av-track { animation-play-state: paused; }

@keyframes av-scroll { to { transform: translateX(calc(-50% - 12px)); } }

@media (prefers-reduced-motion: reduce) {
  .av-track { animation: none; }
  .av-marquee { overflow-x: auto; }
}

.avatar-card { flex: 0 0 auto; margin: 0; }

/* Les cartes a decor gardent leur cadre; les avatars detoures se posent
   sur le sol de la page, avec un halo pour les asseoir. */
.avatar-card img {
  width: 200px;
  height: auto;
  border-radius: var(--dop-radius-xl);
  border: 1px solid var(--dop-border-strong);
  box-shadow: var(--dop-shadow-card);
  transition: transform var(--dop-dur) var(--dop-ease-out), border-color var(--dop-dur);
}

.avatar-card--cutout { position: relative; display: flex; align-items: flex-end; }

.avatar-card--cutout::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(221, 75, 149, .16), rgba(141, 103, 251, .08) 48%, transparent 70%);
  filter: blur(24px);
}

.avatar-card--cutout img {
  position: relative;
  width: auto;
  height: 300px;
  object-fit: contain;
  object-position: bottom;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5));
}

.avatar-card:hover img { transform: translateY(-8px); border-color: rgba(221, 75, 149, .45); }

@media (prefers-reduced-motion: reduce) {
  .avatar-card:hover img { transform: none; }
}

@media (max-width: 620px) {
  .avatar-card img { width: 150px; }
  .avatar-card--cutout img { width: auto; height: 230px; }
}

/* ---------- Les grades de la mascotte ----------
   Meme grammaire que ceux de l'avatar: un titre colore, puis une piste
   qui defile. Trois grades, dix pieces chacun. */
.pet-tier { padding: clamp(24px, 3vw, 38px) 0; border-top: 1px solid var(--dop-rule); }

.pet-tier[data-rarity="rare"]      { --tier: var(--dop-rare); }
.pet-tier[data-rarity="epic"]      { --tier: var(--dop-epic); }
.pet-tier[data-rarity="legendary"] { --tier: var(--dop-legendary); }

.pet-tier h3 {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
  color: var(--tier);
}

.pet-tier h3::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tier);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tier) 20%, transparent),
              0 0 18px color-mix(in srgb, var(--tier) 60%, transparent);
}

.pet-tier[data-rarity="epic"] .tier-items      { animation-duration: 52s; animation-direction: reverse; }
.pet-tier[data-rarity="legendary"] .tier-items { animation-duration: 56s; }

/* =============================================================
   CONFIGURATEUR — feuille de personnage
   Adapte de livraison-neo/landing/configurateur.css et calque sur le
   loadout de la home: une colonne de cases de chaque cote du personnage,
   une rangee dessous, des cases sombres a liseré de rarete. Aucune valeur
   nouvelle: tout vient de tokens.css ou d'un geste deja present sur le site.
   L'avatar ne recoit ni filtre, ni fill, ni masque: on l'habille autour.
   ============================================================= */

.dpm {
  /* Le disque derriere le portrait est CLAIR: la DA de l'avatar n'a pas de
     contour, des cheveux ou un vetement noirs disparaitraient sur le sol. */
  --dpm-medaillon: var(--dop-text);
  --dpm-accent:    var(--dop-primary);
  --dpm-case:      68px;
  --dpm-scene:     clamp(280px, 27vw, 390px);
  --dpm-marge:     clamp(20px, 4vw, 48px);   /* padding de .wrap */

  display: grid;
  gap: var(--dop-space-8);
}

.av-builder { border-bottom: 1px solid var(--dop-rule); }
.av-builder .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.av-mascot #dopa-builder { margin-bottom: clamp(64px, 8vw, 112px); }

.dpm-statut { color: var(--dop-ink-3); font-size: var(--dop-fs-sm); }
html:not(.js) .dpm-hote > .dpm-statut:first-child { display: none; }

/* ---------- Le loadout ----------
   Trois colonnes (cases | personnage | cases) et une rangee dessous. Les
   cases forment un seul tablist: il s'etend sur toute la grille en subgrid,
   et le personnage se pose dans la colonne du milieu qu'il laisse libre. */
.dpm-loadout {
  display: grid;
  grid-template-columns: auto minmax(var(--dpm-scene), 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(16px, 2.4vw, 34px);
  row-gap: clamp(28px, 3.5vw, 44px);
  align-items: center;
}

.dpm-cases {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  align-items: center;
}

.dpm-cote--look { grid-column: 1; grid-row: 1; }
.dpm-cote--gear { grid-column: 3; grid-row: 1; }
.dpm-cote--more { grid-column: 1 / -1; grid-row: 2; }

.dpm-cote { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.dpm-cote-titre {
  font-family: var(--dop-font-body);
  font-weight: 700;
  font-size: var(--dop-fs-3xs);
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
}

.dpm-cote-grille { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px); }

.dpm-cote--more .dpm-cote-titre { display: none; }

.dpm-cote--more .dpm-cote-grille {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
}

/* ---------- Les cases ---------- */
.dpm-case,
.dpm-objet {
  --tier: var(--dop-common);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dop-ink-2);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.dpm-case[data-rarity="rare"],      .dpm-objet[data-rarity="rare"]      { --tier: var(--dop-rare); }
.dpm-case[data-rarity="epic"],      .dpm-objet[data-rarity="epic"]      { --tier: var(--dop-epic); }
.dpm-case[data-rarity="legendary"], .dpm-objet[data-rarity="legendary"] { --tier: var(--dop-legendary); }

/* La case du loadout: fond sombre, disque teinte par la rarete au centre,
   liseré et lueur de la meme teinte. Le dessin se pose sur le disque. */
.dpm-case-art,
.dpm-objet-art {
  display: block;
  overflow: hidden;
  border-radius: var(--dop-radius-md);
  background:
    radial-gradient(circle closest-side,
      color-mix(in srgb, var(--tier) 46%, var(--dop-card-2)) 0 78%,
      color-mix(in srgb, var(--tier) 16%, var(--dop-card-2)) 84% 92%,
      var(--dop-card-2) 96%);
  border: 2px solid color-mix(in srgb, var(--tier) 52%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tier) 30%, transparent);
  transition: transform var(--dop-dur-fast) var(--dop-ease),
              border-color var(--dop-dur-fast) var(--dop-ease),
              box-shadow var(--dop-dur-fast) var(--dop-ease);
}

.dpm-case-art { width: var(--dpm-case); height: var(--dpm-case); }

.dpm-case-art svg,
.dpm-objet-art svg { display: block; width: 100%; height: 100%; }

/* Case vide: l'emplacement seul. */
.dpm-case.est-vide .dpm-case-art {
  display: grid;
  place-items: center;
  background: var(--dop-card-2);
  border: 2px dashed var(--dop-border-strong);
  box-shadow: none;
  color: var(--dop-ink-3);
}

.dpm-case.est-vide .dpm-case-art svg { width: 34%; height: 34%; }

.dpm-case-nom { font-size: var(--dop-fs-xs); line-height: 1.2; }

.dpm-case:hover,
.dpm-objet:hover { color: var(--dop-ink-1); }

.dpm-case:hover .dpm-case-art,
.dpm-objet:hover .dpm-objet-art {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--tier) 80%, transparent);
}

/* Case ouverte / piece equipee: un anneau rose autour de la case. */
.dpm-case[aria-selected="true"] { color: var(--dop-ink-1); }

.dpm-case[aria-selected="true"] .dpm-case-art,
.dpm-objet[aria-pressed="true"] .dpm-objet-art {
  box-shadow: 0 0 0 2px var(--dop-bg), 0 0 0 4px var(--dpm-accent),
              0 0 22px color-mix(in srgb, var(--dop-primary) 45%, transparent);
}

/* ---------- Le personnage ---------- */
.dpm-centre {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  justify-self: center;
  width: var(--dpm-scene);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dpm-scene { position: relative; isolation: isolate; width: 100%; margin: 0; }

/* Le halo du loadout de la home, derriere le personnage. Fixe: la vie
   vient de la lumiere de studio, pas d'un halo qui pulse. */
.dpm-scene::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150%;
  aspect-ratio: 1.1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(221, 75, 149, .22), rgba(141, 103, 251, .10) 46%, transparent 72%);
  filter: blur(34px);
  z-index: -1;
  pointer-events: none;
}

/* L'apercu est exactement la photo de profil exportee: un disque clair, rogne
   en cercle comme Discord le fera. Le cercle est inscrit dans tout le canevas
   500x500: les coiffes hautes y tiennent; seuls les coins bas du buste sont
   coupes, comme sur n'importe quelle photo de profil. */
.dpm-vue {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--dpm-medaillon);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--dop-primary) 60%, transparent),
    0 24px 60px -18px color-mix(in srgb, var(--dop-primary) 55%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .7);
  transition: box-shadow var(--dop-dur) var(--dop-ease);
}

.dpm-vue { display: grid; place-items: center; }

/* --dpm-echelle: reduction de l'image dans le cercle (1 pour l'avatar, 0,8
   pour Dopa). On redimensionne le SVG par sa boite, jamais par son viewBox. */
.dpm-vue svg {
  display: block;
  width: calc(var(--dpm-echelle, 1) * 100%);
  height: calc(var(--dpm-echelle, 1) * 100%);
}

.dpm-legende { margin-top: 26px; color: var(--dop-ink-3); font-size: var(--dop-fs-sm); text-align: center; }

.dpm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dop-space-3);
  width: 100%;
  margin-top: var(--dop-space-5);
}

.dpm-actions .btn { padding-inline: 16px; }
.dpm-actions .btn-primary { grid-column: 1 / -1; }

.dpm-note { margin-top: 10px; color: var(--dop-ink-3); font-size: var(--dop-fs-xs); text-align: center; }
.dpm-actions .btn:disabled { opacity: .6; cursor: progress; }

/* ---------- L'inventaire ---------- */
.dpm-inventaire { min-width: 0; }

.dpm-inv-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding-bottom: var(--dop-space-4);
  border-bottom: 1px solid var(--dop-rule);
}

.dpm-inv-surtitre {
  flex-basis: 100%;
  font-weight: 700;
  font-size: var(--dop-fs-3xs);
  text-transform: uppercase;
  letter-spacing: var(--dop-tracking-eyebrow);
  color: var(--dop-ink-3);
}

.dpm-inv-titre {
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: var(--dop-tracking-tight);
  line-height: var(--dop-lh-snug);
}

.dpm-inv-compte { color: var(--dop-ink-3); font-size: var(--dop-fs-sm); }
.dpm-inv-aide { flex-basis: 100%; color: var(--dop-ink-3); font-size: var(--dop-fs-xs); line-height: var(--dop-lh-normal); }

.dpm-nuances { display: grid; gap: var(--dop-space-3); padding: var(--dop-space-4) 0; border-bottom: 1px solid var(--dop-rule); }
.dpm-nuances:empty { display: none; }

.dpm-nuance-titre { color: var(--dop-ink-2); font-size: var(--dop-fs-xs); font-weight: 700; }
.dpm-nuance-rangee { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }

.dpm-pastille {
  width: 44px;
  height: 44px;
  padding: 7px;
  border: 0;
  border-radius: var(--dop-radius-pill);
  background: transparent;
  cursor: pointer;
  transition: box-shadow var(--dop-dur-fast) var(--dop-ease);
}

.dpm-pastille::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--ton);
  box-shadow: inset 0 0 0 1px var(--dop-border-strong);
}

.dpm-pastille[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--dpm-accent); }

/* Le sac: les memes cases que le loadout, en grille verticale. */
.dpm-objets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--dop-space-5) var(--dop-space-3);
  padding: var(--dop-space-5) 6px var(--dop-space-2) 6px;
}

.dpm-objet { gap: 7px; font-size: var(--dop-fs-xs); line-height: 1.25; }
.dpm-objet-art { width: 100%; aspect-ratio: 1; }

/* "None": l'emplacement barre, centre. */
.dpm-objet:not([data-id]) .dpm-objet-art { display: grid; place-items: center; color: var(--dop-ink-3); }
.dpm-objet:not([data-id]) .dpm-objet-art svg { width: 38%; height: 38%; }

.dpm-objet-nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dpm-objet[aria-pressed="true"] { color: var(--dop-ink-1); font-weight: 700; }

.dpm-objet-grade {
  margin-top: -3px;
  font-size: var(--dop-fs-3xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--tier);
}

/* ---------- Glisser-deposer ----------
   La piece attrapee suit le pointeur, inclinee comme les captures du site;
   la case qui l'accepte s'allume, les autres s'effacent. */
.dpm-objet {
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}

.dpm.est-glisse,
.dpm.est-glisse * { cursor: grabbing; }

.dpm-objet.est-source .dpm-objet-art { border-style: dashed; transform: none; }

.dpm-fantome {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  will-change: transform;
}

.dpm-fantome .dpm-objet-art {
  border-color: var(--dpm-accent);
  box-shadow: var(--dop-shadow-card), var(--dop-shadow-pink);
}

.dpm.est-glisse .dpm-case:not(.est-cible) { opacity: .35; }

.dpm-case.est-cible .dpm-case-art {
  border: 2px dashed var(--dpm-accent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--dop-primary) 45%, transparent);
}

.dpm-case.est-survol .dpm-case-art {
  border-style: solid;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--dop-bg), 0 0 0 4px var(--dpm-accent), var(--dop-shadow-pink-lg);
}

.dpm-scene.est-cible .dpm-vue {
  box-shadow: 0 0 0 2px var(--dpm-accent),
              0 0 34px color-mix(in srgb, var(--dop-primary) 40%, transparent);
}

.dpm-scene.est-survol .dpm-vue {
  box-shadow: 0 0 0 4px var(--dpm-accent), var(--dop-shadow-pink-lg),
              0 0 48px color-mix(in srgb, var(--dop-primary) 60%, transparent);
}

/* =============================================================
   EFFETS — lumiere et reactions
   Registre "studio photo", pas "fete foraine": rien ne tourne, rien ne
   scintille en boucle. Une lumiere douce derive derriere le medaillon, une
   lunette fine l'entoure et un reflet la parcourt de temps en temps. Quand
   on equipe une piece, la lumiere s'intensifie a la couleur de sa rarete.
   L'image elle-meme change instantanement. Transform et opacity pour ce
   qui boucle; tout s'arrete sous prefers-reduced-motion.
   ============================================================= */

/* ---------- Autour du medaillon ---------- */
.dpm-cadre {
  position: relative;
  width: 100%;
  --onde: var(--dop-primary);
}

.dpm-cadre[data-onde="rare"]      { --onde: var(--dop-rare); }
.dpm-cadre[data-onde="epic"]      { --onde: var(--dop-epic); }
.dpm-cadre[data-onde="legendary"] { --onde: var(--dop-legendary); }

/* La seconde nappe de lumiere: rose clair pour l'avatar, violet pour Dopa
   (le violet est reserve au halo de la mascotte). */
.dpm           { --dpm-lueur-b: var(--dop-secondary); }
.dpm--mascotte { --dpm-lueur-b: var(--dop-purple); }

.dpm-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Lumiere de studio: deux nappes floues qui derivent tres lentement, comme
   une lumiere qu'on deplace a la main. */
.dpm-lueur {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .5;
}

.dpm-lueur--a {
  left: -14%;
  top: -12%;
  background: var(--dop-primary);
  animation: dpm-derive-a 16s ease-in-out infinite alternate;
}

.dpm-lueur--b {
  right: -14%;
  bottom: -8%;
  background: var(--dpm-lueur-b);
  opacity: .38;
  animation: dpm-derive-b 19s ease-in-out infinite alternate;
}

/* La lunette: deux filets concentriques, fixes, comme le bord d'un cadran. */
.dpm-bague,
.dpm-bague::before {
  position: absolute;
  border-radius: 50%;
}

.dpm-bague {
  inset: -4%;
  border: 1px solid color-mix(in srgb, var(--dop-text) 18%, transparent);
}

.dpm-bague::before {
  content: '';
  inset: -5%;
  border: 1px solid color-mix(in srgb, var(--dop-text) 7%, transparent);
}

/* Un reflet de lumiere traverse la lunette toutes les quelques secondes. */
.dpm-bague::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%)
              no-repeat;
  background-size: 300% 300%;
  background-position: 120% 120%;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
          mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: dpm-reflet-bague 9s ease-in-out infinite;
}

/* Le sol: une flaque de lumiere sous le medaillon. */
.dpm-cadre::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -10%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dop-primary) 42%, transparent), transparent);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
}

/* Equiper une piece: la lumiere "s'allume" a la couleur de la rarete, et un
   filet unique s'eloigne du medaillon en s'effacant. */
.dpm-onde {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1.5px var(--onde), 0 0 24px color-mix(in srgb, var(--onde) 60%, transparent);
}

.dpm-cadre.est-equipe .dpm-onde { animation: dpm-onde 900ms var(--dop-ease-out); }
.dpm-cadre.est-equipe .dpm-vue  { animation: dpm-bloom 900ms var(--dop-ease-out); }

/* ---------- Les cases du loadout ---------- */
.dpm-case { position: relative; isolation: isolate; }

/* Rayons fixes derriere les pieces epiques et legendaires equipees, comme
   les cartes de rarete de la home, et une lueur lente des le rare. */
.dpm-case[data-rarity="epic"]::before,
.dpm-case[data-rarity="legendary"]::before {
  content: '';
  position: absolute;
  top: calc(var(--dpm-case) / 2);
  left: 50%;
  width: calc(var(--dpm-case) * 1.8);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--tier) 26%, transparent) 0deg 7deg,
    transparent 7deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 26%, transparent 64%);
          mask: radial-gradient(circle, #000 26%, transparent 64%);
  z-index: -1;
  pointer-events: none;
}

.dpm-case[data-rarity="rare"]::after,
.dpm-case[data-rarity="epic"]::after,
.dpm-case[data-rarity="legendary"]::after {
  content: '';
  position: absolute;
  top: calc(var(--dpm-case) / 2);
  left: 50%;
  width: var(--dpm-case);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tier);
  filter: blur(18px);
  opacity: .28;
  z-index: -1;
  pointer-events: none;
  animation: dpm-lueur-case 5s ease-in-out infinite;
}

/* La piece "tombe" dans sa case: petit rebond, en cascade si --delai est pose. */
.dpm-case.est-pose .dpm-case-art {
  animation: dpm-pose 480ms var(--dop-ease-out) var(--delai, 0ms) both;
}

/* Pendant un glisse: la case cible respire, celle qu'on survole grossit. */
.dpm-case.est-cible .dpm-case-art { animation: dpm-cible 1.2s ease-in-out infinite; }
.dpm-case.est-survol .dpm-case-art { animation: none; }

/* ---------- L'inventaire ---------- */
/* Les pieces arrivent en cascade a l'ouverture d'une case. */
.dpm-objet { animation: dpm-entree 460ms var(--dop-ease-out) calc(var(--i, 0) * 20ms) both; }

.dpm-objet-art { position: relative; }
.dpm-objet-art svg { position: relative; }

/* Rayons fixes derriere les pieces epiques et legendaires. */
.dpm-objet[data-rarity="epic"] .dpm-objet-art::before,
.dpm-objet[data-rarity="legendary"] .dpm-objet-art::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--tier) 24%, transparent) 0deg 7deg,
    transparent 7deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 60%);
          mask: radial-gradient(circle, #000 20%, transparent 60%);
  pointer-events: none;
}

/* Un reflet balaie la case au survol; sur le legendaire, il repasse
   lentement de lui-meme, comme sur une carte holographique. */
.dpm-objet-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .2) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.dpm-objet:hover .dpm-objet-art::after {
  transform: translateX(120%);
  transition: transform 700ms var(--dop-ease);
}

.dpm-objet[data-rarity="legendary"] .dpm-objet-art::after { animation: dpm-reflet 6s ease-in-out infinite; }

/* ---------- Keyframes ---------- */
@keyframes dpm-derive-a { to { transform: translate(16%, 12%) scale(1.08); } }
@keyframes dpm-derive-b { to { transform: translate(-14%, -10%) scale(.92); } }

@keyframes dpm-reflet-bague {
  0%, 62% { background-position: 120% 120%; }
  100%    { background-position: -20% -20%; }
}

@keyframes dpm-onde {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.16); }
}

@keyframes dpm-bloom {
  0% {
    box-shadow:
      0 0 0 1px var(--onde),
      0 0 80px 8px color-mix(in srgb, var(--onde) 55%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, .7);
  }
}

@keyframes dpm-lueur-case {
  0%, 100% { opacity: .2;  transform: translate(-50%, -50%) scale(.92); }
  50%      { opacity: .42; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes dpm-pose {
  0%   { transform: scale(.85); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes dpm-cible {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes dpm-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dpm-reflet {
  0%, 70% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* ---------- Bureau: loadout colle a gauche, sac a droite ---------- */
@media (min-width: 1100px) {
  .dpm {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 4vw, 64px);
  }

  .dpm-loadout {
    position: sticky;
    top: calc(var(--nav-height) + var(--dop-space-6));
  }

  .dpm-objets {
    max-height: max(360px, calc(100vh - var(--nav-height) - 260px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--dop-space-8);
    -webkit-mask: linear-gradient(#000 calc(100% - 32px), transparent);
            mask: linear-gradient(#000 calc(100% - 32px), transparent);
  }
}

/* ---------- Mobile et tablette: personnage colle en haut ---------- */
@media (max-width: 1099px) {
  .dpm { gap: var(--dop-space-6); }

  /* Le loadout se deplie: personnage, actions, cases et sac deviennent des
     enfants directs de .dpm, pour que le personnage colle sur toute la
     hauteur du configurateur. */
  .dpm-loadout,
  .dpm-centre { display: contents; }

  .dpm-scene {
    position: sticky;
    /* Suit la barre du haut quand elle s'escamote (main.js). */
    top: var(--nav-offset, var(--nav-height));
    transition: top .25s var(--dop-ease-out);
    z-index: 5;
    display: flex;
    justify-content: center;
    width: auto;
    margin-inline: calc(-1 * var(--dpm-marge));
    padding: var(--dop-space-3) var(--dpm-marge);
    background: var(--dop-overlay);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--dop-rule);
  }

  .dpm-scene { overflow: hidden; }
  .dpm-scene::before { width: 90%; }
  .dpm-cadre { width: clamp(240px, 58vw, 300px); }
  .dpm-legende,
  .dpm-note { display: none; }
  .dpm-actions { margin-top: 0; }
  .dpm-actions .btn { flex: 1 1 auto; }

  .dpm-cases {
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: var(--dop-space-6);
    align-items: start;
  }

  .dpm-cote--look,
  .dpm-cote--gear { grid-column: auto; grid-row: auto; }
  .dpm-cote--more { grid-column: 1 / -1; grid-row: auto; }
  .dpm-cote--more .dpm-cote-titre { display: block; }

  .dpm-cote { align-items: stretch; }

  .dpm-cote-grille,
  .dpm-cote--more .dpm-cote-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--dpm-case), 1fr));
    justify-items: center;
    gap: var(--dop-space-4) var(--dop-space-3);
  }
}

@media (max-width: 620px) {
  .dpm { --dpm-case: 60px; }
  .dpm-cases { grid-template-columns: 1fr; }
  .dpm-objets { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); padding-inline: 0; }
}

/* Sans mouvement: la lumiere ne derive plus, rien ne pulse ni ne passe.
   Les etats (case ouverte, piece equipee) restent lisibles par leurs
   anneaux fixes. */
@media (prefers-reduced-motion: reduce) {
  .dpm-lueur,
  .dpm-bague::after,
  .dpm-onde,
  .dpm-vue,
  .dpm-case::after,
  .dpm-case-art,
  .dpm-objet,
  .dpm-objet-art::after { animation: none !important; }

  .dpm-bague::after { display: none; }
  .dpm-objet:hover .dpm-objet-art::after { transform: translateX(-120%); transition: none; }
}

/* ---------- La fenetre d'email ----------
   Elle s'ouvre au premier telechargement: l'image part une fois l'adresse
   donnee. C'est un controle, pas un bloc de contenu: il garde donc un fond
   et un filet, comme les champs de formulaire du site. */
.dpm-voile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--dop-space-5);
  background: rgba(10, 11, 17, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dpm-fenetre {
  width: min(420px, 100%);
  display: grid;
  gap: var(--dop-space-4);
  padding: clamp(24px, 4vw, 34px);
  border-radius: var(--dop-radius-xl);
  background: var(--dop-card);
  border: 1px solid var(--dop-border-strong);
  box-shadow: var(--dop-shadow-card), 0 0 60px -20px var(--dop-primary);
}

.dpm-fenetre-titre {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: var(--dop-lh-snug);
  letter-spacing: var(--dop-tracking-tight);
}

.dpm-fenetre-texte { color: var(--dop-ink-2); font-size: var(--dop-fs-body); line-height: var(--dop-lh-normal); }

.dpm-champ {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--dop-radius-md);
  border: 1px solid var(--dop-border-strong);
  background: rgba(255, 255, 255, .04);
  color: var(--dop-ink-1);
  font: inherit;
}

.dpm-champ::placeholder { color: var(--dop-ink-3); }
.dpm-champ:focus-visible { border-color: var(--dop-primary); outline: 2px solid var(--dop-primary); outline-offset: 2px; }

.dpm-fenetre-mention { color: var(--dop-ink-3); font-size: var(--dop-fs-xs); line-height: var(--dop-lh-normal); }
.dpm-fenetre-mention a { color: var(--dop-primary); font-weight: 700; }

.dpm-turnstile:empty { display: none; }

.dpm-fenetre-erreur { color: var(--dop-primary); font-size: var(--dop-fs-sm); font-weight: 700; }
.dpm-fenetre-erreur:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .dpm-voile { animation: dpm-voile 180ms var(--dop-ease-out); }
  .dpm-fenetre { animation: dpm-fenetre 220ms var(--dop-ease-out); }
}

@keyframes dpm-voile { from { opacity: 0; } }
@keyframes dpm-fenetre { from { opacity: 0; transform: translateY(12px); } }

/* Ces deux micro-libelles descendaient a 10px: illisibles sur telephone. */
.dpm-inv-surtitre,
.dpm-objet-grade { font-size: 12px; }

/* Le halo du second visuel deborde de 18%: il ne doit pas elargir la page. */
.av-hero { overflow-x: clip; }

/* ---------- Defiles des grades sur ecran tactile ----------
   Meme regle que la home: une bande qu'on fait glisser, sans doublons. */
@media (hover: none) and (pointer: coarse) {
  .tier-marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask: none;
            mask: none;
  }
  .tier-marquee::-webkit-scrollbar { display: none; }
  .tier-items { animation: none; }
  .tier-items li[aria-hidden="true"] { display: none; }
  .tier-items li { scroll-snap-align: start; }
}

/* Sur telephone l'apercu colle en haut prenait pres d'un tiers de l'ecran:
   il reste lisible a cette taille et laisse la place a l'inventaire. */
@media (max-width: 620px) {
  .dpm-cadre { width: clamp(150px, 44vw, 210px); }
}

/* Le suivi de la barre du haut ne s'anime pas si les animations sont reduites. */
@media (prefers-reduced-motion: reduce) {
  .dpm-scene { transition: none; }
}