/* ========================================================================== 
   V27 — regular living project grid and scoped responsive fixes.
   This layer is intentionally loaded last so the v24 site remains the stable
   foundation and every change below stays easy to remove or compare.
   ========================================================================== */

/* ---------- Living editorial wall ---------- */
.living-wall-host{
  width:100%;
  margin-top:28px;
}

.wall-toolbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 0 clamp(28px,4vw,58px);
  padding:16px 0;
  border-top:1px solid var(--fg);
  border-bottom:1px solid var(--fg);
}
.wall-filters{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.wall-filter{
  appearance:none;
  border:1px solid transparent;
  border-radius:0;
  padding:8px 11px;
  color:var(--fg);
  background:transparent;
  font-family:'Space Mono',monospace;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.wall-filter:hover,.wall-filter:focus-visible{border-color:var(--fg);outline:none;}
.wall-filter.is-active{color:var(--bg);background:var(--fg);border-color:var(--fg);}
.wall-count{flex:0 0 auto;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;}
.wall-count b{font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:-.04em;margin-right:5px;}

.living-wall{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(12px,1.5vw,24px);
  padding:0 0 clamp(40px,6vw,90px);
}

.wall-item{
  margin:0;
  min-width:0;
  min-height:0;
  aspect-ratio:16/11;
  opacity:1;
  transition:opacity .5s cubic-bezier(.16,.8,.3,1),filter .5s cubic-bezier(.16,.8,.3,1),transform .5s cubic-bezier(.16,.8,.3,1);
}
.wall-item[hidden]{display:none !important;}
.living-wall.is-reflowing .wall-item{opacity:.18;transform:translateY(12px);}
.wall-card{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  width:100%;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.wall-media{
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  height:100%;
  margin:0;
  overflow:hidden;
  background:rgba(127,127,127,.08);
}
.wall-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .25s ease;
}
.wall-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:grayscale(1) contrast(1.04);
  transform:scale(1.001);
  transform-origin:center;
  transition:filter .55s cubic-bezier(.16,.8,.3,1),transform .75s cubic-bezier(.16,.8,.3,1);
}
.wall-media-index{
  position:absolute;
  z-index:3;
  top:10px;
  left:10px;
  color:#fff;
  mix-blend-mode:difference;
  font-family:'Space Mono',monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
}
.wall-badges{position:absolute;z-index:3;right:10px;bottom:10px;display:flex;gap:5px;}
.wall-badge{padding:5px 7px;color:#fff;background:#000;font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.08em;line-height:1;}
.wall-caption{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"index title open" ". meta open";
  column-gap:12px;
  row-gap:7px;
  align-items:start;
  padding:13px 0 0;
  color:#fff;
  border-top:1px solid currentColor;
  mix-blend-mode:difference;
}
.wall-caption > *{color:inherit;mix-blend-mode:normal;}
.wall-project-index{grid-area:index;padding-top:4px;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.08em;}
.wall-title{grid-area:title;margin:0;font-family:'Archivo Black',sans-serif;font-size:clamp(19px,2.15vw,37px);line-height:.86;letter-spacing:-.055em;text-transform:uppercase;overflow-wrap:anywhere;}
.wall-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:5px 8px;margin:0;font-family:'Space Mono',monospace;font-size:8px;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;opacity:.72;}
.wall-open{grid-area:open;align-self:center;font-family:'Space Mono',monospace;font-size:18px;line-height:1;transition:transform .3s ease;}

@media (hover:hover){
  .living-wall:has(.wall-item:hover) .wall-item:not(:hover){opacity:.34;filter:blur(1.7px) grayscale(1);}
  .wall-card:hover .wall-media img{filter:grayscale(0) contrast(1);transform:scale(1.018);}
  .wall-card:hover .wall-media::after{border-color:#fff;mix-blend-mode:difference;}
  .wall-card:hover .wall-open{transform:translate(4px,-4px);}
}

/* ---------- Requested mobile-only corrections ---------- */
@media (max-width:1023px){
  .wall-toolbar{align-items:flex-start;margin-bottom:44px;padding:12px 0;}
  .wall-filters{flex-wrap:nowrap;max-width:calc(100vw - 88px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;}
  .wall-filters::-webkit-scrollbar{display:none;}
  .wall-filter{flex:0 0 auto;padding:8px 9px;}
  .wall-count{padding-top:5px;}
  .living-wall{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .wall-title{font-size:clamp(15px,4.8vw,24px);}
  .wall-caption{grid-template-columns:auto 1fr auto;column-gap:7px;padding-top:10px;}
  .wall-meta{font-size:7px;gap:3px 5px;}
  /* Explicitly coloured fixed controls on mobile. They no longer depend on
     difference blending; every other button keeps the v24 behaviour. */
  html:not([data-theme="light"]) body #to-contact.to-contact,
  html:not([data-theme="light"]) body #back-to-top.back-to-top{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    background:#050506 !important;
    border-color:#fff !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
  }
  html:not([data-theme="light"]) body #to-contact.to-contact svg{
    color:#fff !important;
    stroke:#fff !important;
  }
  html[data-theme="light"] body #to-contact.to-contact,
  html[data-theme="light"] body #back-to-top.back-to-top{
    color:#09090a !important;
    -webkit-text-fill-color:#09090a !important;
    background:#fff !important;
    border-color:#09090a !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
  }
  html[data-theme="light"] body #to-contact.to-contact svg{
    color:#09090a !important;
    stroke:#09090a !important;
  }

  /* Sketchbook stays on one line and now retains a real side gutter on the
     narrowest phones. */
  #view-detail .detail-hero.detail-hero-sketchbook + .detail-hero-copy-below h1{
    max-width:100% !important;
    font-size:clamp(36px,10.8vw,62px) !important;
    line-height:.84 !important;
    letter-spacing:-.065em !important;
    white-space:nowrap;
  }

  /* Legal and privacy panels use the available dynamic viewport instead of
     enforcing the desktop square. The panel is the only scroll surface, so
     the close button and the final paragraph always remain reachable. */
  body .legal-modal.open{
    display:flex !important;
    align-items:stretch;
    justify-content:stretch;
    padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));
    box-sizing:border-box;
    overflow:hidden;
  }
  body .legal-modal .legal-box{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))) !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:52px 22px 28px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
  }
  body :is(#legal-modal,#privacy-modal) .legal-content{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }
  body .legal-modal .legal-close{position:sticky !important;float:right;top:0 !important;right:0 !important;margin:-37px -8px 4px 0;z-index:2;}
}

