/* =========================================================
   CŒURS HORS LIGNE
   CONNEXION — VERSION COMPACTE / VIVANTE
   Identité visuelle officielle CHL
   ========================================================= */

:root {
  --night: #061625;
  --night-deep: #020b13;
  --night-soft: #0a2134;
  --night-panel: rgba(4, 17, 29, 0.82);

  --gold: #d9a441;
  --gold-light: #f3c969;
  --gold-soft: #b98634;

  --white: #fffdf8;
  --cream: #f5f0e6;

  --soft: #d8d6d0;
  --muted: #92999e;

  --success: #9fd2a7;
  --danger: #d77b7b;

  --border:
    rgba(217, 164, 65, 0.28);

  --border-strong:
    rgba(217, 164, 65, 0.58);

  --shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.28);

  --radius: 16px;
  --radius-small: 11px;
}


/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  min-width: 320px;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--white);

  background:
    radial-gradient(
      circle at 14% 12%,
      rgba(217, 164, 65, 0.09),
      transparent 24%
    ),
    radial-gradient(
      circle at 88% 34%,
      rgba(243, 201, 105, 0.055),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      var(--night-deep),
      var(--night) 48%,
      #081c2c
    );

  background-attachment: fixed;

  line-height: 1.5;
}


body::before {
  content: "";

  position: fixed;
  inset: 0;

  pointer-events: none;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}


button,
input {
  font: inherit;
}


button {
  border: 0;
}


a {
  color: inherit;
  text-decoration: none;
}


[hidden] {
  display: none !important;
}


