:root {
  --sky: #2295d4;
  --text: #406d8a;
  --text-2: #608aa4;
  --shadow: 0 18px 36px rgba(0, 36, 64, 0.20);
  --shadow-hover: 0 22px 44px rgba(0, 36, 64, 0.28);
  --cloud-cream: #f4efdb;
  --cloud-cream-soft: #ede5cb;
  --cloud-blue: #d9e8ef;
  --cloud-blue-soft: #d0e1ea;
  --cloud-blue-deep: #c3d8e3;
  --cloud-rim: rgba(255,255,255,0.58);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html, body { overflow: hidden; background: var(--sky); }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.artwork {
  position: relative;
  width: min(100vw, calc(100vh * 1.776833));
  width: min(100dvw, calc(100dvh * 1.776833));
  aspect-ratio: 1672 / 941;
  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

.background,
.background img {
  display: block;
  width: 100%;
  height: 100%;
}

.background img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/*
  Les nuages sont positionnés indépendamment dans le ciel.
  Cela permet de leur donner des hauteurs, des tailles et des silhouettes différentes.
*/
.programs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cloud-button {
  position: absolute;
  isolation: isolate;
  display: block;
  width: clamp(285px, 22vw, 360px);
  height: clamp(96px, 9vw, 122px);
  min-height: 92px;
  text-decoration: none;
  filter: drop-shadow(var(--shadow));
  transition: transform 160ms ease, filter 160ms ease;
  pointer-events: auto;
  transform-origin: center;
}

/* Trois positions volontairement décalées dans le ciel. */
.magnetikos-cloud {
  left: 20%;
  top: 9%;
  width: clamp(300px, 23vw, 380px);
  transform: translateX(-50%) rotate(-1deg);
}

.fee-cloud {
  left: 51%;
  top: 15.5%;
  width: clamp(420px, 34vw, 555px);
  height: clamp(105px, 10vw, 132px);
  transform: translateX(-50%) rotate(0.7deg);
}

.pacman-cloud {
  left: 82%;
  top: 7%;
  width: clamp(350px, 28vw, 455px);
  height: clamp(98px, 9.4vw, 126px);
  transform: translateX(-50%) rotate(1.3deg);
}

.cloud-button::before {
  content: "";
  position: absolute;
  inset: 10% 9% 20% 9%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.26), rgba(255,255,255,0) 65%);
  z-index: 2;
  pointer-events: none;
}

.cloud-button:hover,
.cloud-button:focus-visible {
  filter: drop-shadow(var(--shadow-hover));
  outline: none;
}

.magnetikos-cloud:hover,
.magnetikos-cloud:focus-visible {
  transform: translateX(-50%) translateY(-2px) scale(1.02) rotate(-1deg);
}

.fee-cloud:hover,
.fee-cloud:focus-visible {
  transform: translateX(-50%) translateY(-2px) scale(1.02) rotate(0.7deg);
}

.pacman-cloud:hover,
.pacman-cloud:focus-visible {
  transform: translateX(-50%) translateY(-2px) scale(1.02) rotate(1.3deg);
}

.magnetikos-cloud:active {
  transform: translateX(-50%) scale(0.99) rotate(-1deg);
}
.fee-cloud:active {
  transform: translateX(-50%) scale(0.99) rotate(0.7deg);
}
.pacman-cloud:active {
  transform: translateX(-50%) scale(0.99) rotate(1.3deg);
}

.cloud-lobe {
  position: absolute;
  display: block;
  box-shadow:
    inset 0 2px 0 var(--cloud-rim),
    inset 0 -10px 16px rgba(180, 204, 218, 0.50);
}

