/* ================================ Portfolio page only ================================ */
/* plus d’avatar sur cette page */
#avatar {
  display: none !important;
}

/* header ajusté UNIQUEMENT sur desktop */
@media (min-width: 992px) {
  body.page-portfolio .header {
    width: 100%;
    padding: 0 50px;
    left: 0;
    right: 0;
    transform: none;
  }
}

@media (min-width: 1200px) {
  body.page-portfolio .header {
    padding: 0 60px;
  }
}

@media (min-width: 1400px) {
  body.page-portfolio .header {
    padding: 0 90px;
  }
}

@media (min-width: 1600px) {
  body.page-portfolio .header {
    padding: 0 95px;
  }
}

/* container dédié à cette page (tu as choisi .contentportfolio) */
.contentportfolio {
  position: relative;
  width: 100%;
  min-width: 360px;
  height: auto;
  margin-left: 0;
  padding-left: 0; /* pas de padding à gauche */
}

@media (min-width: 992px) {
  .contentportfolio {
    padding-left: 33px;
  }
}

@media (min-width: 1200px) {
  .contentportfolio {
    padding-left: 36px;
  }
}

@media (min-width: 1400px) {
  .contentportfolio {
    padding-left: 48px;
  }
}

@media (min-width: 1600px) {
  .contentportfolio {
    padding-left: 50px;
  }
}

/* figures “cachées” dans la galerie : rester invisibles */
body.page-portfolio .my-gallery figure[style*="display:none"],
body.page-portfolio .my-gallery figure[hidden],
body.page-portfolio .my-gallery figure[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo seul dans le header (caché sur mobile) */
body.page-portfolio .logo--portfolio {
  display: none;
}

@media (min-width: 992px) {
  body.page-portfolio .logo--portfolio {
    display: block;
  }

  /* le SVG */
  body.page-portfolio .logo--portfolio svg {
    width: 60px;
    height: 60px;
    display: block;
  }
}

/* Centrer le bloc titre uniquement sur la page portfolio */
body.page-portfolio .section-grid-title{
  max-width: 1120px;          /* assez large pour 1200/1400 */
  margin: 40px auto 20px;     /* plus d'espace sous le header */
  padding: 0 24px;            /* respirations latérales */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Barre de filtres */
body.page-portfolio .portfolio-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px; /* moins d’espace que header → titre */
}

body.page-portfolio .pf-btn {
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: var(--light, #fff);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

body.page-portfolio .pf-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .25);
}

body.page-portfolio .pf-btn.is-active {
  border-color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  color: #111;
}

/* Items masqués par le filtre */
body.page-portfolio .pf-item.is-hidden {
  display: none !important;
}

/* Transition fluide des items */
body.page-portfolio .pf-item{
  opacity:1;
  transition:opacity .28s cubic-bezier(.2,.7,.2,1);
  will-change:opacity;
}

body.page-portfolio .pf-item.hiding {
  opacity: 0;
  pointer-events: none; /* évite les clics pendant l’anim */
}

body.page-portfolio .pf-item.showing {
  opacity: 1;
}

/* Items masqués par le filtre */
body.page-portfolio .pf-item.is-hidden {
  display: none !important;
}

/*  ≥1200px : assure le centrage parfait même si le contenu à gauche a du padding */
@media (min-width: 1200px){
  body.page-portfolio .section-grid-title{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*  ≥1400px : idem + un soupçon plus de hauteur pour équilibrer visuellement */
@media (min-width: 1400px){
  body.page-portfolio .section-grid-title{
    max-width: 1280px;
    margin-top: 2px;
    
  }
}

/* ---------- Thème mobile (dans le halo jaune) ---------- */
@media (max-width: 767.98px){
  /* Titre en blanc pour plus de contraste */
  body.page-portfolio .section-grid-title .h2__title{
    color: #fff !important;
  }

  /* Boutons de filtre plus sombres, texte blanc */
  body.page-portfolio .pf-btn{
    background: rgba(0,0,0,.55);
    border-color: rgba(255,255,255,.12);
    color: #fff;
    backdrop-filter: blur(2px);
  }
  body.page-portfolio .pf-btn:hover{
    border-color: rgba(255,255,255,.25);
    transform: translateY(-1px);
  }
  /* Actif : gris clair pour rester lisible, texte presque noir */
  body.page-portfolio .pf-btn.is-active{
    background: rgba(255,255,255,.9);
    color: #111;
    border-color: transparent;
  }

  /* un peu plus d’air au-dessus sur mobile */
  body.page-portfolio .section-grid-title{
    margin-top: 88px;
  }
}

/* ---------- (optionnel) légère fluidité sur les filtres sans “slide-up” ---------- */
/* Fait seulement un fondu + scale doux, pas de translation verticale */
body.page-portfolio .portfolio-item{
  will-change: opacity, transform;
  transition: opacity .28s ease, transform .28s ease;
}
body.page-portfolio .portfolio-item.is-hidden{
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
}


/* ===== Centrage du menu header UNIQUEMENT desktop (>=992px) ===== */
@media (min-width: 992px) {
  :root {
    --pad-portfolio: 50px;
  }
  @media (min-width: 1200px) { :root { --pad-portfolio: 60px; } }
  @media (min-width: 1400px) { :root { --pad-portfolio: 90px; } }
  @media (min-width: 1600px) { :root { --pad-portfolio: 95px; } }

  body.page-portfolio .header {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;   /* gauche | CENTRE | droite */
    align-items: center;
    padding-inline: var(--pad-portfolio) !important;

    /* neutralise d'éventuels styles globaux desktop */
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  body.page-portfolio .logo--portfolio    { justify-self: start; }
  body.page-portfolio .header__navigation { justify-self: center; }
  body.page-portfolio .header__controls   { justify-self: end; }

  /* évite que le menu s'étale */
  body.page-portfolio .header__navigation .menu__list {
    white-space: nowrap;
  }
}
/* < 992px : rien ne change, le header mobile reste intact */