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

/* ─── Scrollbar ─────────────────────────────────────── */
.all::-webkit-scrollbar { display: none; }
.all {
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-color: #F3F3F3;
  overflow-x: hidden;
}
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 */
}

/* ─── Header ─────────────────────────────────────────── */
header {
  width: 98.8vw;
  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 p { margin-bottom: 0.7vh; }
header a { margin-bottom: 0.7vh; color: grey; }
header a:hover { color: black; }

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

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

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

.archives { color: grey; }
.works { color: black; }
span { color: #9E9E9E; }

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

/* ─── Section / Layout ───────────────────────────────── */
section {
  height: 95.2vh;
  height: calc(var(--vh, 1vh) * 95.2);
  width: 98.7vw;
  margin-left: 0.6vw;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(1, 1fr);
  column-gap: 1vh;
  margin-top: 3.5vh;
  background-color: #F3F3F3;
}

/* ─── Left box ───────────────────────────────────────── */
.leftbox {
  grid-column-start: 1;
  grid-column-end: 4;
  margin-bottom: 1vh;
  display: grid;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: -0.03vw;
  font-size: 1.4vh;
  text-transform: uppercase;
  position: fixed;
  text-align-last: justify;
  height: 95.8vh;
  width: 24.3vw;
}

.texttop {
  text-align: justify;
  width: 100%;
}

.textbot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.webb { color: grey; }
.web:hover { color: grey; }

/* ─── Right box ──────────────────────────────────────── */
.rightbox {
  grid-column-start: 5;
  grid-column-end: 13;
}

.imagetop {
  max-width: 100%;
  height: auto;
}
.imagetop img,
.imagetop video {
  display: flex;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.imagedeux {
  width: 100%;
  display: flex;
}

.imagedeuxdeux {
  width: 100%;
  display: flex;
  margin-top: 1vh;
}

.imagedeux img {
  object-fit: cover;
  width: 49.6%;
}
.imagedeuxdeux img {
  object-fit: cover;
  width: 49.6%;
}
.imagedeux video {
  object-fit: cover;
  width: 49.6%;
}

.img3 { margin-left: 1vh; }
.img4 { width: 100%; margin-top: 1vh; }
.img5 { width: 100%; margin-top: 0.5vh; margin-bottom: 0.5vh; }

/* ─── Fade-in ────────────────────────────────────────── */
main {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ══════════════════════════════════════════════════════
   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 2vw;
      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; }
  
    /* ── Section ── */
    section {
      display: flex;
      flex-direction: column;
      width: 96vw;
      margin-left: 2vw;
      margin-top: 4.5vh;
      height: auto;
      padding: 0;
      gap: 1.5vh;
    }
  
    /* ── Left box ── */
    .leftbox {
      position: static;
      width: 100%;
      height: auto;
      font-size: 1.6vw;
      text-transform: uppercase;
      text-align-last: auto;
      padding: 1.5vw 0;
      box-sizing: border-box;
    }
  
    .texttop {
      width: 100%;
      display: block;
      text-align: left;
    }
  
    .texttop p { white-space: normal; }
  
    .textbot {
      width: 100%;
      margin-top: 1.5vh;
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-end;
    }
  
   /* ── Right box ── */
.rightbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  padding-bottom: 2vh;
  box-sizing: border-box;
}

.imagetop {
  width: 100%;
  /* PAS de height fixe */
}

.imagetop img,
.imagetop video {
  width: 100%;
  height: auto;   /* ← ratio naturel de l'image */
  object-fit: cover;
  display: block;
}

/* Paires : côte à côte sur tablet */
.imagedeux,
.imagedeuxdeux {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1.5vh;
}

.imagedeux img,
.imagedeux video,
.imagedeuxdeux img {
  width: 49.5%;
  height: auto;   /* ← ratio naturel de l'image */
  object-fit: cover;
}

.img3 { margin-left: 0; }
.img4 { width: 100%; margin-top: 0; }
.img5 { margin-top: 0; margin-bottom: 0; }
  }

/* ══════════════════════════════════════════════════════
   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; }

  /* ── Section ── */
  section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    margin-top: 3.4vh;
    height: auto;
    padding: 0;
    gap: 0;
  }

  /* ── Left box ── */
  .leftbox {
    position: static;
    width: 100%;
    height: auto;
    font-size: 2.4vw;
    text-transform: uppercase;
    text-align-last: auto;
    padding: 2vw;
    box-sizing: border-box;
  }

  .texttop { width: 100%; display: block; }
  .texttop p { white-space: normal; }

  .textbot {
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end;
  }

  .web { display: none; }

  /* ── Right box ── */
  .rightbox {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    padding: 0 2vw 2vw;
    box-sizing: border-box;
  }

  .imagetop { width: 100%; }

  .imagetop img,
  .imagetop video {
    width: 100%;
    object-fit: cover;
    display: block;
  }

  /* Paires : colonne sur mobile */
  .imagedeux,
  .imagedeuxdeux {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    gap: 1vh;
  }

  .imagedeux img,
  .imagedeux video,
  .imagedeuxdeux img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .img3 { margin-left: 0; }
  .img4 { width: 100%; margin-top: 0; }
  .img5 { margin-top: 0; margin-bottom: 0; }

  /* ── Animation montée ── */
  .imagetop,
  .imagedeux,
  .imagedeuxdeux {
    opacity: 0;
    transform: translateY(40px);
    animation: cardRise 0.6s ease forwards;
  }

  .imagetop          { animation-delay: 0.1s; }
  .imagedeuxdeux     { animation-delay: 0.2s; }
  .imagedeux         { animation-delay: 0.3s; }

  @keyframes cardRise {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}