/* The hero of the home page in the night of the member space, where « Jouer » leads to the space
   (template/homepage/section1.php, 2026-10-16). Loaded after homePage.css and home-v2.css, only there
   (template/homepage/homePage.php). The same texts, links and buttons as the other hero, under the lamp and the
   stars of the space, with its games turning around the flame of Lovely Couple (the turn:
   static/js/homePage/index.js). Every drawing sits in a box of fixed size, so nothing moves around it; only
   transforms and opacity move; still for those who ask for less motion. */

/* ---------- The sky ---------- */
.lc-v2-hero.lc-v2-hero--night {
  isolation: isolate;
  background:
    radial-gradient(90% 38% at 50% 0%, rgba(247, 37, 133, .30), transparent 70%),
    radial-gradient(70% 45% at 100% 85%, rgba(139, 44, 246, .30), transparent 70%),
    linear-gradient(176deg, #1a0722 0%, #2a0f33 32%, #3b163f 64%, #4a1d6e 100%);
  color: #fff;
}

.lc-heroNight__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The lamp above the table of the games, breathing. */
.lc-heroNight__lamp {
  position: absolute;
  top: -190px;
  left: 50%;
  width: 640px;
  height: 460px;
  margin-left: -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 128, 186, .42), rgba(247, 37, 133, .14) 55%, transparent);
}

.lc-heroNight__stars {
  position: absolute;
  inset: 0;
  background: var(--lc-stars);
  background-size: 100% 100%;
}

.lc-heroNight__light {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 72%);
  box-shadow: 0 0 calc(var(--s) * 1.6) var(--c);
  opacity: .6;
}

.lc-v2-hero--night .lc-v2-heroGrid {
  position: relative;
  z-index: 2;
}

/* ---------- The texts ---------- */
.lc-v2-hero--night .lc-v2-heroContent h1 {
  text-shadow: 0 0 34px rgba(247, 37, 133, .35);
}

.lc-v2-hero--night .lc-v2-kicker {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #ffd98a;
}

.lc-v2-hero--night .lc-v2-kicker::before {
  background: #ff7ab8;
  box-shadow: 0 0 0 6px rgba(255, 122, 184, .16), 0 0 14px rgba(255, 122, 184, .8);
}

.lc-v2-hero--night .lc-v2-lead {
  color: rgba(255, 255, 255, .82);
}

/* ---------- The games around the flame ---------- */
.lc-orbit {
  --rx: 126px;
  --ry: 42px;
  --tile: 68px;
  position: relative;
  max-width: 360px;
  height: 236px;
  margin: 2px auto 6px;
}

/* The table under the ring: a pool of light. */
.lc-orbit__table {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 310px;
  height: 74px;
  margin-left: -155px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 37, 133, .34), rgba(139, 44, 246, .16) 62%, transparent);
}

.lc-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 84px;
  height: 84px;
  margin: -50px 0 0 -42px;
}

.lc-orbit__core img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  box-shadow: 0 18px 40px rgba(200, 16, 90, .5), 0 0 0 3px rgba(255, 255, 255, .16);
}

.lc-orbit__halo {
  position: absolute;
  inset: -38px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 184, .6), rgba(247, 37, 133, .2) 55%, transparent);
}

.lc-orbit__tile {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)),
    #3a1645;
  box-shadow: 0 16px 30px rgba(10, 2, 18, .5);
  transform: translate(calc(var(--x) * var(--rx)), calc(var(--y) * var(--ry))) scale(var(--s));
  opacity: var(--o);
  will-change: transform, opacity;
}

/* The drawings of the games, as in the lobby (static/css/espace.css, « The drawings of the tiles »). */
.lc-orbit .esp-art {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  height: 40px;
}

.lc-orbit .esp-art--aov { width: 49px; }
.lc-orbit .esp-art--wyr { width: 52px; }
.lc-orbit .esp-art--wheel { width: 40px; }
.lc-orbit .esp-art--who { width: 74px; transform: scale(.8); }

