:root {
  --virtue-bg: #030711;
  --virtue-card: rgba(7, 13, 25, 0.82);
  --virtue-line: rgba(232, 205, 139, 0.18);
  --virtue-gold: #ffd978;
  --virtue-gold-soft: #e8cd8b;
  --virtue-ivory: #f7edd7;
  --virtue-muted: #aeb9cc;
  --virtue-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
  --virtue-radius: 30px;
}

body.axis-virtue-page {
  margin: 0;
  color: var(--virtue-ivory);
  background:
    radial-gradient(circle at 50% -14%, rgba(255, 217, 120, 0.14), transparent 34rem),
    radial-gradient(circle at 12% 22%, rgba(123, 188, 255, 0.11), transparent 30rem),
    linear-gradient(180deg, #030711 0%, #060b16 52%, #02050d 100%);
  overflow-x: hidden;
}

body.axis-virtue-lock {
  overflow: hidden;
}

.axis-virtue-shell {
  width: min(1580px, calc(100% - 36px));
  margin: 0 auto;
  padding: 34px 0 54px;
}

.axis-virtue-kicker {
  margin: 0 0 10px;
  color: var(--virtue-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.76rem;
  font-weight: 900;
}

.axis-virtue-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 24px;
}

.axis-virtue-hero h1 {
  max-width: 950px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: #ffe7a3;
  font-size: clamp(3rem, 6.8vw, 7.1rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
}

.axis-virtue-hero p {
  max-width: 820px;
  color: var(--virtue-muted);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.75;
}

.axis-virtue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 24px;
}

.axis-virtue-actions.compact {
  margin-top: 16px;
}

.axis-virtue-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 16px;
  color: var(--virtue-ivory);
  font-weight: 850;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, border-color .16s ease;
}

.axis-virtue-btn:hover {
  transform: translateY(-1px);
}

.axis-virtue-btn.primary {
  color: #07101d;
  background: linear-gradient(135deg, var(--virtue-gold), #f3bf5b);
}

.axis-virtue-btn.secondary {
  background: rgba(7, 14, 28, 0.88);
  border-color: rgba(232, 205, 139, 0.22);
}

.axis-virtue-btn.ghost {
  color: var(--virtue-muted);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}

.axis-virtue-btn.wide {
  width: 100%;
}

.axis-virtue-protocol,
.axis-virtue-panel,
.axis-virtue-card-stage {
  border: 1px solid var(--virtue-line);
  border-radius: var(--virtue-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent),
    var(--virtue-card);
  box-shadow: var(--virtue-shadow);
}

.axis-virtue-protocol {
  padding: 28px;
  display: grid;
  align-content: center;
  gap: 10px;
}

.axis-virtue-protocol span {
  color: var(--virtue-muted);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
}

.axis-virtue-protocol strong {
  font-family: Georgia, "Times New Roman", serif;
  color: #ffe7a3;
  font-size: clamp(1.4rem, 2vw, 2.1rem);
  line-height: 1.12;
}

.axis-virtue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 450px);
  gap: 20px;
  align-items: start;
}

.axis-virtue-card-stage {
  padding: 18px;
}

.axis-virtue-card-frame {
  position: relative;
  min-height: 760px;
  height: min(82vh, 1040px);
  border-radius: 26px;
  border: 1px solid rgba(232, 205, 139, .18);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 217, 120, .12), transparent 36rem),
    #02050d;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: zoom-in;
}

.axis-virtue-card-frame img {
  display: block;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.48);
  user-select: none;
}

.axis-virtue-empty {
  display: grid;
  gap: 8px;
  text-align: center;
  color: var(--virtue-muted);
  padding: 28px;
}

.axis-virtue-empty strong {
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

.axis-virtue-lens {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 999px;
  border: 2px solid rgba(255, 217, 120, .88);
  box-shadow: 0 0 0 9999px rgba(2,5,12,.10), 0 18px 48px rgba(0,0,0,.42);
  background-repeat: no-repeat;
  pointer-events: none;
  display: none;
  z-index: 5;
}

.axis-virtue-card-frame:hover .axis-virtue-lens {
  display: block;
}

.axis-virtue-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(2,6,14,.42);
  border: 1px solid rgba(232,205,139,.12);
}

.axis-virtue-card-meta span {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #07101d;
  background: linear-gradient(135deg, var(--virtue-gold), #f3bf5b);
  font-weight: 950;
}

.axis-virtue-card-meta strong {
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
}

.axis-virtue-card-meta small {
  color: var(--virtue-muted);
}

.axis-virtue-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 96px;
}

.axis-virtue-panel {
  padding: 20px;
}

.axis-virtue-panel h2 {
  margin: 0 0 14px;
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.03em;
  font-size: 1.45rem;
}

.axis-virtue-phase {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(232,205,139,.22);
  color: var(--virtue-gold);
  background: rgba(232,205,139,.08);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
}

.axis-virtue-timer {
  margin: 14px 0 8px;
  color: var(--virtue-gold);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 950;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}

#axisVirtueGuidance {
  color: var(--virtue-muted);
  line-height: 1.6;
}

.axis-virtue-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axis-virtue-steps li {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(232,205,139,.12);
  background: rgba(2,6,14,.42);
}

.axis-virtue-steps strong {
  color: var(--virtue-ivory);
}

