/* Responsive — desktop inchangé (styles de base au-dessus de 1024px) */

@media (max-width: 1024px) {
  /* Header (toutes les pages) — flex plutôt que grid, pour un espacement
     resserré et cohérent entre les liens (évite les grandes cases
     text-align:right vides du système en colonnes) */
  .header {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 12px;
    padding-right: 12px;
    gap: 16px;
    min-height: 44px;
    height: auto;
    box-sizing: border-box;
  }

  .yaw {
    margin-left: 0;
    margin-right: auto;
    font-size: 11px;
  }

  .h1,
  .h2,
  .h3 {
    grid-column: auto;
    text-align: left;
    font-size: 10px;
  }

  /* ===== INDEX — mobile/tablette : grille directe, pas de carrousel ===== */
  body.is-compact-home .s1p1,
  body.is-compact-home .projects-carousel {
    display: none !important;
  }

  body.is-compact-home #uno {
    height: auto;
    min-height: auto;
    align-items: stretch;
  }

  /* Explore cards — marges, images et titres alignés sur us1 */
  body.is-compact-home {
    --explore-gutter: 12px;
    --explore-gap: 10px;
  }

  body.is-compact-home #uno .sec1 {
    display: block;
    min-height: auto;
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--explore-gutter) 0;
    gap: 0;
  }

  body.is-compact-home .s1h1 {
    display: flex;
    align-items: flex-end;
    min-height: 50svh;
    margin: 0;
    padding: 0 0 16px;
  }

  body.is-compact-home .sec-liste,
  body.is-compact-home .sec-liste.is-settled {
    opacity: 1;
    transform: none;
    transition: none;
    min-height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--explore-gap) var(--explore-gutter) 0;
    align-items: stretch;
    justify-content: flex-start;
  }

  body.is-compact-home .sec-liste-compact {
    padding-bottom: 24px;
    padding-right: var(--explore-gutter);
  }

  body.is-compact-home section {
    min-height: auto;
    height: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.is-compact-home .sec2,
  body.is-compact-home .sec3 {
    height: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: var(--explore-gap);
    box-sizing: border-box;
  }

  body.is-compact-home .us1,
  body.is-compact-home .us2,
  body.is-compact-home .us3,
  body.is-compact-home .us4,
  body.is-compact-home .us5,
  body.is-compact-home .us6 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    margin: 0;
    box-sizing: border-box;
    contain: none;
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  body.is-compact-home .us1 {
    transform: none;
  }

  body.is-compact-home .us1.is-shown {
    transform: none;
  }

  body.is-compact-home .im1gr,
  body.is-compact-home .s2im1,
  body.is-compact-home .s2im2,
  body.is-compact-home .s2im3,
  body.is-compact-home .s3im1,
  body.is-compact-home .s3im2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  body.is-compact-home .us1p1,
  body.is-compact-home .us2p2,
  body.is-compact-home .us3p3,
  body.is-compact-home .us4p4,
  body.is-compact-home .us5p5,
  body.is-compact-home .us6p6 {
    position: absolute;
    bottom: 0;
    left: 0;
    top: auto;
    z-index: 2;
    margin: 0;
    padding: 14px 16px;
    font-family: 'Impact', sans-serif;
    color: white;
    text-transform: uppercase;
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
  }

  body.is-compact-home .gr.is-shown {
    opacity: 1;
  }

  /* Pas d'effet hover grayscale sur mobile/tablette */
  body.is-exploring .gr.is-shown,
  body.is-exploring:has(.gr.is-shown:hover) .gr.is-shown,
  body.is-exploring .gr.is-shown:hover {
    filter: none !important;
    transition: none;
  }

  /* ===== INDEX (desktop-like tablet fallback) ===== */
  section {
    height: auto;
    min-height: 100vh;
    contain-intrinsic-size: auto;
  }

  .sec1 {
    height: auto;
    min-height: 100vh;
    width: 100%;
    padding: calc(5vh + 8px) 12px 24px;
    box-sizing: border-box;
    grid-template-rows: auto;
    gap: 12px;
  }

  .s1h1 {
    grid-column: 1 / -1;
    grid-row: auto;
    font-size: clamp(2.5rem, 14vw, 5rem);
  }

  .s1p1 {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-left: 0;
    justify-content: flex-start;
    margin-top: 4px;
  }

  .projects-carousel {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 40vh;
    padding: 8px 0;
  }

  .project-card {
    flex: 0 0 72vw;
    height: 36vh;
  }

  /* Mode EXPLORE (desktop toggle — conservé pour >1024px) */
  .sec-liste,
  .sec-liste.is-settled {
    height: auto;
    min-height: auto;
    contain-intrinsic-size: auto;
    padding: 12px 0 24px;
  }

  .sec-liste-compact {
    height: auto;
    min-height: auto;
  }

  .sec2,
  .sec3 {
    height: auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  .us1,
  .us2,
  .us3,
  .us4,
  .us5,
  .us6 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 52vw;
    contain: none;
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .us1 {
    min-height: 58vw;
    transform: none;
  }

  .us1.is-shown {
    transform: none;
  }

  .us1p1,
  .us2p2,
  .us3p3,
  .us4p4,
  .us5p5,
  .us6p6 {
    font-size: clamp(1.1rem, 5.5vw, 1.75rem);
    padding: 8px 12px;
  }

  /* ===== PAGES PROJET ===== */
  section.sec1 {
    height: auto;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
  }

  .sec11 {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
    padding: calc(5vh + 12px) 16px 32px;
    overflow: visible;
    box-sizing: border-box;
  }

  .left,
  .right {
    grid-template-rows: auto;
  }

  .left {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .lh1 {
    grid-column: 1;
    grid-row: auto;
    font-size: clamp(1.75rem, 9vw, 3rem);
    line-height: 0.95;
  }

  .lp2 {
    grid-column: 1;
    grid-row: auto;
    font-size: 11px;
    line-height: 1.55;
  }

  .lp3 {
    grid-column: 1;
    grid-row: auto;
    align-items: flex-start;
    margin-top: 4px;
  }

  .right {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    overflow: visible;
  }

  .r2 {
    transform: none !important;
  }

  .pair {
    flex-direction: column;
    gap: 12px;
  }

  .i2,
  .i3,
  .i5,
  .i6,
  .ni {
    width: 100%;
  }

  /* ===== ABOUT ===== */
  .sec1:has(.sec1p2) {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: calc(5vh + 12px) 16px 48px;
    height: auto;
    width: 100%;
    box-sizing: border-box;
  }

  .sec1p2 {
    grid-column: unset;
    grid-row: unset;
    font-size: clamp(2.25rem, 13vw, 4.5rem);
    line-height: 0.9;
    margin-bottom: 32px;
  }

  .sec1p1,
  .sec1p3,
  .sec1p4 {
    grid-column: unset;
    grid-row: unset;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 11px;
    line-height: 1.6;
    max-width: 640px;
  }

  .sec1p4 {
    margin-bottom: 0;
  }

  /* Les <br> du HTML sont calés sur l'étroite colonne desktop :
     on les neutralise pour laisser le texte se réajuster sur toute la largeur */
  .sec1p1 br,
  .sec1p3 br,
  .sec1p4 br {
    display: none;
  }

  /* ===== PROJECT gallery ===== */
  .pj-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Tablette : le bloc titre garde sa taille de contenu (pas 50svh) pour que
   us1 remonte et vienne se poser en bas du premier écran au lieu d'être
   repoussé hors du cadre */
@media (min-width: 769px) and (max-width: 1024px) {
  body.is-compact-home .s1h1 {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .header {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.is-compact-home {
    --explore-gutter: 10px;
    --explore-gap: 10px;
  }

  body.is-compact-home .us1p1,
  body.is-compact-home .us2p2,
  body.is-compact-home .us3p3,
  body.is-compact-home .us4p4,
  body.is-compact-home .us5p5,
  body.is-compact-home .us6p6 {
    font-size: clamp(1.6rem, 9vw, 2.25rem);
    padding: 12px 14px;
  }

  .sec11 {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 480px) {
  .header {
    font-size: 10px;
    gap: 10px;
  }

  .project-card {
    flex: 0 0 88vw;
    height: 28vh;
  }

  .pj-grid {
    column-count: 1;
  }
}