/**
 * SentinelleServ
 * Développé par Magali Boyer — Galisurf
 * https://galisurf.eu
 * © 2026 Magali Boyer — Tous droits réservés.
 */

/** Couleurs et typographie */
:root {
    color-scheme: dark;
    --fond: #090f15;
    --panneau: #111c26;
    --ligne: #314554;
    --texte: #edf4f7;
    --secondaire: #a9bbc8;
    --accent: #08d2eb;
	--accent-texte: #08d2eb;
    --mono: Consolas, "Liberation Mono", monospace;
}

* {
    box-sizing: border-box;
}

/** Fond quadrillé et centrage de la page */
body.page-acces {
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding: clamp(24px, 6vh, 72px) 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background-color: var(--fond);
    background-image:
        linear-gradient(#ffffff04 1px, transparent 1px),
        linear-gradient(90deg, #ffffff04 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--texte);
    font: 1rem/1.6 "Segoe UI", sans-serif;
}

/** Panneau principal */
.console {
    width: 100%;
    max-width: 480px;
    padding: clamp(24px, 5vw, 42px);
    border: 1px solid var(--ligne);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    background: var(--panneau);
    box-shadow: 0 24px 70px #0005;
    overflow-wrap: anywhere;
}

/** Identité de l'application */
.console-entete {
    margin-bottom: 30px;
}

.repere {
    margin: 0 0 18px;
    color: var(--accent-texte);
    font: .7rem/1.6 var(--mono);
    letter-spacing: .09em;
}

.console h1 {
    margin: 0;
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.05em;
}

.console h1 span {
    color: var(--accent); 
}

.signature {
    margin: 10px 0 0;
    color: var(--secondaire);
    font: .8rem/1.6 var(--mono);
}

.console h2 {
    margin: 0 0 20px;
    font-size: 1.2rem;
    font-weight: 600;
}

.console > p {
    color: var(--secondaire);
}

/** Formulaires */
.console form {
    margin: 24px 0 0;
}

.console form p {
    margin: 0 0 20px;
}

.console form br {
    display: none;
}

.console label {
    display: block;
    margin-bottom: 8px;
    font-size: .9rem;
}

.console input:not([type="hidden"]) {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #526675;
    border-radius: 3px;
    background: var(--fond);
    color: var(--texte);
    font: inherit;
}

/** Préserve les couleurs lors du remplissage automatique */
.console input:-webkit-autofill {
    -webkit-text-fill-color: var(--texte);
    -webkit-box-shadow: 0 0 0 1000px var(--fond) inset;
    caret-color: var(--texte);
}

/** Boutons */
.console button {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--accent);
    color: #09241f;
    font: 700 .95rem/1.4 var(--mono);
    cursor: pointer;
}

.console button:hover {
    background: #a3f5e8;
}

.console button:active {
    background: #53cbb8;
}

/** Repère visible pour la navigation au clavier */
.page-acces :is(input, button, a):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

/** Messages du formulaire */
.console [role="alert"] {
    padding: 12px 14px;
    border-left: 3px solid #ffbd9b;
    background: #35251f;
    color: #ffe0cf;
}

/** Signature */
.signature-galisurf {
    max-width: 480px;
    color: var(--secondaire);
    text-align: center;
    font-size: .8rem;
}

.signature-galisurf p {
    margin: 0;
}

.page-acces a {
    color: var(--accent-texte);
    text-underline-offset: 4px;
}

.page-acces a:hover {
    color: #c1fff4;
}