.axis-virtue-steps span {
  color: var(--virtue-muted);
  line-height: 1.45;
  font-size: .92rem;
}

.axis-virtue-note {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  color: var(--virtue-ivory);
  border: 1px solid rgba(232,205,139,.16);
  border-radius: 18px;
  background: rgba(2,6,14,.72);
  padding: 13px;
  line-height: 1.5;
  outline: none;
}

.axis-virtue-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(2,5,12,.96);
  backdrop-filter: blur(16px);
}

.axis-virtue-modal.hidden {
  display: none;
}

.axis-virtue-modal-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(232,205,139,.16);
  background: rgba(3,7,17,.72);
}

.axis-virtue-modal-top strong {
  color: #ffe7a3;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  margin-right: auto;
}

.axis-virtue-modal-top label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--virtue-muted);
}

.axis-virtue-modal-top input {
  accent-color: var(--virtue-gold);
}

.axis-virtue-zoom-pane {
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 28px;
}

.axis-virtue-zoom-pane img {
  max-width: none;
  transform-origin: top center;
  border-radius: 22px;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}

@media (max-width: 1120px) {
  .axis-virtue-hero,
  .axis-virtue-grid {
    grid-template-columns: 1fr;
  }

  .axis-virtue-side {
    position: static;
  }
}

@media (max-width: 720px) {
  .axis-virtue-shell {
    width: min(100% - 22px, 1580px);
  }

  .axis-virtue-card-frame {
    min-height: 560px;
    height: 70vh;
  }

  .axis-virtue-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .axis-virtue-btn {
    width: 100%;
  }
}

/* === AXIS PATCH VERTUS CARTE ENTIERE START === */

/*
  Correction ciblée Vertus :
  - empêche le cadre de couper la carte ;
  - affiche la carte entière ;
  - conserve l'esthétique existante ;
  - laisse la page scroller si la carte est grande.
*/

body.axis-vertus-page {
  overflow-x: hidden !important;
}

body.axis-vertus-page main,
body.axis-vertus-page section,
body.axis-vertus-page article {
  overflow: visible !important;
}

body.axis-vertus-page div:has(img[src*="assets/virtues/"]),
body.axis-vertus-page div:has(img[src*="assets/vertus/"]),
body.axis-vertus-page figure:has(img[src*="assets/virtues/"]),
body.axis-vertus-page figure:has(img[src*="assets/vertus/"]),
body.axis-vertus-page article:has(img[src*="assets/virtues/"]),
body.axis-vertus-page article:has(img[src*="assets/vertus/"]),
body.axis-vertus-page section:has(img[src*="assets/virtues/"]),
body.axis-vertus-page section:has(img[src*="assets/vertus/"]) {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

body.axis-vertus-page .axis-virtue-card,
body.axis-vertus-page .axis-virtue-card-frame,
body.axis-vertus-page .axis-virtue-card-wrap,
body.axis-vertus-page .axis-virtue-image,
body.axis-vertus-page .axis-virtue-image-frame,
body.axis-vertus-page .axis-virtue-result,
body.axis-vertus-page .axis-virtue-stage,
body.axis-vertus-page .axis-virtue-reader,
body.axis-vertus-page .axis-virtue-display,
body.axis-vertus-page .axis-vertu-card,
body.axis-vertus-page .axis-vertu-card-frame,
body.axis-vertus-page .axis-vertu-image,
body.axis-vertus-page .axis-vertu-image-frame,
body.axis-vertus-page .virtue-card,
body.axis-vertus-page .virtue-card-frame,
body.axis-vertus-page .virtue-card-wrap,
body.axis-vertus-page .virtue-card-preview,
body.axis-vertus-page .virtue-image,
body.axis-vertus-page .virtue-image-frame {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

body.axis-vertus-page img[src*="assets/virtues/"],
body.axis-vertus-page img[src*="assets/vertus/"] {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(100%, 820px) !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  border-radius: 28px !important;
}

body.axis-vertus-page .axis-virtue-lightbox,
body.axis-vertus-page .axis-virtue-modal,
body.axis-vertus-page .axis-vertu-lightbox,
body.axis-vertus-page .axis-vertu-modal,
body.axis-vertus-page .virtue-lightbox,
body.axis-vertus-page .virtue-modal {
  overflow: auto !important;
}

body.axis-vertus-page .axis-virtue-lightbox img,
body.axis-vertus-page .axis-virtue-modal img,
body.axis-vertus-page .axis-vertu-lightbox img,
body.axis-vertus-page .axis-vertu-modal img,
body.axis-vertus-page .virtue-lightbox img,
body.axis-vertus-page .virtue-modal img {
  width: auto !important;
  height: auto !important;
  max-width: 96vw !important;
  max-height: none !important;
  object-fit: contain !important;
}

body.axis-vertus-page .axis-virtue-meta,
body.axis-vertus-page .axis-vertu-meta,
body.axis-vertus-page .virtue-meta {
  margin-top: 18px !important;
}

@media (max-width: 860px) {
  body.axis-vertus-page img[src*="assets/virtues/"],
  body.axis-vertus-page img[src*="assets/vertus/"] {
    max-width: 96vw !important;
    border-radius: 22px !important;
  }
}

/* === AXIS PATCH VERTUS CARTE ENTIERE END === */