/* ==========================================================================
   ORACLYS — Les 3 oracles gratuits
   Palette : bleu nuit, violet mystique, turquoise, or lumineux, rose
   Mobile d'abord : tout s'empile, puis s'élargit.
   ========================================================================== */

.orc-body {
  background:
    radial-gradient(1100px 620px at 50% -140px, rgba(91, 58, 142, .55), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, rgba(31, 158, 147, .28), transparent 66%),
    radial-gradient(700px 500px at 4% 30%, rgba(185, 144, 43, .14), transparent 68%),
    linear-gradient(180deg, #070E19 0%, #0C1524 42%, #101C2E 100%);
  background-attachment: fixed;
}

/* ------------------------------------------------------------ entrée */

.orc-hero {
  position: relative;
  overflow: hidden;
  margin: 8px 0 26px;
  padding: 34px 20px 36px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(235, 215, 156, .22);
  background:
    radial-gradient(620px 300px at 50% 0%, rgba(91, 58, 142, .58), transparent 70%),
    linear-gradient(165deg, rgba(16, 28, 46, .96), rgba(8, 14, 24, .98));
  box-shadow: 0 26px 70px rgba(4, 9, 18, .55), inset 0 1px 0 rgba(235, 215, 156, .10);
}

.orc-hero-sm { padding: 28px 18px 30px; }

.orc-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 240px;
  background: radial-gradient(closest-side, rgba(217, 180, 87, .20), transparent);
  pointer-events: none;
}

.orc-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #F7EFD9 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 62%, #EBE0C6 40%, transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 26%, #FFFFFF 40%, transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 74%, #DCE9F2 40%, transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 34%, #F7EFD9 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 66%, #FFFFFF 40%, transparent 60%),
    radial-gradient(1.1px 1.1px at 55% 86%, #EBE0C6 40%, transparent 60%);
  animation: orcTwinkle 5.5s ease-in-out infinite alternate;
}

@keyframes orcTwinkle {
  from { opacity: .32; }
  to   { opacity: .78; }
}

.orc-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #EBD79C;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(235, 215, 156, .34);
  background: rgba(235, 215, 156, .07);
}

.orc-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1.08;
  margin: 0 0 14px;
  color: #FBF7EF;
  text-shadow: 0 2px 26px rgba(217, 180, 87, .30);
}

.orc-lead {
  max-width: 620px;
  margin: 0 auto 20px;
  color: rgba(251, 247, 239, .80);
  font-size: 15px;
  line-height: 1.65;
}

.orc-small {
  font-size: 12.5px;
  color: rgba(251, 247, 239, .58);
  margin: 10px 0 0;
}

/* ------------------------------------------------------------ boutons */

.orc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  font-family: var(--sans);
}

.orc-btn:active { transform: scale(.98); }

.orc-btn-go {
  color: #1A1206;
  background: linear-gradient(135deg, #EBD79C, #D9B457 55%, #B9902B);
  box-shadow: 0 8px 24px rgba(185, 144, 43, .34);
}

.orc-btn-go:hover { box-shadow: 0 10px 30px rgba(217, 180, 87, .46); }

.orc-btn-ghost {
  color: #F3ECDF;
  background: rgba(251, 247, 239, .06);
  border-color: rgba(235, 215, 156, .30);
}

.orc-btn-ghost:hover { background: rgba(251, 247, 239, .12); }

.orc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

/* ------------------------------------------------------------ choix des oracles */

.orc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 30px;
}

.orc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 20px 20px;
  border-radius: 20px;
  border: 1px solid rgba(235, 215, 156, .20);
  background: linear-gradient(170deg, rgba(20, 34, 54, .96), rgba(10, 17, 28, .98));
  box-shadow: 0 16px 40px rgba(4, 9, 18, .45);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.orc-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--orc-accent, #D9B457), transparent);
  opacity: .85;
}

.orc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 215, 156, .44);
  box-shadow: 0 22px 54px rgba(4, 9, 18, .60);
}

.orc-u-rose      { --orc-accent: #E58FA8; }
.orc-u-or        { --orc-accent: #D9B457; }
.orc-u-turquoise { --orc-accent: #20B8B0; }

.orc-card-glyph {
  font-size: 34px;
  line-height: 1;
  color: var(--orc-accent, #D9B457);
  text-shadow: 0 0 24px currentColor;
  opacity: .92;
}

.orc-card-name {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  color: #FBF7EF;
  line-height: 1.15;
}

.orc-card-text {
  color: rgba(251, 247, 239, .74);
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
}

.orc-card-cta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--orc-accent, #D9B457);
}

/* ------------------------------------------------------------ explications */

.orc-how {
  padding: 26px 20px;
  border-radius: 20px;
  border: 1px solid rgba(235, 215, 156, .16);
  background: rgba(11, 19, 31, .72);
  margin-bottom: 10px;
}

.orc-how h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: #FBF7EF;
  margin: 0 0 16px;
}

.orc-steps {
  margin: 0;
  padding-left: 20px;
  color: rgba(251, 247, 239, .80);
  font-size: 14.5px;
  line-height: 1.7;
}

.orc-steps li { margin-bottom: 10px; }
.orc-steps strong { color: #EBD79C; font-weight: 600; }

.orc-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 3px solid rgba(235, 215, 156, .44);
  background: rgba(235, 215, 156, .05);
  color: rgba(251, 247, 239, .62);
  font-size: 12.5px;
  line-height: 1.6;
}

.orc-note-bottom { margin-bottom: 20px; }

/* ------------------------------------------------------------ fil d'ariane */

.orc-crumb {
  font-size: 13px;
  color: rgba(251, 247, 239, .62);
  margin: 4px 0 14px;
}

.orc-crumb a { color: rgba(235, 215, 156, .92); }

/* ------------------------------------------------------------ historique */

.orc-hist {
  margin-bottom: 22px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(235, 215, 156, .16);
  background: rgba(11, 19, 31, .66);
}

.orc-hist h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: #FBF7EF;
  margin: 0 0 10px;
}

.orc-hist ul { margin: 0; padding-left: 18px; color: rgba(251, 247, 239, .80); font-size: 14px; }
.orc-hist li { margin-bottom: 6px; }
.orc-hist a { color: #EBD79C; }

/* ------------------------------------------------------------ tirage */

.orc-spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.orc-slot { margin: 0; }

.orc-flip {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 1200px;
  font-family: var(--sans);
}

.orc-back,
.orc-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 2 / 3;
  width: 100%;
  padding: 10px 8px;
  border-radius: 14px;
  backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.22, .68, .28, 1), opacity .35s ease;
}

