/* web/connexion.css — les pages de connexion, de code, de mot de passe oublié, de réinitialisation et de confirmation (.porte-seule) dans le style dashlife :
   verre dépoli, vert émeraude, fond d'ambiance. Chargé après porte.css ; ne touche QUE .porte-seule (l'accueil public garde son style).
   Les jetons --p-* de porte.css sont redéfinis ici pour ces pages seulement : le violet disparaît, le reste de porte.css s'applique tel quel. */
#acces .porte.porte-seule {
  --p-violet: var(--vert); --p-violet-fonce: oklch(.36 .09 165); --p-violet-clair: var(--vert-vif); --p-lien: var(--vert);
  --p-fond: var(--voile); --p-carte: var(--verre-fort); --p-filet: var(--filet);
  --p-encre: var(--encre); --p-encre-2: var(--encre-2); --p-encre-3: var(--encre-3);
  --p-bord: var(--encre-3);          /* bordure des champs : 3:1 minimum */
  --p-vert: var(--vert); --p-vert-fond: oklch(.93 .05 165); --p-rouge: oklch(.48 .17 28); --p-rouge-fond: oklch(.95 .03 40); --p-orange: var(--action);
  background: transparent; min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden;
}
/* une lueur verte derrière la carte */
#acces .porte.porte-seule::before { content: ""; position: absolute; width: 70vmin; height: 70vmin; left: 50%; top: 50%; transform: translate(-50%, -45%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, oklch(.80 .10 165 / .45), transparent 65%); }
#acces .porte.porte-seule > * { position: relative; }
#acces .porte.porte-seule .porte-seule-logo img { height: 28px; }
#acces .porte.porte-seule .porte-carte { background: var(--verre-fort); border: var(--trait) solid var(--verre-bord); border-radius: var(--r-panneau); box-shadow: var(--ombre-haute);
  -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
#acces .porte.porte-seule .porte-note, #acces .porte.porte-seule .aide-info { background: var(--voile); }
#acces .porte.porte-seule .champ input, #acces .porte.porte-seule .champ select { background: var(--champ); border-radius: var(--r-2); }
#acces .porte.porte-seule .champ input:focus-visible, #acces .porte.porte-seule .champ select:focus-visible { border-color: var(--vert); box-shadow: 0 0 0 3px oklch(.62 .12 165 / .35); }
#acces .porte.porte-seule .go { background: var(--encre); color: var(--fond); border-radius: var(--r-pleine); }
#acces .porte.porte-seule .go:hover:not(:disabled), #acces .porte.porte-seule .go:disabled { background: var(--vert-fort); color: var(--sur-vert); }
#acces .porte.porte-seule .go.second { background: var(--verre-fort); color: var(--encre); border-color: var(--verre-bord); }
#acces .porte.porte-seule .go.second:hover:not(:disabled) { background: var(--blanc-plein); color: var(--encre); }
#acces .porte.porte-seule .go.second:disabled { background: var(--voile-leger); color: var(--encre-3); }
#acces .porte.porte-seule .lien-ico { border: var(--trait) solid var(--verre-bord); }
#acces .porte.porte-seule a:focus-visible, #acces .porte.porte-seule .lien:focus-visible { outline-color: var(--vert); }
#acces .porte.porte-seule .porte-carte h1 { letter-spacing: -.03em; }
@media (max-width: 520px) { #acces .porte.porte-seule { justify-content: flex-start; padding-top: 48px; } #acces .porte.porte-seule .porte-carte { padding: 28px 20px; } }
@media (prefers-reduced-motion: no-preference) {
  #acces .porte.porte-seule .porte-carte { animation: connexion-entre 600ms var(--ease-out) both; }
  @keyframes connexion-entre { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(8px); } }
}