/* Page de connexion : tableau de loge d'apprenti (REAA) flottant dans la voûte étoilée */
html.login-layout-background, body.login-container { background: #070a1c; }
#layout-content, body.login-container > .powered { position: relative; z-index: 1; }

#loge-scene {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: #070a1c url("login-bg.jpg") center bottom / cover no-repeat;
}
#loge-sky, .loge-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.loge-layer .px { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }

/* --- Tracé initial : le tableau se dessine --- */
.loge-layer .tr {
    stroke: #d8b25a; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
    stroke-dasharray: 1 1; stroke-dashoffset: 1; fill-opacity: 0;
    animation: loge-draw 2.4s ease-out var(--d, 0s) forwards, loge-fill 1.4s ease var(--d, 0s) forwards;
}
.loge-layer .tr.thin { stroke-width: 1; stroke-opacity: .55; fill: none; }
.loge-layer .shaft  { fill: url(#gShaft);  --fo: .55; }
.loge-layer .bronze { fill: url(#gBronze); --fo: .6; }
.loge-layer .stone  { fill: url(#gStone);  --fo: .55; }
.loge-layer .step   { fill: url(#gStep);   --fo: .5; stroke-width: 1.4; }
.loge-layer .pome   { fill: #8a2a2a; --fo: .7; }
.loge-layer .rough  { fill: url(#gRough);  --fo: .85; }
.loge-layer .cube-top { fill: #b9b1a1; --fo: .8; }
.loge-layer .cube-l   { fill: #6f685c; --fo: .85; }
.loge-layer .cube-r   { fill: #8f877a; --fo: .85; }
.loge-layer .board  { fill: #efe3c4; --fo: .9; stroke: #8a6a3a; }
.loge-layer .wood   { stroke: #a07a44; stroke-width: 4; fill: none; }
.loge-layer .cord   { fill: none; stroke: #c9a24f; stroke-width: 2.6; stroke-opacity: .75; }
.loge-layer .knotball { fill: #c9a24f; --fo: .8; }
@keyframes loge-draw { to { stroke-dashoffset: 0; } }
@keyframes loge-fill { 60% { fill-opacity: 0; } to { fill-opacity: var(--fo, 1); } }

.loge-layer .letter {
    font: 600 54px Georgia, "Times New Roman", serif; text-anchor: middle;
    fill: #f2d488; opacity: 0; animation: loge-fade 1.5s ease var(--d, 0s) forwards;
    paint-order: stroke; stroke: rgba(40, 28, 8, .6); stroke-width: 3;
}
@keyframes loge-fade { to { opacity: .92; } }
@keyframes loge-rise { to { opacity: 1; } }

/* --- Grande Ourse : scintillement discret --- */
.loge-layer .tw { animation: loge-twinkle var(--tw) ease-in-out var(--td) infinite alternate; opacity: .55; }
@keyframes loge-twinkle { from { opacity: .35; } to { opacity: .95; } }

/* --- Symboles en apesanteur --- */
.loge-layer .sky-in, .loge-layer .tools-in { opacity: 0; animation: loge-rise 3s ease forwards; }
.loge-layer .sky-in   { animation-delay: 2.5s; }
.loge-layer .tools-in { animation-delay: 4s; }
.loge-layer .float { animation: loge-float var(--fd) ease-in-out var(--fp) infinite alternate; }
@keyframes loge-float { from { transform: translateY(-7px); } to { transform: translateY(7px); } }

.loge-layer .sun-rays { stroke: #ffd982; stroke-width: 2; stroke-linecap: round; opacity: .8;
                      transform-box: fill-box; transform-origin: center; animation: loge-spin 140s linear infinite; }
.loge-layer .sun-glow, .loge-layer .delta-glow { transform-box: fill-box; transform-origin: center; animation: loge-pulse 7s ease-in-out infinite; }
.loge-layer .delta-rays { stroke: #ffe3a0; stroke-width: 1.2; stroke-linecap: round; opacity: .55;
                        transform-box: fill-box; transform-origin: center; animation: loge-spin 200s linear infinite reverse; }
@keyframes loge-pulse { 0%, 100% { opacity: .6; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes loge-spin  { to { transform: rotate(360deg); } }

/* Étoile flamboyante : apparaît et disparaît, très légère */
.loge-layer .blazing { opacity: 0; animation: loge-blink 26s ease-in-out 9s infinite; }
.loge-layer .b-rays  { stroke: #ffe3a0; stroke-width: .9; stroke-linecap: round; }
@keyframes loge-blink { 0%, 30% { opacity: 0; } 50% { opacity: .5; } 70%, 100% { opacity: 0; } }

/* Fils à plomb de la perpendiculaire et du niveau */
.loge-layer .swing { transform-box: view-box; transform-origin: var(--ox) var(--oy); animation: loge-swing 4.5s ease-in-out infinite alternate; }
@keyframes loge-swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* --- Chantier vivant --- */
.loge-layer .site > g, .loge-layer .easel .mini { opacity: 0; animation: loge-rise 1.5s ease 5.5s forwards; }
.loge-layer .chisel line { stroke: #b9c0c8; stroke-width: 6; stroke-linecap: round; }
.loge-layer .chisel .grip { stroke: #7a5530; stroke-width: 9; }
.loge-layer .mallet .handle { stroke: #8a6236; stroke-width: 6; stroke-linecap: round; }
.loge-layer .mallet .head { fill: #6e4a28; stroke: #d8b25a; stroke-width: 1.5; }
.loge-layer .site > .mallet { transform-box: view-box; transform-origin: 266px 952px; animation: loge-rise 1.5s ease 5.5s forwards, loge-strike 2.6s ease-in 7s infinite; }
@keyframes loge-strike { 0% { transform: rotate(-30deg); } 16% { transform: rotate(1deg); } 22% { transform: rotate(-5deg); } 100% { transform: rotate(-30deg); } }
.loge-layer .sparks circle { fill: #ffd27a; opacity: 0; animation: loge-spark 2.6s ease-out 7s infinite; }
@keyframes loge-spark {
    0%, 15% { opacity: 0; transform: translate(0, 0); }
    16%     { opacity: 1; transform: translate(0, 0); }
    34%, 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); }
}
.loge-layer .mini * { fill: none; stroke: #6b4a1e; stroke-width: 1.6; stroke-linecap: round;
                    stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: loge-sketch 14s ease-in-out 6s infinite; }
@keyframes loge-sketch { 0% { stroke-dashoffset: 1; opacity: 1; } 45%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.loge-layer .rope, .loge-layer .block path { stroke: #c9b48a; stroke-width: 1.6; fill: none; }
.loge-layer .rope  { transform-box: view-box; transform-origin: 1690px 712px; animation: loge-rope 12s ease-in-out 6s infinite; }
.loge-layer .block { animation: loge-lift 12s ease-in-out 6s infinite; }
.loge-layer .block rect { fill: #a39a88; stroke: #d8b25a; stroke-width: 1.2; }
@keyframes loge-rope { 0%, 100% { transform: scaleY(1); } 45%, 60% { transform: scaleY(.3); } }
@keyframes loge-lift { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(-196px); } }

/* Écrans étroits : on allège */
@media (max-width: 760px) { .loge-layer .site, .loge-layer .easel, .loge-layer .houppe { display: none; } }

/* Respect du réglage « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    .loge-layer *, .loge-layer .tr { animation: none !important; transition: none !important; }
    .loge-layer .tr { stroke-dashoffset: 0; fill-opacity: var(--fo, 1); }
    .loge-layer .letter, .loge-layer .sky-in, .loge-layer .tools-in, .loge-layer .site > g, .loge-layer .easel .mini { opacity: 1; }
    .loge-layer .mini * { stroke-dashoffset: 0; }
}

/* --- Delta lumineux au centre, au-dessus du logo --- */
#loge-delta { position: relative; z-index: 1; width: 170px; height: 142px; margin: -26px auto 0; pointer-events: none;
              opacity: 0; animation: loge-rise 2.5s ease .8s forwards; }
#loge-delta svg { width: 100%; height: 100%; overflow: visible; }
#loge-delta .d-rays { stroke: #ffe3a0; stroke-width: 1.4; stroke-linecap: round; opacity: .6;
                      transform-box: fill-box; transform-origin: center; animation: loge-spin 160s linear infinite; }
#loge-delta .d-glow { transform-box: fill-box; transform-origin: center; animation: loge-pulse 7s ease-in-out infinite; }
.login-container #img-logo { max-width: 104px !important; margin-bottom: 14px !important; }
@media (prefers-reduced-motion: reduce) { #loge-delta, #loge-delta * { animation: none !important; opacity: 1; } }