.page-shell {
  position: relative;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.topbar {
  min-height: 66px;

  padding:
    9px
    clamp(20px, 4vw, 64px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  background:
    rgba(2, 11, 19, 0.88);

  border-bottom:
    1px solid
    var(--border);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  position: relative;
  z-index: 20;
}


.brand {
  display: inline-flex;
  align-items: center;

  gap: 11px;
}


.brand-heart {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  color: #171006;

  background:
    linear-gradient(
      145deg,
      var(--gold-light),
      var(--gold)
    );

  border-radius: 50%;

  box-shadow:
    0 0 24px
    rgba(217, 164, 65, 0.18);

  animation:
    heartAmbient
    5s
    ease-in-out
    infinite;
}


.brand-text {
  display: flex;
  flex-direction: column;

  line-height: 1.18;
}


.brand-text strong {
  font-size: 0.98rem;

  letter-spacing: 0.015em;
}


.brand-text small {
  margin-top: 3px;

  color: var(--muted);

  font-size: 0.72rem;
}


.secure-badge {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  padding:
    7px 11px;

  color: var(--soft);

  font-size: 0.76rem;
  font-weight: 650;

  background:
    rgba(255, 255, 255, 0.025);

  border:
    1px solid
    var(--border);

  border-radius: 999px;
}


.secure-icon {
  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  color: var(--night-deep);

  background:
    var(--gold-light);

  border-radius: 50%;

  font-size: 0.7rem;
  font-weight: 900;
}


/* =========================================================
   CONTENU
   ========================================================= */

.login-main {
  width: 100%;

  flex: 1;

  display: grid;
  place-items: center;

  padding:
    clamp(34px, 6vh, 70px)
    22px;
}


.login-layout {
  width: min(100%, 980px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(340px, 0.78fr);

  gap:
    clamp(38px, 6vw, 78px);

  align-items: center;
}


/* =========================================================
   PRÉSENTATION
   ========================================================= */

.welcome-panel {
  position: relative;

  padding:
    clamp(10px, 2vw, 22px);
}


.page-kicker,
.login-kicker {
  display: inline-block;

  color: var(--gold-light);

  font-size: 0.72rem;
  font-weight: 850;

  letter-spacing: 0.18em;
}


.welcome-panel h1 {
  max-width: 650px;

  margin:
    13px
    0
    16px;

  font-size:
    clamp(2.3rem, 5vw, 4.3rem);

  line-height: 0.98;

  letter-spacing: -0.045em;
}


.welcome-panel h1 span {
  display: block;

  color: var(--gold-light);
}


.welcome-text {
  max-width: 620px;

  margin:
    0
    0
    28px;

  color: var(--soft);

  font-size:
    clamp(0.95rem, 1.5vw, 1.08rem);

  line-height: 1.72;
}


.human-message {
  max-width: 600px;

  display: flex;
  align-items: flex-start;

  gap: 15px;

  padding:
    16px 17px;

  background:
    linear-gradient(
      135deg,
      rgba(217, 164, 65, 0.085),
      rgba(255, 255, 255, 0.018)
    );

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-small);
}


.human-heart {
  width: 35px;
  height: 35px;

  flex: 0 0 35px;

  display: grid;
  place-items: center;

  color: var(--gold-light);

  background:
    rgba(217, 164, 65, 0.1);

  border:
    1px solid
    var(--border);

  border-radius: 50%;

  animation:
    heartAmbient
    5s
    ease-in-out
    infinite;
}


.human-message strong {
  color: var(--white);

  font-size: 0.9rem;
}


.human-message p {
  margin:
    4px
    0
    0;

  color: var(--soft);

  font-size: 0.82rem;

  line-height: 1.55;
}


.trust-points {
  margin-top: 22px;

  display: grid;

  gap: 9px;
}


.trust-point {
  display: flex;
  align-items: center;

  gap: 10px;

  color: var(--soft);

  font-size: 0.8rem;
}


.trust-point span {
  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  display: grid;
  place-items: center;

  color: var(--success);

  background:
    rgba(159, 210, 167, 0.08);

  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 900;
}


.trust-point p {
  margin: 0;
}


/* =========================================================
   CARTE DE CONNEXION
   ========================================================= */

.login-card {
  position: relative;

  padding:
    clamp(24px, 4vw, 34px);

  overflow: hidden;

  background:
    linear-gradient(
      155deg,
      rgba(10, 33, 52, 0.94),
      rgba(3, 14, 24, 0.96)
    );

  border:
    1px solid
    var(--border-strong);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.login-card::before {
  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  top: -90px;
  right: -75px;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(243, 201, 105, 0.14),
      transparent 68%
    );
}


.login-card-heading {
  text-align: center;

  margin-bottom: 25px;
}


.login-icon {
  width: 46px;
  height: 46px;

  margin:
    0
    auto
    13px;

  display: grid;
  place-items: center;

  color: #171006;

  background:
    linear-gradient(
      145deg,
      var(--gold-light),
      var(--gold)
    );

  border-radius: 50%;

  box-shadow:
    0 8px 28px
    rgba(217, 164, 65, 0.18);

  animation:
    heartAmbient
    5s
    ease-in-out
    infinite;
}


.login-card-heading h2 {
  margin:
    8px
    0
    8px;

  font-size:
    clamp(1.45rem, 3vw, 1.85rem);

  line-height: 1.15;
}


.login-card-heading p {
  max-width: 390px;

  margin:
    0
    auto;

  color: var(--muted);

  font-size: 0.8rem;

  line-height: 1.55;
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.field-group {
  margin-bottom: 18px;
}


.field-group label {
  display: block;

  margin-bottom: 7px;

  color: var(--soft);

  font-size: 0.78rem;
  font-weight: 750;
}


.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.input-shell {
  position: relative;

  display: flex;
  align-items: center;
}


.input-icon {
  position: absolute;

  left: 13px;

  z-index: 2;

  color: var(--gold);

  font-size: 0.78rem;
  font-weight: 850;

  pointer-events: none;
}


.input-shell input {
  width: 100%;

  min-height: 47px;

  padding:
    10px
    82px
    10px
    38px;

  color: var(--white);

  background:
    rgba(2, 11, 19, 0.7);

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    var(--radius-small);

  outline: none;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


.input-shell input::placeholder {
  color:
    rgba(216, 214, 208, 0.4);
}


.input-shell input:hover {
  border-color:
    rgba(217, 164, 65, 0.32);
}


.input-shell input:focus {
  background:
    rgba(2, 11, 19, 0.92);

  border-color:
    var(--gold);

  box-shadow:
    0 0 0 3px
    rgba(217, 164, 65, 0.09);
}


.field-group.has-error
.input-shell input {
  border-color:
    rgba(215, 123, 123, 0.78);

  box-shadow:
    0 0 0 3px
    rgba(215, 123, 123, 0.07);
}


.password-toggle {
  position: absolute;

  right: 8px;

  padding:
    7px 8px;

  color: var(--gold-light);

  background: transparent;

  border-radius: 7px;

  cursor: pointer;

  font-size: 0.69rem;
  font-weight: 750;

  transition:
    background 180ms ease,
    color 180ms ease;
}


.password-toggle:hover {
  color: var(--white);

  background:
    rgba(217, 164, 65, 0.08);
}


.field-error {
  min-height: 16px;

  margin:
    5px
    0
    0;

  color: var(--danger);

  font-size: 0.7rem;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.login-message {
  margin:
    3px
    0
    16px;

  padding:
    11px 12px;

  color: var(--soft);

  background:
    rgba(255, 255, 255, 0.025);

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius:
    var(--radius-small);

  font-size: 0.76rem;

  line-height: 1.45;
}


.login-message.is-error {
  color: #f0b0b0;

  background:
    rgba(201, 104, 104, 0.07);

  border-color:
    rgba(201, 104, 104, 0.28);
}


.login-message.is-success {
  color: var(--success);

  background:
    rgba(159, 210, 167, 0.06);

  border-color:
    rgba(159, 210, 167, 0.24);
}


/* =========================================================
   BOUTON
   ========================================================= */

.login-button {
  width: 100%;

  min-height: 49px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    11px
    18px;

  color: #171006;

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--gold)
    );

  border-radius:
    var(--radius-small);

  cursor: pointer;

  font-weight: 850;

  box-shadow:
    0 9px 28px
    rgba(217, 164, 65, 0.14);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}


.login-button:hover:not(:disabled) {
  transform:
    translateY(-2px);

  box-shadow:
    0 13px 34px
    rgba(217, 164, 65, 0.2);

  filter:
    brightness(1.04);
}


.login-button:active:not(:disabled) {
  transform:
    translateY(0);
}


.login-button:disabled {
  cursor: wait;

  opacity: 0.62;
}


.button-arrow {
  transition:
    transform 180ms ease;
}


.login-button:hover:not(:disabled)
.button-arrow {
  transform:
    translateX(4px);
}


/* =========================================================
   INSCRIPTION
   ========================================================= */

.login-separator {
  margin:
    22px
    0
    14px;

  display: grid;
  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  gap: 10px;
}


.login-separator span {
  height: 1px;

  background:
    rgba(255, 255, 255, 0.08);
}


.login-separator p {
  margin: 0;

  color: var(--muted);

  font-size: 0.69rem;
}


.register-link {
  min-height: 43px;

  display: grid;
  place-items: center;

  padding:
    9px
    15px;

  color: var(--gold-light);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-small);

  font-size: 0.78rem;
  font-weight: 750;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}


.register-link:hover {
  background:
    rgba(217, 164, 65, 0.055);

  border-color:
    var(--border-strong);

  transform:
    translateY(-1px);
}


.security-note {
  margin:
    17px
    0
    0;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  color: var(--muted);

  font-size: 0.67rem;
}


.security-note span {
  color: var(--success);
}


/* =========================================================
   PIED DE PAGE
   ========================================================= */

.footer {
  padding:
    15px
    20px;

  text-align: center;

  color: var(--muted);

  border-top:
    1px solid
    rgba(217, 164, 65, 0.11);

  font-size: 0.69rem;
}


.footer p {
  margin: 0;
}


.footer span {
  margin:
    0
    6px;

  color: var(--gold);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes heartAmbient {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.045);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

  .login-main {
    padding:
      30px
      18px;
  }


  .login-layout {
    width:
      min(100%, 520px);

    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .welcome-panel {
    text-align: center;
  }


  .welcome-text,
  .human-message {
    margin-left: auto;
    margin-right: auto;
  }


  .trust-points {
    width: fit-content;

    margin-left: auto;
    margin-right: auto;

    text-align: left;
  }

}


@media (max-width: 520px) {

  .topbar {
    padding:
      9px
      15px;
  }


  .secure-badge span:last-child {
    display: none;
  }


  .secure-badge {
    padding: 5px;
  }


  .brand-text small {
    display: none;
  }


  .welcome-panel h1 {
    font-size:
      clamp(2.05rem, 12vw, 3rem);
  }


  .login-card {
    padding:
      23px
      18px;
  }


  .input-shell input {
    font-size: 0.88rem;
  }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}