/* Generated by OrchestKit Claude Plugin - 2026-08-28 */

/*
 * Écran de connexion — refonte visuelle (demande du porteur de projet,
 * 2026-08-29 : « design épuré moderne »).
 *
 * Feuille dédiée, chargée UNIQUEMENT par templates/security/login.html.twig
 * (bloc `stylesheets` de base_auth.html.twig) — jamais importée dans
 * assets/app.js : ce fichier ne doit pas peser sur le reste de
 * l'application (AdminLTE 4 + app.css restent son unique feuille globale,
 * voir le docblock d'app.css).
 *
 * Tout est scopé sous `.skh-auth` pour ne jamais entrer en conflit avec les
 * classes AdminLTE/Bootstrap déjà chargées globalement par app.js.
 *
 * Direction : l'écran de connexion emprunte au vocabulaire visuel réel du
 * métier — une étiquette d'inventaire suspendue (encoche perforée en haut,
 * ligne de perforation en pointillés, code-barres décoratif en pied de
 * carte) plutôt qu'une carte de connexion SaaS générique.
 *
 * Jetons de couleur (--skh-*) : définis une seule fois dans app.css (chargé
 * globalement, y compris sur cette page via l'importmap de base_auth.html.twig)
 * — ne jamais les redéfinir ici, uniquement les consommer via var(--skh-*).
 */

.skh-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background-color: var(--skh-surface);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--skh-ink);
}

.skh-auth__tag {
    position: relative;
    width: 100%;
    max-width: 23rem;
    background: var(--skh-card);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 24, 28, 0.06), 0 18px 40px -20px rgba(20, 24, 28, 0.35);
    padding: 2.75rem 2rem 2rem;
    opacity: 0;
    transform: translateY(10px) rotate(-1.1deg);
    animation: skh-auth-settle 480ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

@media (prefers-reduced-motion: reduce) {
    .skh-auth__tag {
        animation: skh-auth-fade 220ms ease-out forwards;
    }
}

@keyframes skh-auth-settle {
    0% {
        opacity: 0;
        transform: translateY(10px) rotate(-1.1deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes skh-auth-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Encoche perforée : cercle qui laisse « voir » le fond de page à travers la carte. */
.skh-auth__notch {
    position: absolute;
    top: -14px;
    left: 2.25rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--skh-surface);
    border: 1px solid var(--skh-line);
    box-shadow: inset 0 1px 3px rgba(20, 24, 28, 0.12);
}

.skh-auth__eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--skh-steel);
    margin: 0 0 0.4rem;
}

.skh-auth__mark-link {
    display: block;
    text-decoration: none;
}

.skh-auth__mark {
    font-family: 'Allerta Stencil', 'IBM Plex Sans', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--skh-ink);
    margin: 0;
}

.skh-auth__mark-rule {
    display: inline-block;
    width: 2.25rem;
    height: 4px;
    background: var(--skh-signal);
    margin-top: 0.6rem;
    border-radius: 2px;
}

.skh-auth__perforation {
    border: none;
    border-top: 1.5px dashed var(--skh-line);
    margin: 1.5rem 0 1.25rem;
}

.skh-auth__intro {
    font-size: 0.9rem;
    color: var(--skh-steel);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.skh-auth__error {
    color: var(--skh-danger);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.6rem 0;
    border-top: 1.5px dashed var(--skh-danger);
    border-bottom: 1.5px dashed var(--skh-danger);
    margin: 0 0 1.5rem;
}

.skh-auth__field-group {
    margin-bottom: 1.25rem;
}

.skh-auth__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--skh-ink);
    margin-bottom: 0.4rem;
}

.skh-auth__input {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--skh-ink);
    background: var(--skh-card);
    border: 1.5px solid var(--skh-line);
    border-radius: 7px;
    padding: 0.65rem 0.8rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.skh-auth__input::placeholder {
    color: #9aa2a9;
}

.skh-auth__input:focus {
    outline: none;
    border-color: var(--skh-ink);
    box-shadow: 0 0 0 3px rgba(255, 198, 41, 0.45);
}

.skh-auth__submit {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--skh-ink);
    background: var(--skh-signal);
    border: 1.5px solid var(--skh-ink);
    border-radius: 7px;
    padding: 0.7rem 1rem;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.skh-auth__submit:hover {
    box-shadow: 3px 3px 0 var(--skh-ink);
    transform: translate(-2px, -2px);
}

.skh-auth__submit:focus-visible {
    outline: 2px solid var(--skh-ink);
    outline-offset: 3px;
}

.skh-auth__submit:active {
    transform: translate(0, 0);
    box-shadow: none;
}

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

    .skh-auth__submit:hover {
        transform: none;
    }
}

/* Code-barres décoratif — rythme des barres piloté par nth-child, jamais par du style inline. */
.skh-auth__barcode {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 34px;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--skh-line);
}

.skh-auth__bar {
    display: block;
    width: 3px;
    height: 100%;
    background: var(--skh-ink);
}

.skh-auth__bar:nth-child(3n) { height: 65%; }
.skh-auth__bar:nth-child(4n) { width: 5px; }
.skh-auth__bar:nth-child(5n) { height: 45%; background: var(--skh-steel); }
.skh-auth__bar:nth-child(7n) { height: 85%; }

.skh-auth__stamp {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--skh-steel);
    text-align: right;
    margin: 0.6rem 0 0;
}

@media (max-width: 420px) {
    .skh-auth__tag {
        padding: 2.25rem 1.5rem 1.75rem;
    }

    .skh-auth__mark {
        font-size: 2.1rem;
    }
}