/* =========================================================
   LOGIN.CSS — STYLE "PHOTO / JOURNAL" (isolé MH AUTH)
   - full mobile perfect
   - fond animé grille/carrés qui défile derrière
   - carte “papier” + traits journal
   ========================================================= */

:root{
  --mh-bg:#f6f3ea;
  --mh-bg2:#fbf8f1;
  --mh-ink:#121212;
  --mh-muted:#5a5a5a;

  --mh-rule:#1c1c1c;
  --mh-rule-soft: rgba(0,0,0,.18);

  --mh-card:#fffdf7;
  --mh-card2:#fffaf0;

  --mh-radius:16px;
  --mh-radius2:22px;

  --mh-shadow: 0 16px 40px rgba(0,0,0,.10);
  --mh-shadow2: 0 10px 24px rgba(0,0,0,.08);

  --mh-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --mh-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --mh-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
a{color:inherit}

/* =========================================================
   PAGE BACKGROUND + ANIM
   ========================================================= */
.mh-auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  color: var(--mh-ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(1000px 700px at 110% 0%, rgba(0,0,0,.05), transparent 60%),
    linear-gradient(180deg, var(--mh-bg), var(--mh-bg2));
  position:relative;
  overflow:hidden;
}

/* grille carrés */
.mh-auth::before{
  content:"";
  position:absolute;
  inset:-140px;
  z-index:0;
  pointer-events:none;
  opacity:.22;

  background:
    linear-gradient(to right, rgba(0,0,0,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px;

  animation: mhAuthGrid 14s linear infinite;
}

/* blocs/pixels */
.mh-auth::after{
  content:"";
  position:absolute;
  inset:-180px;
  z-index:0;
  pointer-events:none;
  opacity:.12;
  filter: blur(.25px);

  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.18) 0 2px, transparent 2px 38px);
  background-size: 260px 260px, 320px 320px;

  animation: mhAuthBlocks 10s linear infinite;
}

@keyframes mhAuthGrid{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: 180px 180px, 180px 180px; }
}
@keyframes mhAuthBlocks{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: -260px 260px, 320px -320px; }
}

@media (prefers-reduced-motion: reduce){
  .mh-auth::before,.mh-auth::after{animation:none!important}
}

/* =========================================================
   WRAP
   ========================================================= */
.mh-auth__wrap{
  width: min(520px, 100%);
  position:relative;
  z-index:1;
}

/* =========================================================
   CARD (journal)
   ========================================================= */
.mh-auth__card{
  border: 2px solid var(--mh-rule);
  border-radius: var(--mh-radius2);
  background: linear-gradient(180deg, var(--mh-card), var(--mh-card2));
  box-shadow: var(--mh-shadow);
  padding: 18px;
  position:relative;
  overflow:hidden;
}

/* double cadre interne */
.mh-auth__card::before{
  content:"";
  position:absolute;
  inset:10px;
  border: 1px dashed rgba(0,0,0,.20);
  border-radius: calc(var(--mh-radius2) - 10px);
  pointer-events:none;
}

.mh-auth__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--mh-rule);
  background: rgba(255,255,255,.65);
  color: var(--mh-ink);
  font: 800 12px/1 var(--mh-mono);
  letter-spacing:.22em;
  text-transform: uppercase;
  position:relative;
  z-index:1;
}

.mh-auth__title{
  margin: 12px 0 6px;
  font: 900 32px/1.05 var(--mh-serif);
  letter-spacing:.2px;
  position:relative;
  z-index:1;
}

.mh-auth__muted{
  margin: 0 0 10px;
  color: var(--mh-muted);
  font: 500 14px/1.5 var(--mh-sans);
  position:relative;
  z-index:1;
}

/* =========================================================
   ALERT
   ========================================================= */
.mh-auth__alert{
  margin: 12px 0 10px;
  border: 2px solid rgba(0,0,0,.55);
  border-radius: 14px;
  background: rgba(0,0,0,.06);
  padding: 10px 12px;
  font: 700 12px/1.4 var(--mh-mono);
  letter-spacing:.08em;
  text-transform: uppercase;
  position:relative;
  z-index:1;
}

/* =========================================================
   FORM
   ========================================================= */
.mh-auth__form{ position:relative; z-index:1; }

.mh-auth__label{
  display:block;
  margin: 14px 0 8px;
  color: var(--mh-muted);
  font: 800 12px/1 var(--mh-mono);
  letter-spacing:.16em;
  text-transform: uppercase;
}

.mh-auth__input{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 2px solid var(--mh-rule);
  background: rgba(255,255,255,.72);
  color: var(--mh-ink);
  outline:none;

  font: 600 14px/1.2 var(--mh-sans);
  box-shadow: var(--mh-shadow2);
}

.mh-auth__input::placeholder{
  color: rgba(90,90,90,.85);
}

.mh-auth__input:focus{
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10), var(--mh-shadow2);
}

/* =========================================================
   ACTIONS + BUTTONS
   ========================================================= */
.mh-auth__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.mh-auth__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 12px 14px;
  border-radius: 999px;
  border: 2px solid var(--mh-rule);
  background: rgba(255,255,255,.70);
  color: var(--mh-ink);
  text-decoration:none;

  font: 900 12px/1 var(--mh-mono);
  letter-spacing:.18em;
  text-transform: uppercase;

  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
  cursor:pointer;
  user-select:none;
}

.mh-auth__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
}

.mh-auth__btn:active{ transform: translateY(0); }

.mh-auth__btn--primary{
  background: rgba(0,0,0,.88);
  color:#fff;
}
.mh-auth__btn--primary:hover{
  background: rgba(0,0,0,.96);
}

.mh-auth__btn--ghost{
  background: rgba(255,255,255,.55);
}

/* =========================================================
   MOBILE PERF (thumb-friendly)
   ========================================================= */
@media (max-width: 420px){
  .mh-auth{ padding: 14px; }
  .mh-auth__card{ padding: 16px; }
  .mh-auth__title{ font-size: 28px; }
  .mh-auth__actions{ flex-direction: column; }
  .mh-auth__btn{ width: 100%; justify-content:center; }
}

/* print */
@media print{
  .mh-auth::before,.mh-auth::after{display:none!important}
  .mh-auth{ background:#fff !important; }
  .mh-auth__card{ box-shadow:none !important; }
}