/* =========================================================
   MEMORENTIA – GLOBAL STYLES (FINAL, MOBILE-PROOF)
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  --brand-yellow: #dcaa24;
  --brand-yellow-dark: #c3971f;
}

/* ---------- Stop scroll global ---------- */
html {
  height: 100%;
  overscroll-behavior: none; /* empêche le rubber-band iOS */
}

body {
  position: fixed;          /* CRUCIAL */
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;

  overflow: hidden !important; /* le body ne scroll JAMAIS */
  overscroll-behavior: none;
  touch-action: pan-y;

  background-color: #ffffff; /* évite flash blanc iOS */
  color: #212529;
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;

  -webkit-text-size-adjust: 100%;
}

/* ---------- Background fixe réel ---------- */
.app-background {
  position: fixed;
  inset: 0;

  background-image: url("/img/background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  z-index: -2;
  pointer-events: none;

  /* anti-jitter / composition GPU */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* ---------- Overlay lisibilité ---------- */
.bg-overlay {
  position: fixed;
  inset: 0;

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

  z-index: -1;
  pointer-events: none;
}

/* ---------- SEUL conteneur scrollable ---------- */
.app-scroll {
  position: fixed;
  inset: 0;

  /* hauteur stable mobile */
  height: 100svh;
  min-height: 100svh;

  /* fallback */
  height: 100dvh;
  min-height: 100dvh;

  overflow-y: scroll;        /* scroll forcé = plus stable iOS */
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior-x: none;
  overscroll-behavior-y: none;

  touch-action: pan-y;

  transform: translateZ(0);
}

/* ---------- Containers / cartes ---------- */
.glass {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  border-radius: 14px;
}

/* ---------- Textes ---------- */
.muted {
  color: #6c757d;
}

.brand {
  letter-spacing: .4px;
}

/* =========================================================
   BOUTONS – JAUNE MEMORENTIA
   ========================================================= */

.btn-primary {
  background-color: var(--brand-yellow);
  border-color: var(--brand-yellow);
  color: #ffffff;
  font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-yellow-dark);
  border-color: var(--brand-yellow-dark);
  color: #ffffff;
}

.btn-primary:active {
  background-color: #b88f1c;
  border-color: #b88f1c;
  color: #ffffff;
}

/* Boutons outline */
.btn-outline-primary {
  color: var(--brand-yellow);
  border-color: var(--brand-yellow);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand-yellow);
  color: #ffffff;
  border-color: var(--brand-yellow);
}

/* Focus clavier (accessibilité) */
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(220, 170, 36, 0.45);
}

/* Toggle mot de passe – icônes flat */
.password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #6c757d;
}

.password-toggle:hover {
  color: #212529;
}

.icon-eye {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}