/* La page de connexion de la carte (src/acces-domaine.js), sur le modèle de la connexion d'Auguste : plein écran, carte de 400 px, aux jetons du site. */
.acces-gate { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: var(--fond-app, #0E0F11); color: var(--encre, #F2F2F2); font-family: var(--police, system-ui, sans-serif); }
.acces-page { width: min(400px, 100%); display: flex; flex-direction: column; gap: 22px; margin: auto; }
.acces-entete { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.acces-logo { display: block; width: 56px; height: 56px; padding: 10px; box-sizing: border-box; border-radius: var(--r-panneau, 14px); box-shadow: var(--verre-filet, inset 0 0 0 1px rgba(255, 255, 255, .08)); }
.acces-nom { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--encre, #F2F2F2); }
.acces-sous-titre { margin: 0; font-size: var(--t-13, 13px); color: var(--attenue, rgba(255, 255, 255, .68)); }
.acces-boite { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r-panneau, 14px); background: var(--panneau, #141518); box-shadow: 0 8px 24px rgba(0, 0, 0, .3), var(--verre-filet, inset 0 0 0 1px rgba(255, 255, 255, .08)); }
.acces-titre { margin: 0; font-size: var(--t-17, 17px); font-weight: 600; color: var(--encre, #F2F2F2); }
.acces-texte { margin: 0; font-size: var(--t-14, 14px); line-height: 1.5; color: var(--texte, rgba(255, 255, 255, .86)); }
.acces-form { display: flex; flex-direction: column; gap: 14px; }
.acces-champ { display: flex; flex-direction: column; gap: 6px; }
.acces-etiquette { font-size: var(--t-12, 12px); font-weight: 500; color: var(--attenue, rgba(255, 255, 255, .68)); }
.acces-champ input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 0; border-radius: var(--r-bouton, 8px); background: var(--champ, rgba(255, 255, 255, .08)); color: var(--encre, #F2F2F2); font: inherit; font-size: var(--t-14, 14px); box-shadow: inset 0 0 0 1px var(--filet, rgba(255, 255, 255, .08)); }
.acces-champ input::placeholder { color: var(--discret, rgba(255, 255, 255, .46)); }
.acces-champ input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--filet-fort, rgba(255, 255, 255, .3)), 0 0 0 2px var(--filet-fort, rgba(255, 255, 255, .2)); }
.acces-message { margin: 0; min-height: 1.4em; font-size: var(--t-13, 13px); line-height: 1.4; color: var(--attenue, rgba(255, 255, 255, .68)); }
.acces-message:empty { display: none; }
.acces-alerte { color: #E5484D; }
.acces-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.acces-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h-bouton, 30px); padding: 9px 14px; border: 0; border-radius: var(--r-bouton, 8px); background: var(--champ, rgba(255, 255, 255, .08)); color: var(--encre, #F2F2F2); font: inherit; font-size: var(--t-13, 13px); cursor: pointer; text-decoration: none; }
.acces-bouton:hover { background: var(--survol, rgba(255, 255, 255, .14)); }
.acces-bouton:disabled { opacity: .55; cursor: default; }
.acces-large { width: 100%; }
.acces-primaire { background: var(--encre, #F2F2F2); color: var(--fond-app, #0E0F11); font-weight: 600; }
.acces-primaire:hover { background: var(--encre, #F2F2F2); opacity: .88; }
.acces-google { box-shadow: inset 0 0 0 1px var(--filet-fort, rgba(255, 255, 255, .12)); background: transparent; }
.acces-google-logo { flex: none; }
.acces-separateur { display: flex; align-items: center; gap: 12px; color: var(--discret, rgba(255, 255, 255, .46)); font-size: var(--t-12, 12px); }
.acces-separateur::before, .acces-separateur::after { content: ""; flex: 1; height: 1px; background: var(--filet, rgba(255, 255, 255, .08)); }
.acces-pied { margin: 0; text-align: center; }
.acces-lien { padding: 4px 6px; border: 0; background: none; color: var(--attenue, rgba(255, 255, 255, .68)); font: inherit; font-size: var(--t-13, 13px); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.acces-lien:hover { color: var(--encre, #F2F2F2); }
.acces-info { margin: 0; font-size: var(--t-12, 12px); line-height: 1.5; color: var(--discret, rgba(255, 255, 255, .46)); text-align: center; }
.acces-gate :focus-visible { outline: 2px solid var(--encre, #F2F2F2); outline-offset: 2px; }
@media (max-width: 480px) { .acces-gate { padding: 16px; } .acces-boite { padding: 20px; } }