.lc-orbit .esp-art--aov span {
  position: absolute;
  top: 2px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 36px;
  border-radius: 7px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.lc-orbit .esp-art--aov span:first-child {
  left: 0;
  background: linear-gradient(155deg, #9b8cff, #5132d8);
  transform: rotate(-10deg);
}

.lc-orbit .esp-art--aov span:last-child {
  left: 22px;
  background: linear-gradient(155deg, #ff7eb3, #c8105a);
  transform: rotate(8deg);
}

.lc-orbit .esp-art--wyr span {
  position: absolute;
  top: 2px;
  width: 24px;
  height: 36px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.lc-orbit .esp-art--wyr span:nth-child(1) {
  left: 0;
  border-radius: 8px 3px 3px 8px;
  background: linear-gradient(150deg, #6c4dff, #9b3dff);
}

.lc-orbit .esp-art--wyr span:nth-child(2) {
  left: 28px;
  border-radius: 3px 8px 8px 3px;
  background: linear-gradient(150deg, #e0156f, #f0503a);
}

.lc-orbit .esp-art--wyr span:nth-child(3) {
  top: 9px;
  left: 26px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
  color: #2a0f33;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
}

.lc-orbit .esp-art--who span {
  position: absolute;
  top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

.lc-orbit .esp-art--who span:nth-child(1) {
  left: 0;
  background: linear-gradient(150deg, #6c4dff, #9b3dff);
}

.lc-orbit .esp-art--who span:nth-child(2) {
  left: 42px;
  background: linear-gradient(150deg, #e0156f, #f0503a);
}

.lc-orbit .esp-art--who span:nth-child(3) {
  top: 10px;
  left: 27px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: #ffd98a;
  box-shadow: none;
}

.lc-orbit .esp-art--wheel span:first-child {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 50%;
  background: conic-gradient(#e0156f 0deg 60deg, #ffb070 60deg 110deg, #6c4dff 110deg 170deg, #b5179e 170deg 230deg, #ffd98a 230deg 270deg, #9b3dff 270deg 360deg);
}

.lc-orbit .esp-art--wheel span:last-child {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}

.lc-orbit :is(.esp-art__die, .esp-art__heart) {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Jouer en ligne ---------- */
.lc-heroNight__play {
  margin: 0 0 24px;
}

.lc-heroNight__cta,
.lc-heroNight__cta:visited {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  min-height: 60px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4f9a 0%, #e0156f 46%, #8b2cf6 100%);
  box-shadow: 0 18px 44px rgba(224, 21, 111, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  color: #fff !important;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -.01em;
  text-decoration: none !important;
  transition: transform .15s ease;
}

.lc-heroNight__cta:hover {
  color: #fff !important;
  transform: translateY(-2px);
}

.lc-heroNight__cta:active {
  transform: scale(.98);
}

/* ---------- The app, in a pane of glass ---------- */
.lc-v2-hero--night .lc-heroNight__app {
  margin-top: 22px;
  padding: 18px 16px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
}

/* ---------- The app's figures, in the first screen, right before « Jouer en ligne » ---------- */
.lc-heroNight__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 460px;
  margin: 0 auto 14px;
  padding: 10px 2px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  list-style: none;
}

.lc-heroNight__proof li {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 0 3px;
  text-align: center;
}

.lc-heroNight__proof li + li {
  border-left: 1px solid rgba(255, 255, 255, .12);
}

.lc-heroNight__proof strong {
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* The labels go to the line between words, never inside one (« Téléchargements » fits from 320 px). */
.lc-heroNight__proof span {
  color: rgba(255, 255, 255, .74);
  font-size: clamp(9px, 2.7vw, 10.5px);
  font-weight: 700;
  line-height: 1.25;
  hyphens: manual;
  overflow-wrap: normal;
}

/* On a phone, the ring a little lower and the hero a little higher: the figures and the button in the first screen. */
@media (max-width: 980px) {
  .lc-homeV2 .lc-v2-hero.lc-v2-hero--night {
    padding-top: 24px;
  }

  .lc-v2-hero--night .lc-v2-heroContent h1 {
    margin-bottom: 4px;
  }

  .lc-orbit {
    --rx: 122px;
    --ry: 36px;
    --tile: 64px;
    height: 196px;
  }

  .lc-orbit__table {
    bottom: 6px;
  }
}

/* ---------- On a computer: the texts on the left, the ring on the right, larger ---------- */
@media (min-width: 981px) {
  .lc-v2-hero--night .lc-v2-heroGrid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: 56px;
    row-gap: 0;
    align-items: start;
  }

  .lc-v2-hero--night .lc-v2-heroContent {
    display: contents;
  }

  .lc-v2-hero--night .lc-v2-heroContent > * {
    grid-column: 1;
  }

  .lc-v2-hero--night .lc-v2-kicker {
    justify-self: start;
  }

  .lc-v2-hero--night .lc-v2-heroContent h1 {
    font-size: clamp(40px, 4.6vw, 64px) !important;
  }

  /* Beside the title, the button and the first lines. */
  .lc-v2-hero--night .lc-orbit {
    --rx: 196px;
    --ry: 66px;
    --tile: 100px;
    grid-row: 1 / 5;
    grid-column: 2;
    align-self: center;
    width: 100%;
    max-width: 520px;
    height: 440px;
    margin: 0 auto;
  }

  .lc-v2-hero--night .lc-orbit__tile {
    border-radius: 30px;
  }

  .lc-v2-hero--night .lc-orbit .esp-art {
    transform: scale(1.4);
  }

  .lc-v2-hero--night .lc-orbit .esp-art--who {
    transform: scale(1.15);
  }

  .lc-v2-hero--night .lc-orbit__core {
    width: 124px;
    height: 124px;
    margin: -72px 0 0 -62px;
  }

  .lc-v2-hero--night .lc-orbit__core img {
    border-radius: 36px;
  }

  .lc-v2-hero--night .lc-orbit__table {
    bottom: 60px;
    width: 470px;
    height: 110px;
    margin-left: -235px;
  }

  .lc-v2-hero--night .lc-heroNight__cta {
    max-width: 340px;
    margin: 0;
  }

  .lc-v2-hero--night .lc-heroNight__proof {
    width: 100%;
    max-width: 520px;
    margin: 10px 0 20px;
    padding: 14px 4px;
  }

  .lc-v2-hero--night .lc-heroNight__proof strong {
    font-size: 24px;
  }

  .lc-v2-hero--night .lc-heroNight__proof span {
    font-size: 12px;
  }
}

/* ---------- The movements, for those who want them ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lc-heroNight__lamp {
    animation: lc-night-lamp 7s ease-in-out infinite;
  }

  .lc-heroNight__light {
    animation: lc-night-drift var(--d) ease-in-out var(--delay) infinite alternate;
  }

  .lc-orbit__halo {
    animation: lc-night-halo 3.4s ease-in-out infinite;
  }

  .lc-heroNight__cta::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    animation: lc-night-sweep 6s ease-in-out 1.6s infinite;
    pointer-events: none;
  }

  .lc-orbit .esp-art--aov span:first-child { animation: lc-art-sway-left 4.4s ease-in-out infinite; }
  .lc-orbit .esp-art--aov span:last-child { animation: lc-art-sway-right 4.4s ease-in-out infinite; }
  .lc-orbit .esp-art__die { animation: lc-art-die-hop 5.2s cubic-bezier(.3, .7, .3, 1) 1s infinite; }
  .lc-orbit .esp-art__die + .esp-art__die { animation-delay: 1.12s; }
  .lc-orbit .esp-art__heart { animation: lc-art-heartbeat 2.8s ease-in-out .4s infinite; }
  .lc-orbit .esp-art--wyr span:nth-child(1) { animation: lc-art-nudge-left 3.8s ease-in-out .6s infinite; }
  .lc-orbit .esp-art--wyr span:nth-child(2) { animation: lc-art-nudge-right 3.8s ease-in-out .6s infinite; }
  .lc-orbit :is(.esp-art--wyr, .esp-art--who) span:nth-child(3) { animation: lc-art-pop 3.4s ease-in-out 1.4s infinite; }
  .lc-orbit .esp-art--who span:nth-child(1) { animation: lc-art-nudge-right 3.4s ease-in-out 1.4s infinite; }
  .lc-orbit .esp-art--who span:nth-child(2) { animation: lc-art-nudge-left 3.4s ease-in-out 1.4s infinite; }
  .lc-orbit .esp-art--wheel span:first-child { animation: lc-art-turn 16s linear infinite; }
}

@keyframes lc-night-lamp {
  0%, 100% { opacity: .78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes lc-night-drift {
  from { transform: translate3d(0, 0, 0); opacity: .35; }
  to { transform: translate3d(0, -28px, 0); opacity: .9; }
}

@keyframes lc-night-halo {
  0%, 100% { opacity: .7; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes lc-night-sweep {
  0%, 62% { left: -60%; }
  86%, 100% { left: 130%; }
}

@keyframes lc-art-sway-left {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: translateX(-2px) rotate(-16deg); }
}

@keyframes lc-art-sway-right {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: translateX(2px) rotate(14deg); }
}

@keyframes lc-art-die-hop {
  0%, 70%, 100% { transform: none; }
  78% { transform: translateY(-6px) rotate(180deg); }
  86% { transform: translateY(0) rotate(360deg); }
  91% { transform: translateY(-1.5px) rotate(360deg); }
}

@keyframes lc-art-heartbeat {
  0%, 36%, 100% { transform: none; }
  9% { transform: scale(1.2); }
  18% { transform: none; }
  27% { transform: scale(1.12); }
}

@keyframes lc-art-nudge-left {
  0%, 60%, 100% { transform: none; }
  75% { transform: translateX(-3px); }
}

@keyframes lc-art-nudge-right {
  0%, 60%, 100% { transform: none; }
  75% { transform: translateX(3px); }
}

@keyframes lc-art-pop {
  0%, 60%, 100% { transform: none; }
  75% { transform: scale(1.18); }
}

@keyframes lc-art-turn {
  to { transform: rotate(360deg); }
}

/* ---------- The header of the home page, in the same night (the rest of the site keeps its light header) ---------- */
body:has(.lc-v2-hero--night) header {
  background: #1a0722 !important;
}

body:has(.lc-v2-hero--night) header .lc-header-container {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: 0 18px 54px rgba(10, 2, 18, .45) !important;
}

body:has(.lc-v2-hero--night) header .lc-header-logoContainer,
body:has(.lc-v2-hero--night) header .lc-header-logoContainer * {
  color: #fff !important;
}

body:has(.lc-v2-hero--night) header .lc-headerMenu-item a:not(.lc-headerMenu-playButton) {
  color: #fff !important;
}

body:has(.lc-v2-hero--night) header .lc-headerMenu-item a:not(.lc-headerMenu-playButton):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
}

body:has(.lc-v2-hero--night) header .language-switcher__button {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* Japanese: the title goes to the line between phrases, never inside a word (« ゲーム »), where the browser can. */
html[lang="ja"] .lc-v2-hero--night h1 {
  word-break: auto-phrase;
}