Asmaae/PCA_Authentication

1/* test_model.css */2 3/* 1. Variables de couleur */4:root {5  --purple: #663399;6  --purple-dark: #4B0082;7  --purple-light: rgba(102, 51, 153, 0.1);8  --glass-bg: rgba(255, 255, 255, 0.25);9  --text: #333333;10}11 12/* 2. Reset de base */13* {14  margin: 0;15  padding: 0;16  box-sizing: border-box;17}18 19/* 3. Fond dégradé global */20body {21  font-family: 'Segoe UI', sans-serif;22  background: linear-gradient(135deg, var(--purple-light), #eae2f8);23  color: var(--text);24  display: flex;25  flex-direction: column;26  align-items: center;27  padding: 2rem;28  min-height: 100vh;29}30 31/* 4. Titre principal */32h2 {33  color: var(--purple-dark);34  text-align: center;35  margin-bottom: 2rem;36  font-size: 1.8rem;37  text-shadow: 1px 1px 2px var(--purple-light);38  max-width: 700px;39}40 41/* 5. Formulaire glassmorphism + fallback Edge */42form {43  position: relative;44  z-index: 1;45  width: 100%;46  max-width: 400px;47  margin: 0 auto;48  padding: 2rem;49  border-radius: 16px;50  background: var(--glass-bg);            /* fallback */51  -webkit-backdrop-filter: blur(12px);52  backdrop-filter: blur(12px);53  box-shadow: 0 8px 32px rgba(0,0,0,0.1);54  display: flex;55  flex-direction: column;56  gap: 0.6rem;57  animation: slideIn 0.6s ease-out;58}59 60@supports not ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {61  form::before {62    content: '';63    position: absolute;64    top: 0; right: 0; bottom: 0; left: 0;65    background: var(--glass-bg);66    filter: blur(12px);67    border-radius: inherit;68    z-index: -1;69  }70}71 72@keyframes slideIn {73  from { opacity: 0; transform: translateY(30px); }74  to   { opacity: 1; transform: translateY(0); }75}76 77/* 6. Labels et inputs stylisés */78label {79  display: block;80  font-weight: 600;81  color: var(--purple-dark);82  font-size: 0.95rem;83  margin-bottom: 0.5rem;84}85 86input[type="text"],87input[type="password"] {88  width: 100%;89  padding: 0.8rem 1rem;90  border: none;91  border-radius: 10px;92  background: rgba(255,255,255,0.85);93  font-size: 1rem;94  transition: box-shadow 0.2s ease;95}96 97input:focus {98  outline: none;99  box-shadow: 0 0 0 3px var(--purple-light);100}101 102/* 7. Groupe mot de passe + status */103.password-group,104/* même style si tu ajoutes .password-group ailleurs */105label + input[type="password"] {106  display: flex;107  align-items: center;108  justify-content: space-between;109}110 111#status {112  font-size: 0.9rem;113  font-weight: 500;114  color: var(--purple-dark);115}116 117/* 8. Boutons principaux */118button {119  width: 100%;120  padding: 0.8rem;121  font-size: 1rem;122  font-weight: 600;123  color: var(--white);124  background: linear-gradient(135deg, var(--purple), var(--purple-dark));125  border: none;126  border-radius: 12px;127  cursor: pointer;128  color: #f0eaf3;129  transition: transform 0.2s ease, box-shadow 0.2s ease;130  box-shadow: 0 4px 14px rgba(0,0,0,0.1);131}132 133button:hover:not(:disabled) {134  transform: translateY(-2px);135  box-shadow: 0 6px 18px rgba(0,0,0,0.15);136}137 138button:disabled {139  background: #aaa;140  cursor: not-allowed;141}142 143/* 9. Zone de résultat */144#result {145  width: 100%;146  max-width: 420px;147  margin-top: 1.5rem;148  padding: 1rem;149  border-radius: 10px;150  background: rgba(255,255,255,0.25);151  -webkit-backdrop-filter: blur(8px);152  backdrop-filter: blur(8px);153  box-shadow: 0 4px 16px rgba(0,0,0,0.1);154  color: var(--purple-dark);155  text-align: center;156  min-height: 3em;157}158