* { 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; }

/* ─── 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;
  margin-top: 1vh;
}
.imagedeux img { object-fit: cover; width: 49.6%; }
.imagedeux video { object-fit: cover; width: 49.6%; margin-left: 1vh; }

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

.imagequatre { width: 100%; margin-top: 0.8vh; }
.imagetrois  { width: 100%; margin-top: 0.8vh; }

/* ─── 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 1.5vw; /* ← même valeur que le padding côté page */
      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: 100%;
      margin: 0;
      margin-top: 3.8vh;
      height: auto;
      padding: 0;
      gap: 0; /* gap géré par rightbox */
    }
  
    /* ── Left box ── */
    .leftbox {
      position: static;
      width: 100%;
      height: auto;
      font-size: 1.6vw;
      text-transform: uppercase;
      text-align-last: auto;
      padding: 1.5vw; /* ← même valeur partout */
      box-sizing: border-box;
    }
  
    .texttop { width: 100%; display: block; text-align: left; }
    .texttop p { white-space: normal; }
  
    .textbot {
      width: 100%;
      margin-top: 2vh;
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-end;
    }
  
    /* ── Right box ── */
    /* padding: 1.5vw = même espace côtés que header et leftbox
       gap: 1.5vw    = même espace entre images que entre image et bord */
    .rightbox {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1.5vw;           /* ← espace entre blocs d'images */
      padding: 0 1.5vw 1.5vw;
      box-sizing: border-box;
    }
  
    /* ── Toutes les images / vidéos ── */
    .imagetop,
    .imagetrois,
    .imagequatre { width: 100%; }
  
    .imagetop img,
    .imagetop video,
    .imagetrois img,
    .imagequatre img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
      margin: 0;
    }
  
    /* Paires côte à côte : gap = même valeur que padding côté page */
    .imagedeux {
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: 1.5vw;           /* ← même que padding côté page */
      margin: 0;
    }
  
    .imagedeux img,
    .imagedeux video {
      width: calc(50% - 0.75vw); /* 50% moins la moitié du gap */
      height: auto;
      object-fit: cover;
      display: block;
      margin: 0;
    }
  
    /* Reset de tous les margin individuels */
    .img3,
    .img4,
    .img5 {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      object-fit: cover;
    }
  
    .imagetrois,
    .imagequatre { margin: 0; }
  
    /* ── Animations ── */
    .imagetop,
    .imagedeux,
    .imagetrois,
    .imagequatre {
      opacity: 0;
      transform: translateY(30px);
      animation: cardRise 0.6s ease forwards;
    }
  
    .imagetop                  { animation-delay: 0.1s; }
    .imagedeux:nth-of-type(2)  { animation-delay: 0.18s; }
    .imagedeux:nth-of-type(3)  { animation-delay: 0.26s; }
    .imagedeux:nth-of-type(4)  { animation-delay: 0.34s; }
    .imagedeux:nth-of-type(5)  { animation-delay: 0.42s; }
    .imagedeux:nth-of-type(6)  { animation-delay: 0.50s; }
    .imagedeux:nth-of-type(7)  { animation-delay: 0.58s; }
    .imagetrois                { animation-delay: 0.66s; }
    .imagequatre:nth-of-type(1){ animation-delay: 0.74s; }
    .imagequatre:nth-of-type(2){ animation-delay: 0.82s; }
  
    @keyframes cardRise {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(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%;
    margin-top: 2vh;
    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%;
    height: auto;
    object-fit: cover;
    display: block;
  }

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

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

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

  .imagetrois {
    width: 100%;
    margin-top: 0;
  }

  .imagetrois img {
    width: 100%;
    height: auto;
    display: block;
  }

  .imagequatre {
    width: 100%;
    margin-top: 0;
  }

  .imagequatre img {
    width: 100%;
    height: auto;
    display: block;
  }

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

  .imagetop                  { animation-delay: 0.1s; }
  .imagedeux:nth-of-type(2)  { animation-delay: 0.18s; }
  .imagedeux:nth-of-type(3)  { animation-delay: 0.26s; flex-direction: row; }
  .imagedeux:nth-of-type(3) img { width: 49.6%; height: auto; }

  .imagequatre img,
  .imagetrois img { width: 100% !important; }
  .imagedeux:nth-of-type(4)  { animation-delay: 0.34s; }
  .imagedeux:nth-of-type(5)  { animation-delay: 0.42s; }
  .imagedeux:nth-of-type(6)  { animation-delay: 0.50s; }
  .imagedeux:nth-of-type(7)  { animation-delay: 0.58s; }
  .imagetrois                { animation-delay: 0.66s; }
  .imagequatre:nth-of-type(1){ animation-delay: 0.74s; }
  .imagequatre:nth-of-type(2){ animation-delay: 0.82s; }

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