/*
 * Connexion en écran partagé (App/Views/external/connexion.php), chargée après site.css.
 * Mobile d'abord : le formulaire vient en premier (action principale), le diaporama des espaces
 * le suit. Dès 992 px : deux colonnes égales, diaporama à gauche, formulaire à droite.
 * Sans JavaScript : les quatre diapositives sont empilées et lisibles (seule la première garde
 * son illustration). public/js/scripts/connexion-slider.js ajoute .is-ready et transforme la pile
 * en carrousel. Toute animation s'arrête avec prefers-reduced-motion (règle globale de site.css
 * + aucune lecture automatique côté script).
 */

/* ---------- grille ---------- */
.sx-login { display: flex; flex-direction: column; }
.sx-login-main { padding: 1.4rem 16px 2.4rem; background: var(--sx-cream); }
.sx-login-main > * { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
@media (min-width: 768px) { .sx-login-main { padding: 2.6rem 24px 3rem; } }
@media (min-width: 992px) {
    .sx-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--sx-header)); }
    @supports (min-height: 100svh) { .sx-login { min-height: calc(100svh - var(--sx-header)); } }
    .sx-login-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 2.4rem clamp(24px, 4vw, 64px); }
    .sx-ls { grid-column: 1; grid-row: 1; }
}
/* ordinateurs portables peu hauts (1366 × 768) : tout tient sans défilement inutile */
@media (min-width: 992px) and (max-height: 900px) {
    .sx-login-main { padding-top: 1.2rem; padding-bottom: 1.2rem; }
    .sx-login .sx-auth-card { padding-top: 1.6rem; padding-bottom: 1.2rem; }
    .sx-login .sx-auth-card > .sx-icon { display: none; }
    .sx-login .sx-auth-sub { margin-bottom: 1rem; }
    .sx-login .sx-auth-spaces { margin-top: 1rem; padding-top: .8rem; }
    .sx-login .sx-auth-help { margin-top: .9rem; gap: .4rem; }
    .sx-ls { padding-top: 1.6rem; padding-bottom: 1.6rem; }
    .sx-ls .sx-ls-art { max-width: 290px; margin-bottom: 1rem; }
}

/* écrans encore plus bas (1366 × 768, 1280 × 720) : la carte et son aide tiennent sans défilement */
@media (min-width: 992px) and (max-height: 800px) {
    .sx-login-main { padding-top: .4rem; padding-bottom: .4rem; }
    .sx-login .sx-auth-card { padding: 1.1rem 1.8rem .9rem; }
    .sx-login .sx-auth-card h1 { font-size: var(--sx-fs-24); margin-bottom: .3rem; }
    .sx-login .sx-auth-sub { font-size: var(--sx-fs-16); margin-bottom: .7rem; }
    .sx-login .sx-auth-card .sx-field + .sx-field, .sx-login .sx-auth-card form > * + * { margin-top: .65rem; }
    .sx-login .sx-auth-input .sx-input, .sx-login .sx-auth-submit { min-height: 44px; }
    .sx-login .sx-auth-spaces { margin-top: .7rem; padding-top: .6rem; }
    .sx-login .sx-auth-help { margin-top: .6rem; gap: .25rem; font-size: var(--sx-fs-14); }
}
@media (min-width: 992px) and (max-height: 800px) {
    .sx-ls { padding-top: 1rem; padding-bottom: 1rem; }
    .sx-ls .sx-ls-art { max-width: 230px; margin-bottom: .6rem; }
    .sx-ls-kicker { margin-bottom: .6rem; }
    .sx-ls h2 { font-size: var(--sx-fs-t32); margin-bottom: .6rem; }
    .sx-ls-ctrl { margin-top: 1rem; }
}
@media (min-width: 992px) and (max-height: 740px) {
    .sx-login .sx-auth-sub { display: none; }
    .sx-ls .sx-ls-art { max-width: 190px; }
}
@media (min-width: 992px) and (max-height: 700px) {
    .sx-login .sx-auth-help { display: none; }
}

/* ---------- carte du formulaire ---------- */
.sx-login .sx-auth-card h1 { font-size: var(--sx-fs-t32); }
.sx-login .sx-auth-input > .sx-i { transition: color .2s; }
.sx-login .sx-auth-input:focus-within > .sx-i { color: var(--sx-action); }
.sx-login .sx-auth-submit .sx-i { transition: transform .2s; }
.sx-login .sx-auth-submit:hover .sx-i { transform: translateX(4px); }
.sx-login .sx-auth-spaces li { padding: 0; }
.sx-login .sx-auth-spaces a { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 .5rem; color: inherit; text-decoration: none; border-radius: var(--sx-r-pill); transition: background-color .2s; }
.sx .sx-login .sx-auth-spaces a:hover { color: var(--sx-navy); background: var(--sx-sage-pale); }
.sx-login .sx-auth-help { margin-top: 1.2rem; }

