Mery3391/YAMNET

1/* ============================================================2   AUTH.CSS — Login · Signup pages3   DarijaEmotions — Thème Corail 20264   ============================================================ */5 6.auth-page {7  min-height: 100vh;8  display: flex;9  align-items: center;10  justify-content: center;11  padding: 2rem 1rem;12  position: relative;13  z-index: 1;14}15 16/* ── Card ── */17.auth-box {18  width: 100%;19  max-width: 440px;20  background: var(--surface);21  border: 1px solid var(--border-strong);22  border-radius: var(--radius);23  padding: 2.5rem 2.2rem 2rem;24  box-shadow: var(--shadow-md);25  position: relative;26}27 28/* Zellige top stripe avec #FEAE96 */29.auth-box::before {30  content: '';31  position: absolute;32  top: 0; left: 0; right: 0;33  height: 4px;34  border-radius: var(--radius) var(--radius) 0 0;35  background: linear-gradient(90deg,36    #FEAE96 0%, #EE9E8E 25%,37    #FFDBC3 50%, #EE9E8E 75%, #FEAE96 100%);38}39 40/* ── Logo (identique au dashboard) ── */41.auth-logo {42  display: flex;43  align-items: center;44  gap: 1rem;45  justify-content: center;46  margin-bottom: 2rem;47  text-decoration: none;48}49 50/* Badge 4 emojis avec couleurs personnalisées */51.auth-logo-badge {52  width: 56px;53  height: 56px;54  border-radius: 16px;55  background: linear-gradient(135deg, #FFDBC3 0%, #EE9E8E 100%);56  border: 1.5px solid var(--border-strong);57  display: grid;58  grid-template-columns: 1fr 1fr;59  grid-template-rows: 1fr 1fr;60  gap: 0;61  overflow: hidden;62  flex-shrink: 0;63  box-shadow: var(--shadow);64  transition: transform 0.3s ease, box-shadow 0.3s ease;65}66 67.auth-logo-badge:hover {68  transform: scale(1.04) translateY(-1px);69  box-shadow: var(--shadow-md);70}71 72.auth-logo-badge .em {73  display: flex;74  align-items: center;75  justify-content: center;76  font-size: 19px;77  line-height: 1;78  transition: transform 0.2s ease;79}80 81/* Couleurs personnalisées pour chaque emoji */82.auth-logo-badge .em:nth-child(1) { color: #013237; }83.auth-logo-badge .em:nth-child(2) { color: #EE9E8E; }84.auth-logo-badge .em:nth-child(3) { color: #FEAE96; }85.auth-logo-badge .em:nth-child(4) { color: #5C7A7E; }86 87.auth-logo-text h2 {88  font-family: var(--font-display);89  font-size: 2rem;90  font-weight: 400;91  color: #FEAE96;92  margin: 0;93  line-height: 1.1;94  letter-spacing: 0.01em;95}96 97.auth-logo-text p {98  font-size: 0.62rem;99  color: var(--muted);100  font-weight: 600;101  letter-spacing: 0.14em;102  text-transform: uppercase;103  margin-top: 2px;104  font-family: var(--font);105  text-align: center;106}107 108/* ── Heading ── */109.auth-title {110  font-family: var(--font-display);111  font-size: 2rem;112  font-weight: 400;113  color: #FEAE96;114  margin-bottom: 0.25rem;115  letter-spacing: 0.01em;116  text-align: center;117}118 119.auth-sub {120  font-size: 0.8rem;121  color: var(--muted);122  margin-bottom: 1.75rem;123  text-align: center;124}125 126/* ── Form ── */127.form-group { margin-bottom: 1rem; }128 129.form-label {130  display: block;131  font-size: 0.72rem;132  font-weight: 600;133  color: var(--muted);134  margin-bottom: 0.4rem;135  letter-spacing: 0.05em;136  text-transform: uppercase;137}138 139.form-input {140  width: 100%;141  height: 46px;142  background: var(--surface2);143  border: 1px solid var(--border-strong);144  border-radius: var(--radius-sm);145  padding: 0 1rem;146  font-family: var(--font);147  font-size: 0.875rem;148  color: var(--text);149  outline: none;150  transition: var(--t);151}152 153.form-input:focus {154  border-color: #FEAE96;155  background: #fff;156  box-shadow: 0 0 0 3px rgba(254,174,150,0.15);157}158 159.form-input::placeholder { color: var(--muted-light); }160 161/* ── Submit button avec #FEAE96 ── */162.btn-auth {163  width: 100%;164  height: 48px;165  background: linear-gradient(135deg, #FEAE96 0%, #fd9a7c 100%);166  color: #fff;167  border: none;168  border-radius: var(--radius-sm);169  font-family: var(--font-title);170  font-size: 0.92rem;171  font-weight: 700;172  cursor: pointer;173  transition: var(--t);174  margin-top: 0.5rem;175  display: flex;176  align-items: center;177  justify-content: center;178  gap: 0.5rem;179  letter-spacing: 0.01em;180  box-shadow: 0 4px 14px rgba(254,174,150,0.25);181}182 183.btn-auth:hover:not(:disabled) {184  transform: translateY(-2px);185  box-shadow: 0 8px 24px rgba(254,174,150,0.35);186}187 188.btn-auth:active:not(:disabled) { transform: translateY(0); }189 190.btn-auth:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }191 192.btn-auth .spinner {193  width: 16px;194  height: 16px;195  border: 2px solid rgba(255,255,255,0.3);196  border-top-color: #fff;197  border-radius: 50%;198  animation: spin 0.7s linear infinite;199  display: none;200}201 202.btn-auth.loading .spinner { display: block; }203.btn-auth.loading .btn-label { display: none; }204 205@keyframes spin { to { transform: rotate(360deg); } }206 207/* ── Divider ── */208.auth-divider {209  display: flex;210  align-items: center;211  gap: 0.75rem;212  margin: 1.2rem 0;213  color: var(--muted-light);214  font-size: 0.72rem;215}216 217.auth-divider::before,218.auth-divider::after {219  content: '';220  flex: 1;221  height: 1px;222  background: var(--border-strong);223}224 225/* ── Google button ── */226.btn-google {227  width: 100%;228  height: 46px;229  background: var(--surface);230  border: 1px solid var(--border-strong);231  border-radius: var(--radius-sm);232  font-family: var(--font);233  font-size: 0.875rem;234  font-weight: 500;235  color: var(--text);236  cursor: pointer;237  display: flex;238  align-items: center;239  justify-content: center;240  gap: 0.65rem;241  transition: var(--t);242}243 244.btn-google:hover {245  background: var(--surface2);246  transform: translateY(-1px);247  border-color: #FEAE96;248}249 250.btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }251 252/* ── Switch link ── */253.auth-switch {254  text-align: center;255  margin-top: 1.6rem;256  font-size: 0.82rem;257  color: var(--muted);258}259 260.auth-link {261  color: #FEAE96;262  font-weight: 600;263  cursor: pointer;264  text-decoration: none;265  transition: var(--t);266}267 268.auth-link:hover { color: var(--accent-hover); text-decoration: underline; }269 270/* ── Error alert ── */271.auth-error {272  display: none;273  background: var(--danger-muted);274  border: 1px solid rgba(238,158,142,0.22);275  border-radius: var(--radius-xs);276  padding: 0.6rem 0.9rem;277  font-size: 0.78rem;278  color: var(--danger);279  margin-bottom: 1rem;280  align-items: center;281  gap: 0.5rem;282}283 284.auth-error.show { display: flex; }285 286.auth-error svg {287  width: 14px;288  height: 14px;289  stroke: currentColor;290  fill: none;291  stroke-width: 2;292  flex-shrink: 0;293}294 295/* ── Password toggle ── */296.input-wrap { position: relative; }297.input-wrap .form-input { padding-right: 2.8rem; }298 299.pw-toggle {300  position: absolute;301  right: 0.75rem;302  top: 50%;303  transform: translateY(-50%);304  background: none;305  border: none;306  cursor: pointer;307  color: var(--muted-light);308  padding: 4px;309  display: grid;310  place-items: center;311  transition: var(--t);312}313 314.pw-toggle:hover { color: #FEAE96; }315.pw-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }316 317/* ── Emotion mini strip (déco login) ── */318.auth-emotion-strip {319  display: flex;320  justify-content: center;321  gap: 6px;322  margin-bottom: 1.75rem;323}324 325.auth-emotion-pip {326  display: flex;327  flex-direction: column;328  align-items: center;329  gap: 4px;330  padding: 8px 12px;331  border-radius: 12px;332  border: 1px solid transparent;333  font-size: 1.6rem;334  line-height: 1;335  transition: var(--t);336}337 338.auth-emotion-pip span {339  font-size: 0.6rem;340  font-weight: 700;341  letter-spacing: 0.08em;342  text-transform: uppercase;343}344 345.auth-emotion-pip.happy  { background: var(--happy-bg);   border-color: rgba(254,174,150,0.2); }346.auth-emotion-pip.happy span  { color: #FEAE96;  }347.auth-emotion-pip.sad    { background: var(--sad-bg);     border-color: rgba(92,122,126,0.2); }348.auth-emotion-pip.sad span    { color: var(--sad);    }349.auth-emotion-pip.angry  { background: var(--angry-bg);   border-color: rgba(238,158,142,0.2); }350.auth-emotion-pip.angry span  { color: #EE9E8E;  }351.auth-emotion-pip.neutral{ background: var(--neutral-bg); border-color: rgba(143,168,172,0.2); }352.auth-emotion-pip.neutral span{ color: var(--neutral); }353 354.auth-emotion-pip:hover { transform: translateY(-3px) scale(1.06); }355 356/* ── Responsive ── */357@media (max-width: 480px) {358  .auth-box { padding: 2rem 1.3rem 1.5rem; border-radius: var(--radius-sm); }359  .auth-logo-text h2 { font-size: 1.6rem !important; }360  .auth-logo-badge { width: 48px; height: 48px; }361  .auth-logo-badge .em { font-size: 15px !important; }362  .auth-title { font-size: 1.6rem; }363  .auth-emotion-strip { gap: 4px; }364  .auth-emotion-pip { padding: 6px 8px; font-size: 1.3rem; }365}