/* ═══ LE CHÂTEAU DE LA PAGE DE CONNEXION (10.10.2026) ════════════════════════════════════════════
   « Crée un petit château dans la page d'accueil. Le logo REX CRM doit rester où il est, intègre le
   château comme décor. Ajoute Rex 2D et une princesse, Peachrex, dans le haut du château. À la
   connexion, Rex saute du balcon pour atteindre le drapeau de fin de monde qui valide la connexion. »
   Puis : « intègre tous les nouveaux éléments en cohérence » et « garde le logo REX CRM, il reste
   le logo principal ».

   Tout est en pixel art (planches Gemini détourées, assets/logos/rex/retro/) posé sur la plaine du
   paysage existant. Une seule grandeur règle la scène : --lc-h, la hauteur du château. Le reste
   (balcon, personnages, mât) en découle, pour garder les proportions du petit écran au grand.
   Le logo REX CRM ne bouge pas ; SUPER REX CRM n'est qu'un titre de jeu, plus petit, dans le ciel.
   Sur téléphone (sous 860 px), le paysage est déjà retiré : la scène aussi, l'ancien Rex reste. */

.lc-scene { --lc-h: clamp(190px, 36vh, 320px); position: absolute; left: 0; right: 0; bottom: 122px;
  height: calc(var(--lc-h) * 1.06); z-index: 4; pointer-events: none; }
.lc-scene img { image-rendering: pixelated; display: block; user-select: none; -webkit-user-drag: none; }

/* Le château, à droite, posé sur la plaine. Le balcon est à 58,45 % de sa hauteur depuis le bas. */
.lc-chateau { position: absolute; right: 6%; bottom: -3px; height: var(--lc-h); aspect-ratio: 407 / 645; }
.lc-chateau > img { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(3, 12, 30, .35)); }
.lc-princesse { position: absolute; left: 63%; bottom: 58.2%; height: 21%; transform: translateX(-50%); }
.lc-princesse img { height: 100%; width: auto; }

/* Rex : un conteneur qui se déplace (WAAPI), une image qui se retourne. */
.lc-rex { position: absolute; left: 0; bottom: 0; height: calc(var(--lc-h) * .18); aspect-ratio: 138 / 145; will-change: transform; }
.lc-rex img { width: 100%; height: 100%; }
.lc-rex.lc-gauche img { transform: scaleX(-1); }

/* Le mât de fin de niveau, à gauche : boule, mât, drapeau qui descend quand Rex s'y accroche. */
.lc-mat { position: absolute; left: 12%; bottom: 0; height: calc(var(--lc-h) * .88); width: calc(var(--lc-h) * .2); }
.lc-mat > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-drapeau { position: absolute; left: calc(50% - var(--lc-h) * .2); top: 6%; width: calc(var(--lc-h) * .19); aspect-ratio: 4 / 3; will-change: transform; }
.lc-drapeau svg { display: block; width: 100%; height: 100%; }

/* SUPER REX CRM : un titre de jeu qui flotte doucement dans le ciel, entre le mât et le château.
   10.10.2026 : « réduis un peu la taille et insère-le qu'il soit fondu ». Plus petit, descendu dans
   le paysage, un peu transparent et sans ombre dure : un halo bleu-cyan le fond dans la nuit. */
.lc-titre { position: absolute; left: 31%; bottom: calc(var(--lc-h) * .93); height: calc(var(--lc-h) * .4); width: auto;
  image-rendering: auto !important; opacity: .88; pointer-events: auto; cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(0, 207, 255, .28)) drop-shadow(0 0 22px rgba(17, 54, 121, .6));
  animation: lc-flotte 5s ease-in-out infinite; }
@keyframes lc-flotte { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* Les visiteurs : le pilote traverse le ciel, le héros court jusqu'à la porte du château. */
.lc-pilote { position: absolute; left: 0; bottom: calc(var(--lc-h) * .95); height: calc(var(--lc-h) * .195); width: auto; opacity: 0; } /* +15 % (10.10.2026) */
.lc-heros { position: absolute; left: 0; bottom: 0; height: calc(var(--lc-h) * .17); width: auto; opacity: 0; }

/* Rex Samus : court, tire, se met en morph ball et file en roulant. */
.lc-samus { position: absolute; left: 0; bottom: 0; height: calc(var(--lc-h) * .2); width: auto; opacity: 0; }
/* 10.10.2026 : la vraie morph ball. Ses images (samus-boule-1..4) font 60 px là où celles de Samus
   en font 176 : même échelle, donc une sphère au tiers de sa taille, avec un halo orangé. Lissée
   (pas « pixelated ») pour rester bien ronde une fois réduite. samus-morph (Samus qui se ramasse)
   est dessinée dans un cadre de 186 px. */
.lc-samus.lc-boule { height: calc(var(--lc-h) * .2 * 60 / 176); image-rendering: auto; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .85)); }
.lc-samus.lc-morph { height: calc(var(--lc-h) * .2 * 186 / 176); }

