:root {
  --gold: #d4af37;
  --bg: #0b0b12;
  --panel: #111;
  --gold-light: rgba(212, 175, 55, .08);
  --gold-shadow: rgba(212, 175, 55, .25);
  --gold-shadow-strong: rgba(212, 175, 55, .7);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-card: 0 0 10px rgba(255, 255, 255, .3), 0 0 25px rgba(255, 200, 120, .25);
  --shadow-hover: 0 0 15px rgba(255, 255, 255, .5), 0 0 20px rgba(212, 175, 55, .7);
  --shadow-panel: 0 0 15px rgba(0, 0, 0, .8), 0 0 20px rgba(212, 175, 55, .25)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
body {
  overflow-x: hidden;
}
.ORTIR-container, .ORACLES-TIRAGES, .centertir4, #tir4app {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important
}
.ORACLES-TIRAGES {
  display: block;
  position: relative
}
.ORTIR-container {
  margin: 0
}
.tir4app {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}
.centertir4 {
  display: flex;
  justify-content: center
}
.tir4app * {
  box-sizing: border-box
}
#tir4app {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0
}
.tir4-intro-image {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(214, 180, 106, .7);
  border-radius: 18px;
  box-shadow: 0 0 30px rgba(214, 180, 106, .25), 0 15px 40px rgba(0, 0, 0, .45);
  line-height: 0
}
.tir4-intro-image img {
  display: block;
  width: 100%;
  height: auto
}
.tir4-intro-texte {
  margin: 25px auto;
  max-width: 520px;
  line-height: 1.7;
  font-size: 18px;
  color: #ddd
}
.tir4-left {
  flex: 0 0 55%;
  width: 55%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible
}
.tir4-right {
  flex: 0 0 45%;
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  overflow: visible
}
.tir4-left > *, .tir4-right > * {
  margin-left: auto;
  margin-right: auto
}
.tir4-left {
  padding-left: 0
}
.tir4houses {
  width: max-content;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 auto
}
.tir4col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}
.tir4button {
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  background: var(--gold);
  font-weight: bold
}
.tir4hidden {
  display: none !important;
}
.hidden {
  display: none !important;
}
.tir4intro {
  text-align: center;
  padding: 40px 20px 0
}
.tir4selected-area {
  display: flex;
  justify-content: center;
  margin: 20px 0
}
.tir4house {
  width: 52px;
  height: 105px;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-md);
  perspective: 1000px;
  cursor: pointer
}
.tir4house:hover {
  outline: 1px solid rgba(212, 175, 55, .5)
}
.tir4house.active {
  outline: 2px solid var(--gold);
  transform: scale(1.05)
}
.tir4house-title {
  font-size: 10px
}
.tir4house-header {
  width: 100%;
  margin: 5px auto 5px;
  padding: 5px 0px;
  border: 1px solid rgba(212, 175, 55, .25);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  text-align: center
}
.tir4house-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.tir4house-header .tir4desc {
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.4;
  color: #d8d8d8;
  max-width: 580px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.tir4card {
  width: 38px;
  height: 76px;
  cursor: pointer;
  background: url("../images/dos-cartes.png") center/cover;
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  transition: transform .6s;
  box-shadow: var(--shadow-card);
  perspective: 1000px
}
.tir4card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .8s
}
.tir4card.flipped .tir4card-inner {
  transform: rotateY(180deg)
}
.tir4card-front, .tir4card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  pointer-events: none
}
.tir4card-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center
}
.tir4card.selected {
  visibility: hidden;
  pointer-events: none
}
.tir4minor {
  width: 50px;
  height: 97px
}
.tir4ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 300px;
  padding: 10px;
  margin-top: 0;
  overflow-x: auto
}
.tir4ribbon-card {
  opacity: 0;
  flex-shrink: 0;
  transform: translateY(30px);
  transition: transform .25s ease, box-shadow .25s ease, opacity .5s ease
}
.tir4ribbon-card.show {
  opacity: 1;
  transform: translateY(0)
}
.tir4ribbon-card:hover {
  transform: translateY(-12px) scale(1.05);
  z-index: 10;
  box-shadow: var(--shadow-hover)
}
#tir4interpretationPanel {
  position: relative;
  flex-basis: 100%;
  width: min(820px, 95%);
  height: auto;
  margin: 0 auto;
  padding: 10px 14px;
  background: rgba(17, 17, 17, .95);
  color: #fff;
  overflow-y: auto;
  z-index: 10;
  border-radius: 15px
}
#tir4interpretationPanel.active {
  position: relative;
  width: 100%;
  height: auto
}
.tir4panel-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px
}
.tir4panel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin: 0;
  max-width: 100%;
  box-sizing: border-box
}
.tir4panel-content img {
  width: 120px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md)
}
.tir4panel-content h2, .tir4panel-content h3, .tir4panel-content .desc {
  text-align: center
}
.tir4panel-content > h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--gold)
}
.tir4major-box {
  width: 100%;
  padding: 5px;
  margin: 0px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(212, 175, 55, .15);
  transition: .25s
}
.tir4major-display {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: start;
  text-align: center
}
.tir4major-display img {
  width: 90px;
  margin: 10px 0 0;
  border-radius: 10px
}
.tir4major-display h3, .tir4major-content h3 {
  margin: 0;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  min-height: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center
}
.tir4major-content {
  display: flex;
  flex-direction: column;
  gap: 10px
}
.tir4major-meaning, .tir4major-meaning p, .major-meaning {
  margin: 0;
  padding: 0;
  font-size: 13px !important;
  line-height: 1.4;
  color: #d8d8d8
}
.major-meaning {
  min-height: 2.8em;
  max-height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.tir4house-context {
  grid-column: 1/-1;
  margin-bottom: 0;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  height: 52px;
  border-radius: 10px;
  background: rgba(212, 175, 55, .06);
  border-left: 3px solid var(--gold);
  color: #ddd;
  font-style: italic;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tir4house-context p {
  margin-bottom: 0px;
}
.tir4major-display h3, .tir4major-meaning, .tir4house-context {
  text-align: left
}
.tir4reading-order {
  width: 100%;
  margin-top: 0
}
.tir4reading-title {
  font-size: 13px;
  padding: 0;
  margin-bottom: 0
}
.tir4reading-order > p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.35;
  min-height: 2.7em;
  max-height: 2.7em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.tir4minor-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
.tir4minor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 115px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(212, 175, 55, .15);
  transition: .25s
}
.tir4minor-item:hover {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, .15)
}
.tir4mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(60px, 8vw, 80px);
  aspect-ratio: 2/3;
  margin: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden
}
.tir4mini-text {
  margin-top: 0;
  font-size: 14px;
  text-align: center
}
.tir4mini-number {
  margin-bottom: 0;
  font-weight: bold;
  color: var(--gold);
  font-size: 13px
}
.tir4mini-meaning {
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  min-height: calc(1.3em * 5);
  max-height: calc(1.3em * 5)
}
.tir4nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: sticky;
  bottom: 0;
  margin-top: 10px
}
.tir4nav button {
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  font-size: 20px
}
.ORACLES-TIRAGES:fullscreen #tir4interpretationPanel.active {
  position: absolute;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 95vw;
  max-width: 1600px;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 99999;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 0 30px rgba(0, 0, 0, .6)
}
.tir4guidebar {
  width: 300px;
  text-align: center;
  padding: 12px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, .3);
  background: rgba(212, 175, 55, .05);
  letter-spacing: 1px
}
.tir4start-button {
  padding: 14px 28px;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212, 175, 55, .15), rgba(0, 0, 0, .6));
  color: var(--gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, .2), 0 0 35px rgba(212, 175, 55, .1);
  transition: all .25s ease;
  animation: glowPulse 3s infinite ease-in-out
}
.tir4start-button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 20px rgba(212, 175, 55, .4), 0 0 60px rgba(212, 175, 55, .25);
  background: linear-gradient(135deg, rgba(212, 175, 55, .25), rgba(0, 0, 0, .7))
}
.tir4start-button:active {
  transform: scale(.98);
  box-shadow: 0 0 10px rgba(212, 175, 55, .2)
}
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(212, 175, 55, .15)
  }
  50% {
    box-shadow: 0 0 25px rgba(212, 175, 55, .35)
  }
}