/* Forme de base : MAGNETIKOS, avec un gros sommet central. */
.cloud-lobe-1 {
  left: 2%;
  right: 2%;
  bottom: 0;
  height: 63%;
  border-radius: 999px;
  background: linear-gradient(180deg, #e1edf2 0%, var(--cloud-blue) 42%, var(--cloud-blue-deep) 100%);
}

.cloud-lobe-2 {
  width: 36%;
  height: 68%;
  left: 10%;
  top: 14%;
  border-radius: 50%;
  background: linear-gradient(180deg, #dceaf0 0%, var(--cloud-blue-soft) 52%, #c2d8e3 100%);
}

.cloud-lobe-3 {
  width: 40%;
  height: 78%;
  left: 31%;
  top: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7f1de 0%, var(--cloud-cream) 36%, var(--cloud-cream-soft) 62%, #d5e4ea 100%);
}

.cloud-lobe-4 {
  width: 34%;
  height: 66%;
  right: 11%;
  top: 16%;
  border-radius: 50%;
  background: linear-gradient(180deg, #e6f0f4 0%, #d8e7ee 56%, #c4dae4 100%);
}

/* La féérie des mots : nuage très large, doux et asymétrique. */
.fee-cloud .cloud-lobe-1 {
  left: 1%;
  right: 1%;
  height: 58%;
  border-radius: 52% 48% 48% 52% / 62% 62% 38% 38%;
}

.fee-cloud .cloud-lobe-2 {
  width: 31%;
  height: 72%;
  left: 7%;
  top: 9%;
  border-radius: 55% 45% 48% 52%;
  background: linear-gradient(180deg, #f3eedb 0%, #e9e8dc 43%, #d0e1e8 100%);
}

.fee-cloud .cloud-lobe-3 {
  width: 35%;
  height: 83%;
  left: 36%;
  top: -4%;
  border-radius: 48% 52% 44% 56%;
  background: linear-gradient(180deg, #faf4e0 0%, #f1ebd4 45%, #d8e5e9 100%);
}

.fee-cloud .cloud-lobe-4 {
  width: 31%;
  height: 62%;
  right: 6%;
  top: 22%;
  border-radius: 44% 56% 54% 46%;
}

/* Pac-Man Malbouffe : nuage plus ramassé et bosselé vers les côtés. */
.pacman-cloud .cloud-lobe-1 {
  left: 0;
  right: 0;
  height: 60%;
  border-radius: 48% 52% 44% 56% / 62% 58% 42% 38%;
  background: linear-gradient(180deg, #e7eff2 0%, #d7e5eb 45%, #c3d8e3 100%);
}

.pacman-cloud .cloud-lobe-2 {
  width: 38%;
  height: 72%;
  left: 4%;
  top: 5%;
  border-radius: 50% 46% 54% 50%;
  background: linear-gradient(180deg, #f4efdc 0%, #e9eadf 50%, #cbdde6 100%);
}

.pacman-cloud .cloud-lobe-3 {
  width: 31%;
  height: 64%;
  left: 36%;
  top: 17%;
  border-radius: 54% 46% 50% 50%;
  background: linear-gradient(180deg, #deebf0 0%, #d2e2e9 58%, #bfd5e0 100%);
}

.pacman-cloud .cloud-lobe-4 {
  width: 36%;
  height: 76%;
  right: 4%;
  top: 2%;
  border-radius: 46% 54% 48% 52%;
  background: linear-gradient(180deg, #f8f1dc 0%, #ede8d3 42%, #cfdee5 100%);
}

.cloud-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 12px 20px 0;
}

.cloud-title {
  color: var(--text);
  font-weight: 900;
  letter-spacing: 0.07em;
  font-size: clamp(1.02rem, 1.55vw, 1.45rem);
  line-height: 1.05;
  text-align: center;
}

.fee-cloud .cloud-title {
  letter-spacing: 0.025em;
  font-size: clamp(1.08rem, 1.55vw, 1.48rem);
  white-space: nowrap;
}

.pacman-cloud .cloud-title {
  letter-spacing: 0.035em;
  font-size: clamp(1rem, 1.42vw, 1.36rem);
  white-space: nowrap;
}

.cloud-subtitle {
  margin-top: 6px;
  color: var(--text-2);
  opacity: 0.90;
  font-weight: 700;
  font-size: clamp(0.78rem, 0.9vw, 0.96rem);
}

/* Portrait : trois nuages étagés dans la grande zone de ciel. */
@media (orientation: portrait) {
  .artwork {
    width: min(100vw, calc(100vh * 0.562799));
    width: min(100dvw, calc(100dvh * 0.562799));
    aspect-ratio: 941 / 1672;
  }

  .cloud-button {
    height: min(11.5vh, 126px);
    min-height: 96px;
  }

  .magnetikos-cloud {
    left: 47%;
    top: 7%;
    width: min(72vw, 350px);
    transform: translateX(-50%) rotate(-1deg);
  }

  .fee-cloud {
    left: 53%;
    top: 23%;
    width: min(88vw, 440px);
    height: min(12.2vh, 134px);
    transform: translateX(-50%) rotate(0.7deg);
  }

  .pacman-cloud {
    left: 46%;
    top: 40%;
    width: min(80vw, 400px);
    transform: translateX(-50%) rotate(1.3deg);
  }

  .cloud-title {
    font-size: clamp(1.02rem, 4.6vw, 1.5rem);
  }

  .fee-cloud .cloud-title {
    font-size: clamp(1.03rem, 4.6vw, 1.45rem);
  }

  .pacman-cloud .cloud-title {
    font-size: clamp(0.98rem, 4.15vw, 1.34rem);
  }

  .cloud-subtitle {
    font-size: clamp(0.8rem, 3vw, 0.95rem);
  }

  .magnetikos-cloud:hover,
  .magnetikos-cloud:focus-visible {
    transform: translateX(-50%) translateY(-2px) scale(1.02) rotate(-1deg);
  }
  .fee-cloud:hover,
  .fee-cloud:focus-visible {
    transform: translateX(-50%) translateY(-2px) scale(1.02) rotate(0.7deg);
  }
  .pacman-cloud:hover,
  .pacman-cloud:focus-visible {
    transform: translateX(-50%) translateY(-2px) scale(1.02) rotate(1.3deg);
  }
}

/* Paysage étroit : on garde les trois nuages séparés et plus compacts. */
@media (max-width: 1050px) and (orientation: landscape) {
  .magnetikos-cloud {
    left: 16%;
    top: 8%;
    width: min(28vw, 300px);
    height: 88px;
    min-height: 80px;
  }

  .fee-cloud {
    left: 50%;
    top: 17%;
    width: min(39vw, 405px);
    height: 94px;
    min-height: 86px;
  }

  .pacman-cloud {
    left: 85%;
    top: 7%;
    width: min(31vw, 325px);
    height: 90px;
    min-height: 82px;
  }

  .cloud-title {
    font-size: clamp(0.86rem, 2vw, 1.12rem);
  }

  .fee-cloud .cloud-title {
    font-size: clamp(0.88rem, 1.95vw, 1.15rem);
  }

  .pacman-cloud .cloud-title {
    font-size: clamp(0.82rem, 1.8vw, 1.05rem);
  }
}

@media (max-height: 460px) and (orientation: landscape) {
  .magnetikos-cloud { top: 5%; }
  .fee-cloud { top: 15%; }
  .pacman-cloud { top: 4%; }

  .cloud-button {
    height: 74px;
    min-height: 74px;
  }

  .fee-cloud { height: 80px; min-height: 80px; }

  .cloud-subtitle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-button { transition: none; }
}