/* LunaCycle : l'iPhone titane de Codex, recoloré par jetons pour la nuit du Mix (27/09/2026). */
.lc-phone-demo {
  --lc-phone-ink: #f3effa;
  --lc-phone-iris: #c8b4f0;
  --lc-phone-lilac: #d4c2eb;
  --lc-phone-rose: #e8c7d6;
  --lc-phone-paper: #12102b;
  --lc-phone-glow: #c8b4f0;
  --lc-phone-accent: #c8b4f0;
  --lc-phone-bob: 3px;
  --lc-phone-rock: .45deg;
  --lc-phone-size: 272px; /* 29/09 : 236 -> 272, ecran plus lisible */
  --lc-phone-radius: 41px;
  --lc-phone-ease: cubic-bezier(.2, .75, .2, 1);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 540px;
  min-width: 0;
  margin-inline: auto;
  color: var(--lc-phone-ink);
  font-family: var(--lc-phone-body-font, "Lexend", system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.lc-phone-demo *, .lc-phone-demo *::before, .lc-phone-demo *::after { box-sizing: border-box; }
.lc-phone-demo [hidden] { display: none !important; }
.lc-phone-figure { margin: 0; }
.lc-phone-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 632px; /* 29/09 : telephone 272 px, la legende passait dessous */
  perspective: 1100px;
  perspective-origin: 50% 42%;
}
.lc-phone-stage::before {
  content: "";
  position: absolute;
  inset: 5% 0 6%;
  pointer-events: none;
  background-color: var(--lc-phone-glow);
  -webkit-mask-image: radial-gradient(closest-side at 55% 42%, #000 0%, #0008 45%, transparent 100%);
  mask-image: radial-gradient(closest-side at 55% 42%, #000 0%, #0008 45%, transparent 100%);
  opacity: .13;
  transition: background-color 600ms ease;
}
.lc-phone-orbit {
  position: absolute;
  width: 78%;
  max-width: 484px;
  aspect-ratio: 1;
  border: 1px solid var(--lc-phone-accent);
  border-radius: 50%;
  /* Même inclinaison et même rapport 22/28 que le sceau LunaCycle. */
  transform: rotate(-32deg) scaleY(.785714);
  border-left-color: transparent;
  opacity: .55;
  overflow: hidden;
  pointer-events: none;
  transition: border-color 600ms ease;
}
.lc-phone-orbit::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #a8b4e024;
  border-bottom-color: transparent;
  border-radius: inherit;
}
.lc-phone-satellite-track {
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  transform: rotate(26deg);
}
.lc-phone-satellite {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--lc-phone-accent);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lc-phone-accent) 40%, transparent);
  transition: background-color 600ms ease;
}
.lc-phone-satellite-track-far { inset: 22px; transform: rotate(205deg); }
.lc-phone-satellite-track-far .lc-phone-satellite { width: 4px; height: 4px; background: #d87da8; box-shadow: 0 0 7px #d87da866; }
.lc-phone-ground {
  position: absolute;
  left: 20%;
  right: 12%;
  bottom: 7px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #080613b3, #0806134d 48%, transparent 74%);
  filter: blur(6px);
  transform: rotate(-5deg);
  pointer-events: none;
}
.lc-phone-arrival, .lc-phone-breathe, .lc-phone-change, .lc-phone-device { transform-style: preserve-3d; }
.lc-phone-arrival { width: var(--lc-phone-size); }
.lc-phone-breathe { width: 100%; }
.lc-phone-change { width: 100%; }
/* Ces animations n'existent qu'après initialisation. L'écran reste manuel. */
.lc-phone-demo[data-phone-ready="true"] .lc-phone-breathe {
  /* 29/09 : aucune animation au repos, l'ecran est net ; voir .lc-phone-balance. */
  animation: none;
  animation-play-state: paused;
}
.lc-phone-demo[data-phone-ready="true"] .lc-phone-satellite-track {
  animation: lc-phone-orbit-near 32s linear infinite;
  animation-play-state: paused;
}
.lc-phone-demo[data-phone-ready="true"] .lc-phone-satellite-track-far {
  animation-name: lc-phone-orbit-far;
  animation-duration: 46s;
}
.lc-phone-demo[data-phone-suspended="false"] .lc-phone-breathe,
.lc-phone-demo[data-phone-suspended="false"] .lc-phone-satellite-track { animation-play-state: running; }
/* Un balancement ponctuel, pose par phone.js toutes les 8 s puis retire. */
.lc-phone-demo[data-phone-ready="true"] .lc-phone-breathe.lc-phone-balance {
  animation: lc-phone-balance 4.2s var(--lc-phone-ease) 1;
  animation-play-state: running;
}
@keyframes lc-phone-balance {
  0%, 100% { transform: none; }
  35% { transform: translateY(-7px) rotateY(-8deg) rotateZ(-1.4deg); }
  68% { transform: translateY(-2px) rotateY(3deg) rotateZ(.6deg); }
}
@keyframes lc-phone-breath {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  25% { transform: translateY(calc(-1 * var(--lc-phone-bob))) rotateZ(calc(-1 * var(--lc-phone-rock))); }
  75% { transform: translateY(var(--lc-phone-bob)) rotateZ(var(--lc-phone-rock)); }
}
@keyframes lc-phone-orbit-near { from { transform: rotate(26deg); } to { transform: rotate(386deg); } }
@keyframes lc-phone-orbit-far { from { transform: rotate(205deg); } to { transform: rotate(-155deg); } }
.lc-phone-device {
  position: relative;
  width: 100%;
  border-radius: var(--lc-phone-radius);
  transform: none; /* 29/09 : droit, l'ecran se lit net */
}
.lc-phone-front {
  position: relative;
  padding: 7px;
  border: 1px solid #ffffff;
  border-radius: inherit;
  background: linear-gradient(120deg, #fff 0%, #d5d2d8 19%, #fcfbfd 43%, #aaa6b0 73%, #e6e3eb 100%);
  box-shadow: inset 0 0 0 1px #92909c, 1px 1px 0 #fff;
  transform: translateZ(1px);
}
.lc-phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1290 / 2796;
  overflow: hidden;
  border: 2px solid #191721;
  border-radius: calc(var(--lc-phone-radius) - 7px);
  background: #12102b;
  isolation: isolate;
}
.lc-phone-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  /* 29/09 : l image remplit tout l ecran, calee en haut (plus de bande noire). */
  object-fit: cover;
  object-position: 50% 0;
  border: 0;
  border-radius: 0;
}
.lc-phone-island {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 50%;
  width: 26%;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 15px;
  background: #0d0b13;
  box-shadow: inset 0 1px 1px #35303f, 0 1px 0 #f4ecff12;
  pointer-events: none;
}
.lc-phone-island span {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #405979, #181a27 58%, #08090e 80%);
  box-shadow: 0 0 0 1px #14111e;
}
.lc-phone-glass {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 1px 0 0 #ffffff38, inset -1px 0 0 #ffffff0d;
  background: linear-gradient(117deg, #ffffff0a, transparent 32%);
  pointer-events: none;
}
.lc-phone-back, .lc-phone-metal {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, #a4a0ab, #eeecf1 7%, #c5c2cc 48%, #a4a0aa 93%, #f3f1f7);
  border: 1px solid #bbb7c3;
}
.lc-phone-back {
  transform: translateZ(-12px);
  background: linear-gradient(130deg, #efedf2, #d0cdd6);
  box-shadow: 10px 16px 26px #05040e59, 24px 34px 50px #05040e66;
}
.lc-phone-metal-1 { transform: translateZ(-10px); }
.lc-phone-metal-2 { transform: translateZ(-8px); border-color: #e9e6ef; }
.lc-phone-metal-3 { transform: translateZ(-6px); }
.lc-phone-metal-4 { transform: translateZ(-4px); border-color: #f6f4fa; }
.lc-phone-metal-5 { transform: translateZ(-2px); border-color: #bcb7c7; }
.lc-phone-side {
  position: absolute;
  width: 4px;
  border: 1px solid #9b95a6;
  border-radius: 3px;
  background: linear-gradient(90deg, #f6f4fa, #b1acbd);
  transform: translateZ(-5px);
}
.lc-phone-side-power { right: -3px; top: 27%; height: 55px; }
.lc-phone-side-action { left: -3px; top: 18%; height: 20px; }
.lc-phone-side-volume { left: -3px; top: 27%; height: 55px; }
.lc-phone-side-volume::after {
  content: "";
  position: absolute;
  top: 25px;
  left: -1px;
  width: 4px;
  height: 4px;
  background: #dfdce7;
  border-block: 1px solid #9993a4;
}
.lc-phone-caption {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 5px;
  min-height: 56px;
  padding: 2px 12px 0;
  margin: 0;
  text-align: center;
}
.lc-phone-caption-title {
  display: block;
  font-family: var(--lc-phone-display-font, "Newsreader", Georgia, serif);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--lc-phone-ink);
}
.lc-phone-caption-text {
  display: block;
  max-width: 39ch;
  color: #d3cbe3;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
}
.lc-phone-controls {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  width: min(100%, 350px);
  padding: 5px;
  margin: 8px auto 0;
  border: 1px solid #88769e;
  border-radius: 17px;
  background: #17132fd9;
  box-shadow: inset 0 1px 0 #c8b4f021, 0 12px 30px #08061333;
}
.lc-phone-marker {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  border: 1px solid #c8b4f0;
  border-radius: 11px;
  background: linear-gradient(135deg, #4c3b6e, #302442);
  box-shadow: inset 0 1px 0 #e8e4f021, 0 0 14px #c8b4f01a;
  pointer-events: none;
  transition: transform 380ms var(--lc-phone-ease), width 180ms, height 180ms;
}
.lc-phone-choice {
  appearance: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 9px 6px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #d3cbe3;
  font: 500 13px/1.25 var(--lc-phone-body-font, "Lexend", system-ui, sans-serif);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 140ms, color 140ms, box-shadow 140ms;
}
.lc-phone-choice[aria-pressed="true"] {
  color: var(--lc-phone-ink);
  background: linear-gradient(135deg, #4c3b6e, #302442);
  border-color: #c8b4f0;
  box-shadow: inset 0 1px 0 #e8e4f021, 0 0 14px #c8b4f01a;
}
.lc-phone-demo[data-phone-marker="true"] .lc-phone-choice[aria-pressed="true"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.lc-phone-choice:focus-visible { outline: 2px solid var(--lc-phone-iris); outline-offset: 2px; z-index: 1; }
.lc-phone-demo[data-phone-suspended="true"] .lc-phone-choice,
.lc-phone-demo[data-phone-suspended="true"] .lc-phone-marker,
.lc-phone-demo[data-phone-suspended="true"] .lc-phone-stage::before,
.lc-phone-demo[data-phone-suspended="true"] .lc-phone-orbit,
.lc-phone-demo[data-phone-suspended="true"] .lc-phone-satellite { transition: none; }
@media (hover: hover) {
  .lc-phone-choice:hover { color: var(--lc-phone-ink); background-color: #332747; }
}
.lc-phone-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lc-phone-status:not(:empty) {
  position: static;
  width: auto;
  height: auto;
  margin: 10px auto 0;
  padding-inline: 12px;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 600px) {
  .lc-phone-demo { --lc-phone-size: 244px; --lc-phone-radius: 37px; --lc-phone-bob: 2px; --lc-phone-rock: .25deg; }
  .lc-phone-stage { height: 552px; }
  .lc-phone-controls { max-width: 326px; }
  .lc-phone-choice { min-height: 42px; }
}
@media (max-width: 359px) {
  .lc-phone-demo { --lc-phone-size: 220px; --lc-phone-radius: 33px; }
  .lc-phone-stage { height: 500px; }
  .lc-phone-caption { min-height: 72px; }
  .lc-phone-caption-title { font-size: 21px; }
  .lc-phone-controls { width: calc(100% - 8px); }
  .lc-phone-choice { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-phone-device { transform: none; }
  .lc-phone-demo[data-phone-ready="true"] .lc-phone-breathe,
  .lc-phone-demo[data-phone-ready="true"] .lc-phone-satellite-track { animation: none; }
  .lc-phone-choice, .lc-phone-marker, .lc-phone-stage::before, .lc-phone-orbit, .lc-phone-satellite { transition: none; }
}

/* 29/09 : « enleve ca ou change le ». La boite a six boutons devient six traits
   discrets ; le trait actif prend la couleur de l'ecran. Les noms restent lus
   par les lecteurs d'ecran. */
.lc-phone-controls { display: flex; justify-content: center; gap: 2px; width: auto; max-width: none; padding: 0; margin: 14px auto 0; border: 0; background: none; box-shadow: none; }
.lc-phone-marker { display: none !important; }
.lc-phone-choice { width: 34px; min-width: 0; height: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 8px; color: transparent; font-size: 0; background: none !important; box-shadow: none !important; }
.lc-phone-choice::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: #c8b4f047; transition: background-color .3s ease, transform .3s var(--lc-phone-ease); }
.lc-phone-choice[aria-pressed="true"]::before { background: var(--lc-phone-accent, #c8b4f0); transform: scaleY(1.4); }
@media (hover: hover) { .lc-phone-choice:hover::before { background: #c8b4f0a6; } }
@media (max-width: 600px) { .lc-phone-choice { width: 40px; height: 40px; min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .lc-phone-choice::before { transition: none; } }