/* ===== Défis du compte : en-têtes de niveau présentés par les génies, filtres et cartes =====
   Fichier dédié, chargé après style.css. Le médaillon cadre le portrait CSS du génie (Genies.portrait). */

.defis-filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* En-tête de niveau : médaillon du génie, titre, présentateur, description et progression */
.defis-parcours { margin-top: 28px; padding-top: 0; border-top: none; }
.defis-niveau-entete { --teinte: #71dbb5; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid var(--bord); border-left: 5px solid var(--teinte); border-radius: var(--rayon); background: radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--teinte) 22%, transparent), transparent 60%), linear-gradient(160deg, var(--carte), var(--fond)); }
.defis-niveau-entete[data-niveau="moyen"] { --teinte: #c4a3ff; }
.defis-niveau-entete[data-niveau="fort"] { --teinte: #94c5ff; }
.defis-niveau-entete[data-niveau="champion"] { --teinte: #ff9797; }
.defis-medaillon { position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid var(--or); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--teinte) 35%, var(--fond-2)), var(--fond) 75%); box-shadow: 0 0 0 4px #0b1430, 0 0 22px color-mix(in srgb, var(--teinte) 55%, transparent); }
/* Cadrage en portrait : le buste (turban, visage, bras croisés) est centré dans le cercle,
   la lampe est rognée par le bas. Repère : le point (2.45em, 2.1em) du génie au centre du médaillon. */
.defis-medaillon .genie-choix { position: absolute; inset: 0; display: block; min-height: 0; padding: 0; background: none; border-radius: 0; }
.defis-medaillon .genie-portrait { position: absolute; left: 50%; top: 50%; font-size: 15px; margin: -2.1em 0 0 -2.45em; }
.defis-niveau-textes { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.defis-niveau-numero { color: var(--teinte); font-family: "Cinzel", Georgia, serif; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.defis-niveau-entete h2 { margin: 0; color: var(--or); font-size: 1.35rem; }
.defis-niveau-genie { margin: 0; color: var(--texte); font-size: 0.88rem; font-style: italic; }
.defis-niveau-entete .note { margin: 0; }
.defis-niveau-jauge { display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: #ffffff14; overflow: hidden; }
.defis-niveau-jauge > span { display: block; height: 100%; background: linear-gradient(90deg, var(--teinte), var(--or)); }
.defis-niveau-compte { align-self: start; padding: 6px 12px; border: 1px solid var(--or); border-radius: 999px; color: var(--or); font-family: "Cinzel", Georgia, serif; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Catégorie sous la description de chaque carte */
.defi-recompense { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #91d5ff; }
.defi-categorie { font-size: 0.72rem; font-weight: 700; color: var(--texte-doux); letter-spacing: 0.02em; }

@media (max-width: 560px) {
  .defis-filtres { grid-template-columns: 1fr; }
  .defis-niveau-entete { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .defis-medaillon { width: 72px; height: 72px; }
  .defis-medaillon .genie-portrait { font-size: 10.5px; }
  .defis-niveau-compte { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .defis-medaillon * { animation: none !important; }
}