/* =========================================================
   FOOTER.CSS — STYLE "PHOTO / JOURNAL" (isolé MH)
   - mobile-first
   - paper look + traits journal
   - fond animé discret (grille/carrés) mais sans casser le contenu
   ========================================================= */

: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,.08);
  --mh-shadow2: 0 10px 24px rgba(0,0,0,.06);

  --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;

  --mh-container: 1100px;
}

/* footer base */
.mh-footer{
  position: relative;
  color: var(--mh-ink);
  margin-top: 26px;
  border-top: 2px solid var(--mh-rule);
  background: linear-gradient(180deg, rgba(246,243,234,.85), rgba(251,248,241,.95));
  overflow: hidden;
}

/* fond animé (derrière) */
.mh-footer::before{
  content:"";
  position:absolute;
  inset:-140px;
  z-index:0;
  pointer-events:none;
  opacity:.16;

  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: 56px 56px, 56px 56px;

  animation: mhFooterGrid 16s linear infinite;
}

.mh-footer::after{
  content:"";
  position:absolute;
  inset:-180px;
  z-index:0;
  pointer-events:none;
  opacity:.10;

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

  animation: mhFooterBlocks 11s linear infinite;
}

@keyframes mhFooterGrid{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: 200px 200px, 200px 200px; }
}
@keyframes mhFooterBlocks{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: -260px 260px, 320px -320px; }
}

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

/* container */
.mh-footer__container{
  max-width: var(--mh-container);
  margin: 0 auto;
  padding: 18px 16px;
  position: relative;
  z-index: 1;
}

/* top inner */
.mh-footer__container{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.mh-footer__left{
  min-width: 0;
}

.mh-footer__logo{
  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 2px solid var(--mh-rule);
  background: rgba(255,255,255,.60);
  box-shadow: var(--mh-shadow2);
  width: fit-content;
}

.mh-footer__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--mh-rule);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  flex: 0 0 auto;
}

.mh-footer__name{
  font: 900 14px/1 var(--mh-serif);
  letter-spacing: .2px;
}

.mh-footer__sub{
  margin-top: 10px;
  color: var(--mh-muted);
  font: 600 12px/1.5 var(--mh-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* right links */
.mh-footer__right{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
  align-items:center;
}

.mh-footer__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 12px;
  border-radius: 999px;
  border: 2px solid var(--mh-rule);
  background: rgba(255,255,255,.55);
  box-shadow: var(--mh-shadow2);

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

  transition: transform .12s ease, background .2s ease, box-shadow .25s ease;
}

.mh-footer__link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.mh-footer__link:active{ transform: translateY(0); }

/* bottom bar */
.mh-footer__bottom{
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--mh-rule-soft);
  background: rgba(255,255,255,.25);
}

.mh-footer__bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;

  font: 600 12px/1.4 var(--mh-mono);
  color: var(--mh-muted);
  letter-spacing: .06em;
}

.mh-footer__mini{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px dashed rgba(0,0,0,.28);
  background: rgba(255,255,255,.55);
  color: var(--mh-ink);
}

/* mobile */
@media (max-width: 900px){
  .mh-footer__container{
    flex-direction: column;
    align-items: stretch;
  }
  .mh-footer__right{
    justify-content:flex-start;
  }
  .mh-footer__bottom-inner{
    flex-direction: column;
    align-items:flex-start;
  }
}

/* extra small */
@media (max-width: 420px){
  .mh-footer__sub{ font-size: 11px; letter-spacing: .08em; }
  .mh-footer__link{ width: 100%; justify-content:flex-start; }
}

/* print */
@media print{
  .mh-footer::before,.mh-footer::after{ display:none !important; }
  .mh-footer{ border-top: 1px solid #000; }
}