/* La manche bonus : Rex Ryu, la voiture violette, Rex Ken (retourné, face à la voiture). */
.lc-bonus { position: absolute; bottom: 0; left: 50%; display: flex; align-items: flex-end; gap: calc(var(--lc-h) * .01);
  opacity: 0; transform: translateX(-50%); }
.lc-ryu { height: calc(var(--lc-h) * .2 * var(--lc-k, 1)); width: auto; }
.lc-ken { height: calc(var(--lc-h) * .22 * var(--lc-k, 1)); width: auto; transform: scaleX(-1); }
.lc-voiture { height: calc(var(--lc-h) * .17 * var(--lc-k, 1)); width: auto; }
.lc-bonus-titre { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  font: 900 calc(var(--lc-h) * .075)/1 "Arial Black", Impact, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap;
  color: #FFE066; -webkit-text-stroke: 1.5px #7A1F00; text-shadow: 0 3px 0 #C2410C, 0 0 10px rgba(255, 200, 60, .5);
  animation: lc-bonus-clignote .5s steps(2, end) infinite; }
.lc-bonus.lc-fin .lc-bonus-titre { animation: none; }
@keyframes lc-bonus-clignote { 50% { opacity: .35; } }

/* Les étincelles de la validation. */
.lc-eclat { position: absolute; width: 8px; height: 8px; background: #FFE066; box-shadow: 0 0 6px #FFE066; opacity: 0; }

/* L'ancien Rex et ses blocs laissent la place au château (sur grand écran seulement). */
@media (min-width: 861px) {
  body:not(.mode-cloud) #login-screen.lc-actif .login-rex-piste { display: none; }
}
/* ── Sur téléphone (10.10.2026 : « sur iPhone on ne voit pas tout ça ») ──────────────────────────
   Le panneau bleu n'y est qu'une bande d'en-tête : pas de place pour un château. La scène descend
   sous le formulaire, dans une bande de paysage en bas de l'écran (.lc-bas, déplacée par js/179),
   avec son ciel, ses collines et sa plaine. L'ancien Rex de l'en-tête s'efface : un seul Rex. */
.lc-bas { display: none; }
@media (max-width: 860px) {
  body:not(.mode-cloud) #login-screen.lc-actif .login-rex-piste { display: none; }
  body:not(.mode-cloud) .lc-bas { display: block; position: relative; margin-top: auto; flex: 0 0 auto; overflow: hidden;
    height: calc(clamp(96px, 18vh, 170px) * 1.38 + 34px);
    background: linear-gradient(180deg, #F4F6F9 0%, #1A4590 26%, #113679 72%); }
  /* Le formulaire laisse la place à la bande : tout tient dans l'écran d'un iPhone sans défiler. */
  body:not(.mode-cloud) #login-screen.lc-actif .login-zone { padding-top: 24px; padding-bottom: 8px; }
  .lc-bas::before { content: ''; position: absolute; left: 0; right: 0; bottom: 34px; height: 60px; opacity: .5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='90' viewBox='0 0 700 90'%3E%3Cpath d='M0 90 Q90 30 180 62 Q260 88 330 52 Q420 12 500 60 Q580 100 640 58 Q670 38 700 66 L700 90 Z' fill='%2300CFFF'/%3E%3C/svg%3E") repeat-x left bottom / 470px 60px; }
  .lc-bas::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
    background: linear-gradient(180deg, #1A4590 0%, #0E2A5E 100%); border-top: 3px solid rgba(0, 207, 255, .55); }
  .lc-bas .lc-scene { --lc-h: clamp(96px, 18vh, 170px); bottom: 34px; }
  .lc-bas .lc-titre { left: 33%; }
}
/* Petits iPhone (SE, mini) : une scène un peu plus basse, pour que rien ne défile. */
@media (max-width: 860px) and (max-height: 700px) {
  body:not(.mode-cloud) .lc-bas { height: calc(92px * 1.38 + 34px); }
  .lc-bas .lc-scene { --lc-h: 92px; }
}
body.mode-cloud .lc-scene, body.mode-cloud .lc-bas { display: none; }
@media (prefers-reduced-motion: reduce) { .lc-titre { animation: none; } .lc-pilote, .lc-heros, .lc-samus, .lc-bonus { display: none; } }