/* public/connexion.css — L'écran de connexion, d'après les maquettes validées
   de docs/maquettes/connexion. Trois vues dans le même écran : le gérant,
   la caisse verrouillée, le mot de passe oublié.

   Tout est rangé sous #login-section.cnx : rien ne fuit vers l'espace ni la
   caisse, qui ont leurs propres feuilles.

   Mise en page :
   - 900 px et plus : la vitrine à gauche (la carte du client), le formulaire à droite ;
   - moins de 900 px : le formulaire seul, plein écran, boutons à portée de pouce. */

#login-section.cnx {
    --fond: #FBFAF7;
    --surface: #FFFFFF;
    --surface-2: #F3F1EC;
    --bordure: #E6E2D9;
    --bordure-forte: #D3CEC2;
    --encre: #17150F;
    --encre-2: #57534A;
    --encre-3: #6F6A5F;
    --em: #0F7A55;
    --em-survol: #0B6647;
    --em-doux: #E3F2EB;
    --em-texte: #0B6647;
    --sur-em: #FFFFFF;
    --ambre-vif: #EBAA2C;
    --attention: #B4540A;
    --attention-doux: #FCEDE0;
    --danger: #C23B2E;
    --danger-doux: #FBE9E6;
    --carte: #1F3B33;
    --carte-texte: #F6F3EA;
    --anneau: rgb(15 122 85 / 0.32);
    --ombre-1: 0 1px 2px rgb(23 21 15 / 0.06), 0 1px 1px rgb(23 21 15 / 0.04);
    --police: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --police-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    background: var(--fond);
    color: var(--encre);
    font: 400 0.9375rem/1.55 var(--police);
    -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] #login-section.cnx {
    --fond: #0E0F11;
    --surface: #16171A;
    --surface-2: #1D1F23;
    --bordure: #2A2C31;
    --bordure-forte: #3A3D43;
    --encre: #F3F1EB;
    --encre-2: #B3AFA6;
    --encre-3: #8F8B81;
    --em: #2FBF86;
    --em-survol: #47D29B;
    --em-doux: rgb(47 191 134 / 0.14);
    --em-texte: #5AD9A3;
    --sur-em: #04160E;
    --attention: #E39A4C;
    --attention-doux: rgb(227 154 76 / 0.16);
    --danger: #E97567;
    --danger-doux: rgb(233 117 103 / 0.14);
    --carte: #14231F;
    --anneau: rgb(47 191 134 / 0.34);
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.4);
}