@media (prefers-reduced-motion: no-preference) {
    .sx-login-card { animation: sx-ls-up .6s ease both; }
    .sx-login-help { animation: sx-ls-up .6s ease .15s both; }
}

/* ---------- panneau du diaporama ---------- */
.sx-ls { position: relative; overflow: hidden; color: var(--sx-white); padding: 2rem 16px 2.2rem;
    background: linear-gradient(155deg, var(--sx-navy-950) 0%, var(--sx-navy-900) 45%, var(--sx-navy) 100%); } /* jamais plus clair que --sx-navy (P0-1) */
.sx-ls::before { content: ""; position: absolute; top: -40px; left: -40px; width: 220px; height: 220px; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1.2px, transparent 1.6px); background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle at 30% 30%, #000 0, transparent 70%); mask-image: radial-gradient(circle at 30% 30%, #000 0, transparent 70%); }
.sx-ls::after { content: ""; position: absolute; right: -90px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none;
    border: 2px dashed rgba(168, 197, 171, .35); box-shadow: inset 0 0 0 36px rgba(255, 255, 255, .03); }
.sx-ls-in { position: relative; z-index: 1; width: 100%; max-width: 540px; margin: 0 auto; }
@media (min-width: 768px) { .sx-ls { padding: 2.6rem 24px 2.8rem; } }
@media (min-width: 992px) {
    .sx-ls { display: flex; align-items: center; padding: 3rem clamp(28px, 5vw, 72px); }
    .sx-ls::after { width: 420px; height: 420px; right: -140px; bottom: -140px; }
}
.sx-ls :focus-visible { outline-color: var(--sx-white); }
.sx-ls-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 1.2rem; font-size: var(--sx-fs-14); font-weight: 700; color: var(--sx-on-dark); }
.sx-ls-kicker::before { content: ""; width: 28px; height: 2px; background: var(--sx-gold); }

/* diapositives SUPERPOSÉES dès le premier rendu (CLS) : même cellule de grille, hauteur de la plus haute
   réservée ; seule la diapositive de départ est visible avant le moteur. Sans JavaScript : css/nojs.css
   (dans <noscript>) les ré-empile, lisibles. */
.sx-ls-track { display: grid; }
.sx-ls-slide { grid-area: 1 / 1; visibility: hidden; }
.sx-ls:not(.is-ready) .sx-ls-slide.is-start { visibility: visible; }
.sx-ls-art { max-width: 240px; margin: 0 auto 1.2rem; }
@media (min-width: 576px) { .sx-ls-art { max-width: 300px; } }
@media (min-width: 992px) { .sx-ls-art { max-width: 380px; margin-bottom: 1.6rem; } }
.sx-ls-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sx-ls .sx-eyebrow { margin-bottom: .6rem; }
.sx-ls h2 { color: var(--sx-white); font-size: var(--sx-fs-t32); margin: 0 0 1rem; }
@media (min-width: 992px) { .sx-ls h2 { font-size: var(--sx-fs-t32); } }
.sx-ls-list { list-style: none; display: grid; gap: .65rem; font-size: var(--sx-fs-16); line-height: 1.5; color: var(--sx-on-dark); }
.sx-ls-list li { display: flex; gap: .7rem; align-items: flex-start; }
.sx-ls-list .sx-i { flex: 0 0 22px; width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: rgba(168, 197, 171, .2); color: var(--sx-sage-light); }

/* carrousel (JS) : transitions entre les diapositives superposées */
.sx-ls.is-ready .sx-ls-slide { opacity: 0; visibility: hidden; transform: translateX(28px);
    transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s; }
.sx-ls.is-ready .sx-ls-slide.is-prev { transform: translateX(-28px); }
.sx-ls.is-ready[data-dir="back"] .sx-ls-slide { transform: translateX(-28px); }
.sx-ls.is-ready[data-dir="back"] .sx-ls-slide.is-prev { transform: translateX(28px); }
.sx-ls.is-ready .sx-ls-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* contrôles : place réservée dès le premier rendu (invisibles tant que le moteur n'est pas prêt) */
.sx-ls-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 1.6rem; }
.sx-ls:not(.is-ready) .sx-ls-ctrl { visibility: hidden; }
.sx-ls-dots { display: flex; flex: 1 1 220px; gap: 6px; }
.sx .sx-ls-dot { flex: 1 1 0; min-width: 44px; max-width: 96px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
    padding: 0 2px; border: 0; background: transparent; color: var(--sx-on-dark-2); font-size: var(--sx-fs-12); font-weight: 700; cursor: pointer; text-align: left; }
