* { margin: 0; box-sizing: border-box; }

/* ─── Scrollbar ─────────────────────────────────────── */
.all::-webkit-scrollbar { display: none; }
.all {
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: #F3F3F3;
}
html, body {
  overflow: auto !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none !important; }


/* none = stoppe tout | contain = stoppe la propagation mais garde les animations locales */
html {
  overscroll-behavior-x: none; /* uniquement horizontal */
}

/* ─── Fade-in ────────────────────────────────────────── */
main {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Header ─────────────────────────────────────────── */
header {
  width: 98.7vw;
  height: 3vh;
  margin-left: 0.6vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: -0.04vw;
  font-size: 1.4vh;
  z-index: 99;
  position: fixed;
  top: 0;
  background-color: #F3F3F3;
  text-align: center;
}
header a:hover { color: black; }
header p, header a { margin-bottom: 0.7vh; }

.boxmenu {
  width: 10vw;
  justify-content: space-between;
  display: flex;
}

.wink { text-decoration: none; color: black; }
.archives { color: black; }
.works { color: grey; }

.mail { animation: blink 1s steps(1, end) infinite; }
@keyframes blink {
  0%, 100% { color: black; }
  50%       { color: #B7FF00; }
}

/* ─── Links ──────────────────────────────────────────── */
a { text-decoration: none; color: inherit; }

/* ─── Galerie masonry ────────────────────────────────── */
section {
  width: 98vw;
  margin-left: 1vw;
  margin-top: 4vh;
  background-color: #F3F3F3;
  columns: 4 280px;
  column-gap: 16px;
}

section img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 16px;
  break-inside: avoid;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

section video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 16px;
  break-inside: avoid;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Neutralise les anciens wrappers */
.row, .row2 { display: contents; }
.row div, .row2 div { width: auto; height: auto; background: transparent; }
div img { height: auto; width: 100%; object-fit: contain; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Tablet  (769px – 1024px)
   ══════════════════════════════════════════════════════ */
   @media (min-width: 769px) and (max-width: 1024px) {

    body {
      background: #F3F3F3;
      display: block;
      height: auto;
      margin: 0;
    }
  
    /* ── Header ── */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      margin: 0;
      padding: 0.8vh 1.5vw;
      height: auto;
      font-size: 1.6vw;
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: flex-end !important;
      z-index: 100;
      box-sizing: border-box;
    }
  
    .boxmenu {
      display: flex !important;
      flex-direction: row !important;
      gap: 1.5vw;
      flex-shrink: 0;
      white-space: nowrap;
      width: auto;
    }
  
    .wink { flex-shrink: 0; }
  
    /* ── Galerie ── */
    section {
      columns: 3 200px;
      column-gap: 12px;
      padding: 12px;
      margin-top: 4.5vh;
      width: 100%;
      margin-left: 0;
    }
  
    section img,
    section video {
      margin: 0 0 12px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    }
  }
/* ══════════════════════════════════════════════════════
   RESPONSIVE — Mobile  (≤ 768px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  body {
    background: #F3F3F3;
    display: block;
    height: auto;
    margin: 0;
  }

  /* ── Header ── */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0.6vh 2vw;
    padding-right: 21vw;
    height: auto;
    font-size: 2.4vw;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    z-index: 100;
    box-sizing: border-box;
    overflow: visible;
  }

  .boxmenu {
    display: flex !important;
    flex-direction: row !important;
    gap: 2vw;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .wink { flex-shrink: 0; }

  /* ── Galerie : 2 colonnes sur mobile ── */
  section {
    columns: 2;
    column-gap: 8px;
    padding: 8px;
    margin-top: 3.4vh;
    width: 100%;
    margin-left: 0;
  }

  section img,
  section video {
    margin: 0 0 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
}