:where(#login-section.cnx) :where(h1, p) { margin: 0; }
:where(#login-section.cnx button) {
    font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
}
:where(#login-section.cnx) :focus-visible {
    outline: 2px solid var(--em); outline-offset: 2px; border-radius: 6px;
}

/* ── Vitrine (la carte que reçoivent les clients) ───────────────────────────── */

.cnx-vitrine {
    background: var(--carte); color: var(--carte-texte);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px 56px;
}
.cnx-marque { display: flex; align-items: center; gap: 12px; }
.cnx-marque-logo {
    width: 40px; height: 40px; border-radius: 12px; background: rgb(246 243 234 / 0.12);
    display: flex; align-items: center; justify-content: center;
}
.cnx-marque-nom { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }

.cnx-vitrine-corps { display: flex; flex-direction: column; gap: 28px; }
.cnx-vitrine-corps p {
    max-width: 400px; font-size: 0.9375rem; line-height: 1.6;
    color: rgb(246 243 234 / 0.72); text-wrap: pretty;
}
.cnx-vitrine-pied { font-size: 0.8125rem; color: rgb(246 243 234 / 0.62); }

.cnx-carte {
    width: 380px; max-width: 100%; border-radius: 18px;
    background: #16302A; border: 1px solid rgb(246 243 234 / 0.14);
    box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.55);
    padding: 20px 22px; display: flex; flex-direction: column; gap: 18px;
}
html[data-theme="dark"] .cnx-carte { background: #101E1A; }
.cnx-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cnx-carte-titres { display: flex; flex-direction: column; }
.cnx-carte-titres strong { font-size: 1rem; font-weight: 600; }
.cnx-carte-titres span { font-size: 0.8125rem; color: rgb(246 243 234 / 0.62); }
.cnx-carte-compte {
    height: 24px; padding: 0 10px; border-radius: 999px;
    background: rgb(235 170 44 / 0.18); color: var(--ambre-vif);
    font-size: 0.75rem; font-weight: 550; display: flex; align-items: center;
}
.cnx-tampons { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.cnx-tampons span { aspect-ratio: 1; border-radius: 999px; border: 1.5px dashed rgb(246 243 234 / 0.32); }
.cnx-tampons span.plein { background: var(--ambre-vif); border: 0; }
.cnx-carte-pied {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    border-top: 1px solid rgb(246 243 234 / 0.12); padding-top: 14px;
}
.cnx-carte-client { display: flex; flex-direction: column; }
.cnx-carte-client span {
    font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgb(246 243 234 / 0.62);
}
.cnx-carte-client strong { font-size: 0.875rem; font-weight: 550; }
.cnx-carte-numero { font-family: var(--police-code); font-size: 0.8125rem; color: rgb(246 243 234 / 0.62); }

/* ── Panneau du formulaire ──────────────────────────────────────────────────── */

.cnx-panneau {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 48px 24px 88px;
}
.cnx-vue { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 24px; }
.cnx-vue-centree { align-items: center; }

.cnx-logo-tel { display: none; }

.cnx-entete { display: flex; flex-direction: column; gap: 6px; }
.cnx-entete h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; }
.cnx-entete p { font-size: 0.9375rem; color: var(--encre-2); text-wrap: pretty; }
.cnx-entete-centree { align-items: center; text-align: center; }
.cnx-entete-centree h1 { font-size: 1.5rem; }

.cnx-champs { display: flex; flex-direction: column; gap: 16px; }
.cnx-champ { display: flex; flex-direction: column; gap: 7px; }
.cnx-champ > span { font-size: 0.8125rem; font-weight: 600; color: var(--encre-2); }
.cnx-champ input, .cnx-saisie {
    height: 48px; border-radius: 12px; border: 1px solid var(--bordure-forte);
    background: var(--surface); color: var(--encre);
    display: flex; align-items: center; padding: 0 14px;
    /* 16 px : en dessous, iOS zoome sur le champ à la sélection. */
    font-size: 16px; font-family: inherit; width: 100%;
}
.cnx-champ input:focus, .cnx-saisie:focus-within {
    outline: none; border-color: var(--em); box-shadow: 0 0 0 3px var(--anneau);
}
.cnx-saisie { gap: 10px; padding-right: 10px; }
.cnx-saisie input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: inherit;
    font: inherit; padding: 0; outline: none;
}
.cnx-champ input::placeholder { color: var(--encre-3); }
.cnx-oeil { color: var(--encre-3); display: flex; padding: 4px; }
.cnx-oeil:hover { color: var(--encre-2); }

.cnx-btn {
    height: 48px; border-radius: 12px; border: 1px solid var(--bordure-forte);
    background: var(--surface); color: var(--encre);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 0.9375rem; font-weight: 550; width: 100%;
}
.cnx-btn:hover { background: var(--surface-2); }
.cnx-btn-principal {
    background: var(--em); border-color: var(--em); color: var(--sur-em);
    font-weight: 600; box-shadow: var(--ombre-1);
}
.cnx-btn-principal:hover { background: var(--em-survol); border-color: var(--em-survol); }
.cnx-btn[disabled] { opacity: 0.6; cursor: default; }

.cnx-lien { align-self: center; font-size: 0.875rem; font-weight: 500; color: var(--em-texte); }
.cnx-lien:hover { color: var(--em-survol); text-decoration: underline; }
.cnx-lien-discret { color: var(--encre-2); }
.cnx-lien-discret:hover { color: var(--encre); }
.cnx-lien[disabled] { color: var(--encre-3); cursor: default; text-decoration: none; }

.cnx-ou { display: flex; align-items: center; gap: 14px; color: var(--encre-3); font-size: 0.8125rem; }
.cnx-ou::before, .cnx-ou::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }

.cnx-note { font-size: 0.8125rem; color: var(--encre-3); text-align: center; text-wrap: pretty; margin-top: -14px !important; }

.cnx-message {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 12px;
    font-size: 0.875rem; line-height: 1.45; text-wrap: pretty;
}
.cnx-message svg { flex: none; margin-top: 1px; }
.cnx-message-danger { background: var(--danger-doux); color: var(--danger); }

/* ── Caisse verrouillée ─────────────────────────────────────────────────────── */

.cnx-points { display: flex; gap: 16px; }
.cnx-point { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--bordure-forte); }
.cnx-point.pleine { background: var(--em); border-color: var(--em); }
.cnx-point.erreur { background: var(--danger); border-color: var(--danger); }
.cnx-points.secousse { animation: cnx-secousse 0.45s ease; }
@keyframes cnx-secousse {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    45% { transform: translateX(6px); }
    70% { transform: translateX(-4px); }
}

