:root {
  color-scheme: light;
  --vert: #173c30;
  --vert-clair: #315949;
  --or: #c7a354;
  --creme: #fffaf0;
  --encre: #263a31;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow-x: hidden;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 16%, rgba(246, 221, 156, .25), transparent 26%),
    radial-gradient(circle at 8% 84%, rgba(216, 187, 112, .13), transparent 28%),
    linear-gradient(150deg, #0e2d24, #315647 52%, #12352a);
  color: var(--encre);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
}

body::before {
  inset: -35vmax;
  border: 1px solid rgba(229, 199, 123, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 15vmax rgba(255,255,255,.018), 0 0 0 30vmax rgba(255,255,255,.012);
}

body::after {
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(255,239,194,.6) 0 1px, transparent 1.5px);
  background-size: 31px 31px;
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 24%, #000 74%);
}

.connexion-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: 24px 27px 27px;
  overflow: hidden;
  border: 1px solid rgba(224, 190, 109, .65);
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(255,253,247,.985), rgba(248,239,214,.97));
  box-shadow: 0 28px 80px rgba(4, 22, 16, .44), inset 0 0 0 5px rgba(255,255,255,.35);
  text-align: center;
}

.connexion-card::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid rgba(199, 163, 84, .18);
  border-radius: 25px;
  pointer-events: none;
}

.connexion-logo {
  display: block;
  width: 138px;
  height: 138px;
  margin: -4px auto 2px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(47, 63, 45, .16));
}

.connexion-noms {
  margin: 0;
  color: var(--vert);
  font: 600 18px/1.1 Georgia, serif;
  letter-spacing: .4px;
}

.connexion-noms i { color: var(--or); font: italic 16px Georgia, serif; }

.connexion-date {
  margin: 7px 0 0;
  color: #94712e;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}

.connexion-ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 13px auto 8px;
  color: var(--or);
  font-size: 9px;
}

.connexion-ornement i { width: 34px; height: 1px; background: rgba(199, 163, 84, .48); }

.connexion-intro {
  max-width: 320px;
  margin: 15px auto 0;
  color: #52635a;
  font: 500 16px/1.52 Georgia, serif;
}

form { margin-top: 21px; }

label {
  display: block;
  margin-bottom: 8px;
  color: #516158;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

input {
  width: 100%;
  padding: 15px 12px;
  border: 1px solid #b9ad8e;
  border-radius: 15px;
  outline: none;
  background: rgba(255,255,255,.86);
  color: var(--vert);
  font-size: 21px;
  font-weight: 750;
  letter-spacing: 4px;
  text-align: center;
  text-transform: uppercase;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus {
  border-color: var(--or);
  background: white;
  box-shadow: 0 0 0 4px rgba(199, 163, 84, .16);
}

button {
  width: 100%;
  margin-top: 11px;
  padding: 14px 17px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--vert-clair), var(--vert));
  color: white;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 9px 20px rgba(23, 60, 48, .24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button span { display: inline-block; margin-left: 6px; color: #e8cc83; font-size: 18px; transition: transform .18s ease; }
button:active { transform: translateY(1px); }
button:active span { transform: translateX(3px); }

.erreur {
  margin: 14px 0 -6px;
  padding: 10px 12px;
  border: 1px solid rgba(138, 53, 42, .16);
  border-radius: 11px;
  background: #f9e6e1;
  color: #8a352a;
  font-size: 13px;
  font-weight: 750;
}

@media (max-height: 690px) {
  body { padding-top: 13px; padding-bottom: 13px; }
  .connexion-card { padding-top: 15px; padding-bottom: 19px; }
  .connexion-logo { width: 105px; height: 105px; }
  .connexion-ornement { margin-top: 9px; }
  .connexion-intro { margin-top: 8px; }
  form { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}