/* =========================================================
   portfolio-style.css — page Portfolio : grille en mosaïque fixe
   (8 cases, CSS Grid — plus de Masonry.js). Header et footer de 40px,
   page bloquée à 100svh, sans ascenseur (défilement interne uniquement
   si le nombre de blocs dépasse l'espace disponible).
   Dépend de global.css (variables, header, footer, etc.)
   ========================================================= */

:root{
  --portfolio-chrome-height: 40px; /* hauteur commune du header et du footer sur cette page */
}

/* ---------------------------------------------------------
   La page tient exactement dans le viewport : pas d'ascenseur de
   page. Seule la grille défile en interne si le contenu dépasse.
   --------------------------------------------------------- */
body.page-portfolio{
  height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Prévisualisation connectée : la barre d'admin WordPress pousse la page
   vers le bas et doit être déduite, sinon le bas de la page dépasserait. */
body.page-portfolio.admin-bar{
  height: calc(100svh - 32px);
}



@media screen and (max-width: 782px){
  body.page-portfolio.admin-bar{
    height: calc(100svh - 46px);
  }
  
}



/* En-tête et pied de page : 40px, contenu centré verticalement,
   ne rétrécissent jamais (flex-shrink: 0) */
body.page-portfolio .site-header{
  flex: 0 0 var(--portfolio-chrome-height);
  height: var(--portfolio-chrome-height);
  display: flex;
  align-items: center;
}
body.page-portfolio .site-header .nav{
  width: 100%;
  line-height: normal; /* neutralise le line-height:7svh hérité, sans objet ici */
}
body.page-portfolio .site-footer{
  flex: 0 0 var(--portfolio-chrome-height);
  height: var(--portfolio-chrome-height);
  display: flex;
  align-items: center;
}
body.page-portfolio .site-footer .footer-inner{
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------------------------------------------------------
   Grille — 8 cases fixes (6 colonnes × 6 lignes), occupe exactement
   l'espace restant entre le header et le footer.
   --------------------------------------------------------- */
.portfolio-main{
  flex: 1 1 auto;
  min-height: 0; /* indispensable pour qu'un enfant flex avec overflow se contraigne correctement */
  overflow: auto;

  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
}
.portfolio-main .mosaicBox.mosaic1{ grid-area: 1 / 1 / 5 / 3; }
.portfolio-main .mosaicBox.mosaic2{ grid-area: 1 / 3 / 3 / 5; }
.portfolio-main .mosaicBox.mosaic3{ grid-area: 1 / 5 / 3 / 7; }
.portfolio-main .mosaicBox.mosaic4{ grid-area: 3 / 3 / 5 / 5; }
.portfolio-main .mosaicBox.mosaic5{ grid-area: 3 / 5 / 5 / 7; }
.portfolio-main .mosaicBox.mosaic6{ grid-area: 5 / 1 / 7 / 3; }
.portfolio-main .mosaicBox.mosaic7{ grid-area: 5 / 3 / 7 / 5; }
.portfolio-main .mosaicBox.mosaic8{ grid-area: 5 / 5 / 7 / 7; }




@media (max-width: 900px){
  .portfolio-main{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .portfolio-main .mosaicBox.mosaic1{ grid-area: 1 / 1 / 5 / 2; }
  .portfolio-main .mosaicBox.mosaic2{ grid-area: 1 / 2 / 3 / 3; }
  .portfolio-main .mosaicBox.mosaic3{ grid-area: 3 / 2 / 5 / 3; }
  .portfolio-main .mosaicBox.mosaic4{ grid-area: 5 / 1 / 7 / 2; }
  .portfolio-main .mosaicBox.mosaic5{ grid-area: 5 / 2 / 7 / 3; }
  .portfolio-main .mosaicBox.mosaic6{ grid-area: 7 / 1 / 9 / 2; }
  .portfolio-main .mosaicBox.mosaic7{ grid-area: 7 / 2 / 9 / 3; }
  .portfolio-main .mosaicBox.mosaic8{ display: none; }
  
}

/* ---------------------------------------------------------
   Contenu de chaque case (image plein cadre + légende éventuelle)
   --------------------------------------------------------- */
.mosaicBox{
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-paper);
}
.mosaicBox img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mosaicBox .frame-mark{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  opacity: 0.5;
}
.mosaicBox .frame-mark svg{ width: 34px; height: 34px; }

.portfolio-tile-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 3vw, 1.8rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}
.portfolio-tile-caption h3{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: #efefef;
  margin: 0 0 0.2rem;
}
.portfolio-tile-caption p{
  color: rgba(239, 239, 239, 0.8);
  font-size: 0.8rem;
  margin: 0;
}

/* ---------------------------------------------------------
   Case "titre de la page" (mosaic1) — texte aligné à gauche,
   centré verticalement
   --------------------------------------------------------- */
.portfolio-title-tile{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--ink-strong);
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}
.portfolio-title-tile.has-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio-title-tile-overlay{
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 21, 0.55);
}
.portfolio-title-tile-content{
  position: relative;
  z-index: 1;
}
.portfolio-title-tile h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--ink-strong-text);
  text-align: left;
  margin: 0;
  line-height: 1.15;
}
.portfolio-title-tile p{
  color: var(--ink-strong-soft);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}