@media (max-width:767px){
  .living-wall{grid-template-columns:minmax(0,1fr);gap:20px;}
  .wall-item{aspect-ratio:4/3;}
  .wall-media img{filter:grayscale(0) contrast(1);}
}

@media (max-width:520px){
  .wall-toolbar{gap:10px;}
  .wall-count{font-size:0;}
  .wall-count b{font-size:16px;margin:0;}
  .living-wall{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .wall-caption{grid-template-columns:1fr auto;grid-template-areas:"title open" "meta meta";}
  .wall-project-index{display:none;}
  .wall-title{font-size:clamp(16px,5.1vw,23px);}
  .wall-open{font-size:15px;}
  .wall-media-index{top:7px;left:7px;font-size:7px;}
  .wall-badges{right:7px;bottom:7px;}
  .wall-badge{padding:4px 5px;font-size:6px;}
}

@media (prefers-reduced-motion:reduce){
  .living-wall,
  .living-wall *{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
  }
}

/* ===== v30 — "Autres explorations" : filtres + compteur = blanc en nuit / noir en jour ===== */
/* scope #view-home pour battre la règle globale '#view-home *{color:#fff}' */
#view-home .wall-filter,#view-home .wall-count,#view-home .wall-count b{mix-blend-mode:normal !important;color:#fff !important;background:transparent !important;}
[data-theme="light"] #view-home .wall-filter,[data-theme="light"] #view-home .wall-count,[data-theme="light"] #view-home .wall-count b{color:#0d0d0f !important;}
#view-home .wall-filter.is-active{color:var(--bg) !important;background:var(--fg) !important;border-color:var(--fg) !important;}
#view-home .wall-filter:hover,#view-home .wall-filter:focus-visible{border-color:currentColor !important;}