.sx-ls-dot-track { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.sx-ls-dot-bar { display: block; height: 100%; background: var(--sx-gold); transform: scaleX(0); transform-origin: left center; }
.sx-ls-dot:hover .sx-ls-dot-track { background: rgba(255, 255, 255, .45); }
.sx-ls-dot.is-active { color: var(--sx-white); }
.sx-ls-dot.is-active .sx-ls-dot-bar { transform: none; }
.sx-ls.is-playing .sx-ls-dot.is-active .sx-ls-dot-bar { animation: sx-ls-prog 6s linear both; }
.sx-ls.is-playing.is-hold .sx-ls-dot.is-active .sx-ls-dot-bar { animation-play-state: paused; }
.sx-ls-dot-txt { line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479.98px) { .sx-ls-dot-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.sx-ls-nav { display: flex; gap: 6px; margin-left: auto; }
.sx .sx-ls-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
    background: transparent; color: var(--sx-white); font-size: 1rem; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
.sx .sx-ls-btn:hover { background: rgba(255, 255, 255, .14); border-color: var(--sx-white); }
.sx .sx-ls-btn:active { transform: scale(.94); }
.sx-ls:not(.is-playing) .sx-ls-ico-pause, .sx-ls.is-playing .sx-ls-ico-play { display: none; }

/* illustrations : palette du site */
.sx-ls-svg .i-w { fill: var(--sx-white); }
.sx-ls-svg .i-c { fill: var(--sx-cream); }
.sx-ls-svg .i-n { fill: var(--sx-navy); }
.sx-ls-svg .i-n9 { fill: var(--sx-navy-900); }
.sx-ls-svg .i-b { fill: var(--sx-blue); }
.sx-ls-svg .i-s { fill: var(--sx-sage); }
.sx-ls-svg .i-sl { fill: var(--sx-sage-light); }
.sx-ls-svg .i-sp { fill: var(--sx-sage-pale); }
.sx-ls-svg .i-g { fill: var(--sx-gold); }
.sx-ls-svg .i-gp { fill: var(--sx-gold-pale); }
.sx-ls-svg .i-halo { fill: rgba(255, 255, 255, .06); }
.sx-ls-svg .i-sh { fill: rgba(15, 30, 46, .28); }
.sx-ls-svg [class^="k-"] { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-ls-svg .k-w { stroke: var(--sx-white); }
.sx-ls-svg .k-b { stroke: var(--sx-blue); }
.sx-ls-svg .k-g { stroke: var(--sx-gold); stroke-width: 3; }
.sx-ls-svg .k-thin { stroke-width: 1.8; }
.sx-ls-svg .sx-ls-grow, .sx-ls-svg .sx-ls-pop { transform-box: fill-box; }
.sx-ls-svg .sx-ls-grow { transform-origin: center bottom; }
.sx-ls-svg .sx-ls-pop { transform-origin: center; }

/* animations : diapositive active seulement, jamais sans préférence de mouvement */
@media (prefers-reduced-motion: no-preference) {
    /* mouvement borné (audit P1-6) : flottements joués deux fois à l'arrivée de la diapositive, plus de dérive en boucle */
    .sx-ls.is-ready .is-active .sx-ls-float { animation: sx-ls-float 2.2s ease-in-out .5s 2 alternate both; }
    .sx-ls.is-ready .is-active .sx-ls-float.d2 { animation-duration: 2.7s; animation-delay: .8s; }
    .sx-ls.is-ready .is-active .sx-ls-grow { animation: sx-ls-grow .9s cubic-bezier(.2, .8, .2, 1) .15s both; }
    .sx-ls.is-ready .is-active .sx-ls-pop { animation: sx-ls-pop .5s cubic-bezier(.2, .8, .3, 1.3) .3s both; }
    .sx-ls.is-ready .is-active .sx-ls-pop.d1 { animation-delay: .35s; }
    .sx-ls.is-ready .is-active .sx-ls-pop.d2 { animation-delay: .55s; }
    .sx-ls.is-ready .is-active .sx-ls-pop.d3 { animation-delay: .75s; }
    .sx-ls.is-ready .is-active .sx-ls-pop.d4 { animation-delay: .95s; }
    .sx-ls.is-ready .is-active .sx-ls-txt > * { animation: sx-ls-up .55s ease both; }
    .sx-ls.is-ready .is-active .sx-ls-txt > :nth-child(2) { animation-delay: .08s; }
    .sx-ls.is-ready .is-active .sx-ls-txt > :nth-child(3) { animation-delay: .16s; }
}
@keyframes sx-ls-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sx-ls-float { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes sx-ls-grow { from { transform: scaleY(.15); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes sx-ls-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sx-ls-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sx-ls-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-18px, -14px) rotate(25deg); } }

@media print { .sx-ls { display: none !important; } }