.cnx-clavier {
    width: 100%; max-width: 332px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.cnx-touche {
    height: 72px; border-radius: 14px; border: 1px solid var(--bordure);
    background: var(--surface); box-shadow: var(--ombre-1);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.625rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.cnx-touche:active { background: var(--surface-2); transform: scale(0.97); }
.cnx-touche-effacer { background: var(--surface-2); box-shadow: none; color: var(--encre-2); }
.cnx-clavier.figee { opacity: 0.45; pointer-events: none; }

.cnx-pause { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: center; }
.cnx-pause strong { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; }
.cnx-pause span { font-size: 0.875rem; color: var(--encre-2); text-wrap: pretty; }
.cnx-pause-rond {
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--attention-doux); color: var(--attention);
    display: flex; align-items: center; justify-content: center;
}
.cnx-pause-barre { width: 100%; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cnx-pause-barre > span { display: block; height: 100%; background: var(--attention); transition: width 1s linear; }

/* ── Mot de passe oublié ────────────────────────────────────────────────────── */

.cnx-fil { display: flex; align-items: center; gap: 12px; }
.cnx-retour {
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--bordure);
    background: var(--surface); color: var(--encre-2);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.cnx-retour:hover { background: var(--surface-2); color: var(--encre); }
.cnx-fil-corps { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cnx-fil-segments { display: flex; gap: 5px; }
.cnx-segment { flex: 1; height: 4px; border-radius: 999px; background: var(--surface-2); }
.cnx-segment.faite { background: var(--em); }
.cnx-fil-texte { font-size: 0.8125rem; color: var(--encre-3); }

.cnx-etape { display: flex; flex-direction: column; gap: 20px; }

.cnx-code { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cnx-code input {
    height: 56px; width: 100%; border-radius: 12px; border: 1px solid var(--bordure-forte);
    background: var(--surface); color: var(--encre);
    text-align: center; font-family: var(--police-code); font-size: 22px; font-weight: 500;
    padding: 0; outline: none;
}
.cnx-code input:focus { border: 1.5px solid var(--em); box-shadow: 0 0 0 3px var(--anneau); }
.cnx-code input:placeholder-shown { background: var(--surface-2); }

.cnx-force {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    height: 32px; padding: 0 12px; border-radius: 999px;
    background: var(--surface-2); color: var(--encre-2);
    font-size: 0.8125rem; font-weight: 550;
}
.cnx-force.ok { background: var(--em-doux); color: var(--em-texte); }

/* ── Langues ────────────────────────────────────────────────────────────────── */

.cnx-langues {
    position: absolute; right: 40px; bottom: 32px;
    display: flex; align-items: center; gap: 4px; padding: 4px;
    border-radius: 999px; border: 1px solid var(--bordure); background: var(--surface);
}
.cnx-langue {
    height: 30px; padding: 0 12px; border-radius: 999px;
    color: var(--encre-2); font-size: 0.8125rem; font-weight: 500;
    display: flex; align-items: center;
}
.cnx-langue:hover { color: var(--encre); }
.cnx-langue[aria-pressed="true"] { background: var(--encre); color: var(--fond); font-weight: 600; }

/* ── Téléphone et petites fenêtres ──────────────────────────────────────────── */

@media (max-width: 899px) {
    #login-section.cnx { grid-template-columns: minmax(0, 1fr); }
    .cnx-vitrine { display: none; }
    .cnx-panneau {
        justify-content: flex-start;
        padding: calc(48px + env(safe-area-inset-top)) 24px calc(96px + env(safe-area-inset-bottom));
    }
    .cnx-vue { max-width: 420px; gap: 28px; }
    .cnx-logo-tel {
        display: flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; border-radius: 16px;
        background: var(--carte); color: var(--carte-texte);
    }
    .cnx-entete h1 { font-size: 1.75rem; }
    .cnx-champ input, .cnx-saisie, .cnx-btn { height: 52px; }
    .cnx-btn { font-size: 1rem; }
    .cnx-lien { font-size: 0.9375rem; }
    .cnx-clavier { max-width: none; }
    .cnx-langues { position: static; align-self: center; margin-top: 8px; }
    .cnx-langue { height: 34px; font-size: 0.875rem; }
}

@media (max-width: 380px) {
    .cnx-touche { height: 64px; font-size: 1.5rem; }
    .cnx-code input { height: 50px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .cnx-points.secousse { animation: none; }
    .cnx-touche:active { transform: none; }
    .cnx-pause-barre > span { transition: none; }
}