.orc-back {
  position: relative;
  background:
    radial-gradient(circle at 50% 30%, rgba(91, 58, 142, .85), transparent 62%),
    repeating-linear-gradient(45deg, rgba(235, 215, 156, .09) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #16263C, #0A1220);
  border: 1px solid rgba(235, 215, 156, .34);
  box-shadow: inset 0 0 28px rgba(91, 58, 142, .40), 0 12px 30px rgba(4, 9, 18, .50);
}

.orc-back-mark {
  font-size: 26px;
  color: #EBD79C;
  text-shadow: 0 0 18px rgba(217, 180, 87, .75);
  animation: orcPulse 3.4s ease-in-out infinite;
}

@keyframes orcPulse {
  0%, 100% { opacity: .62; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.orc-back-pos {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(235, 215, 156, .78);
  text-align: center;
  line-height: 1.3;
}

.orc-front {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: rotateY(-180deg);
  background: linear-gradient(168deg, #FBF7EF, #EFE6D4 62%, #E6DAC4);
  border: 1px solid rgba(185, 144, 43, .46);
  box-shadow: 0 14px 34px rgba(4, 9, 18, .50), inset 0 0 0 3px rgba(255, 255, 255, .55);
}

.orc-slot.on .orc-back  { opacity: 0; transform: rotateY(180deg); }
.orc-slot.on .orc-front { opacity: 1; transform: rotateY(0deg); }

.orc-front-glyph {
  font-size: 27px;
  line-height: 1;
  color: #5B3A8E;
}

.orc-t-l { color: #B9902B; }
.orc-t-o { color: #5B3A8E; }
.orc-t-n { color: #1F9E93; }

.orc-front-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: #131C2B;
}

.orc-front-pos {
  font-size: 9.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
  color: #7A6A4E;
  line-height: 1.25;
}

/* Lectures : hors des cartes, dans une grille large et lisible. */

.orc-reads {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 26px;
}

.orc-read-card {
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(235, 215, 156, .20);
  border-left: 3px solid rgba(217, 180, 87, .62);
  background: linear-gradient(170deg, rgba(18, 30, 48, .90), rgba(10, 17, 28, .94));
  animation: orcFade .4s ease both;
}

.orc-read-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 7px;
}

.orc-read-pos {
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #EBD79C;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(235, 215, 156, .30);
  background: rgba(235, 215, 156, .08);
}

.orc-read-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: #FBF7EF;
}

.orc-read-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: rgba(251, 247, 239, .86);
}

@keyframes orcFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ synthèse */

.orc-synth {
  padding: 26px 20px;
  border-radius: 22px;
  border: 1px solid rgba(235, 215, 156, .28);
  background:
    radial-gradient(560px 240px at 50% 0%, rgba(91, 58, 142, .42), transparent 72%),
    linear-gradient(170deg, rgba(18, 31, 50, .96), rgba(8, 14, 24, .98));
  box-shadow: 0 22px 60px rgba(4, 9, 18, .52);
  margin-bottom: 20px;
  animation: orcFade .5s ease both;
}

.orc-synth h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 26px;
  color: #FBF7EF;
  margin: 0 0 14px;
  text-align: center;
}

.orc-synth-text {
  margin: 0 0 16px;
  color: rgba(251, 247, 239, .86);
  font-size: 14.5px;
  line-height: 1.72;
}

.orc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.orc-chip {
  font-size: 11.5px;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 6px;
  color: #EBD79C;
  border: 1px solid rgba(235, 215, 156, .32);
  background: rgba(235, 215, 156, .07);
}

#orcShareOut {
  text-align: center;
  color: #20B8B0;
}

/* ------------------------------------------------------------ écrans larges */

@media (min-width: 560px) {
  .orc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orc-spread { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 768px) {
  .orc-hero { padding: 52px 40px 56px; }
  .orc-hero-sm { padding: 42px 34px 44px; }
  .orc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .orc-card { padding: 30px 24px 24px; }
  .orc-spread { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .orc-how, .orc-synth { padding: 34px 32px; }
  .orc-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .orc-read-card p { font-size: 14.5px; }
}

@media (min-width: 1100px) {
  /* Les sept cartes sur une seule rangée, comme un vrai tirage étalé. */
  .orc-spread { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
  .orc-front-name { font-size: 14px; }
  .orc-front-glyph { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .orc-back, .orc-front, .orc-read-card, .orc-synth, .orc-card { transition: none; animation: none; }
}