@media (max-width:1280px) {
  body.tirage-active .intro-switch-layer .tirage {
    position: static;
  }
  #tir4app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 35px;
    width: 100%;
  }
  .tir4-left, .tir4-right {
    width: 100%;
    max-width: 100%;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
  }
  .tir4-right {
    flex-direction: column;
  }
  .tir4houses {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    transform: none;
    width: auto;
    margin: auto;
  }
  .tir4col {
    gap: 14px;
  }
  .tir4house {
    width: 68px;
    height: 118px;
  }
  .tir4house-title {
    font-size: 12px;
    margin-top: 4px;
  }
  .tir4card {
    width: 46px;
    height: 88px;
  }
  .tir4minor {
    width: 46px;
    height: 88px;
  }
  .tir4ribbon {
    width: 100%;
    max-width: 760px;
    justify-content: center;
    gap: 12px;
  }
  .tir4guidebar {
    width: min(700px, 95%);
    text-align: center;
  }
  #tir4interpretationPanel {
    width: min(900px, 100%);
    margin: auto;
  }
  .tir4house-header h2 {
    font-size: 24px;
  }
  .tir4house-header .tir4desc {
    font-size: 15px;
  }
  .tir4major-display {
    grid-template-columns: 110px 1fr;
  }
  .tir4major-display img {
    width: 110px;
  }
  .tir4major-display h3 {
    font-size: 24px;
  }
  .tir4major-meaning, .tir4house-context, .tir4reading-order p {
    font-size: 15px !important;
    line-height: 1.55;
  }
  .tir4mini-number {
    font-size: 15px;
  }
  .tir4mini-meaning {
    font-size: 13px;
  }
}

@media (max-width:768px) {
  body.tirage-active .intro-switch-layer .tirage {
    position: static;
  }
  .centertir4, #tir4majorRibbon, #tir4interpretationPanel {
    margin-bottom: 80px !important;
  }
  .tir4houses {
    gap: 12px;
  }
  .tir4col {
    gap: 8px;
  }
  .tir4house {
    width: 54px;
    height: 100px;
  }
  .tir4house-title {
    font-size: 10px;
  }
  .tir4card {
    width: 36px;
    height: 72px;
  }
  .tir4minor {
    width: 36px;
    height: 72px;
  }
  .tir4guidebar {
    font-size: 13px;
  }
  .tir4major-display {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .tir4major-display img {
    margin: auto;
  }
  .tir4major-display h3, .tir4major-meaning, .tir4house-context {
    text-align: center;
  }
  #tir4interpretationPanel .tir4minor-item {
    grid-template-columns: 75px 1fr;
    gap: 12px;
  }
  #tir4interpretationPanel .tir4mini-card {
    width: 70px;
  }
}
@media(max-width:768px) {
  .tir4nav {
    width: 100%;
    max-width: 100%;
    gap: 8px;
    overflow: hidden;
  }
  .tir4nav button {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 34px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
  }
	.tir4panel-content > h3 {
    margin: 10px 0px 5px 0px;
}

.tir4panel-content img {
    margin: 10px 0px 0px 0px;
    padding: 0;
}
}