@charset "utf-8";
/* === Portfolio content only === */
:root{
  --cards-gap: clamp(6px, 1vw, 12px);
  --card-w: clamp(100px, 6vw, 140px);   /* largeur base d’une card */
  --work-radius: 16px;
  --header-h: 15vh;                     /* hauteur du header fixe */
  --header-gap: clamp(8px, 1.5vw, 24px);
  --hover-grow: 5;                      /* facteur d’élargissement au hover */

  --meta-x: clamp(12px, 2vw, 28px);     /* marge latérale de l’overlay */
  --meta-y: clamp(12px, 2vw, 28px);     /* marge basse de l’overlay */
  --meta-gap: clamp(6px, 1vw, 12px);    /* gap Titre <-> Tags */
}

/* Conteneur principal du <main> */
.work-container{
  padding-top: var(--header-h);
  margin-top: var(--header-gap);
}

/* Rangée de cards */
.work-strip{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--cards-gap);
  overflow-x: auto;
  overflow-y: visible;
  padding-inline: var(--cards-gap);
  margin-inline: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Card */
.work-card{
  position: relative;
  display: block;
  flex: 0 0 var(--card-w);              /* largeur FIXE par défaut */
  width: var(--card-w);
  min-width: 120px;
  height: 55vh;
  border-radius: var(--work-radius);
  overflow: hidden;
  background: #eee;
  scroll-snap-align: start;
  will-change: flex-basis;
  transition: flex-basis .35s ease, box-shadow .3s ease, filter .2s ease;
}

/* Image */
.work-media{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Voile lisibilité (visible au hover desktop) */
.work-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.30) 20%,
    rgba(0,0,0,.10) 40%,
    rgba(0,0,0,0) 60%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}

/* ------- META (Titre + Tags) ------- */
.work-meta{
  position: absolute;
  left: var(--meta-x);
  right: var(--meta-x);
  bottom: var(--meta-y);

  /* Empilement vertical, aligné à gauche */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--meta-gap);
  text-align: left;

  color:#fff;
  opacity: 0;                           /* apparaît au hover */
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;                 /* toute la card reste cliquable */
  max-width: 85%;
  z-index: 2;                           /* au-dessus de l’image + voile */
}

/* >>> RESET anti-bug : supprime toute position absolue héritée */
.work-title, .work-tags{
  position: static !important;
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  transform:none !important;
}

/* Titre AU-DESSUS et à GAUCHE */
.work-title{
  order: -1;                            /* passe avant les tags même si HTML inversé */
  margin: 0;
  background: transparent;
  font-family: 'Coolvetica', sans-serif;
  font-size: clamp(22px, 4vw, 64px);
  line-height: .95;
  letter-spacing: .5px;
  text-align: left !important;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

/* Tags sous le titre */
.work-tags{
  order: 0;
  display:flex;
  justify-content:flex-start;
  gap:.5rem;
  list-style:none;
  margin-left:.75vw;
  padding:0;
  text-align:left !important;
}
.work-tags li{
  font: 600 0.9rem/1 Arial, sans-serif;
  color:#fff;
  padding:.45rem .7rem;
  border:2px solid rgba(255,255,255,.9);
  border-radius:999px;
  background: transparent;
}

/* Effet desktop : élargissement + apparition du texte + désaturation par défaut */
@media (hover:hover) and (pointer:fine){
  /* images en N&B par défaut */
  .work-card .work-media{
    filter: grayscale(100%);
    transition: filter .35s ease;
  }

  .work-strip:hover .work-card{
    filter: saturate(1) brightness(1);      /* dim des cartes non survolées */
  }
  .work-strip .work-card:hover{
    flex-basis: calc(var(--hover-grow) * var(--card-w)); /* élargit & repousse */
    filter: none;                                       /* enlève le dim */
  }
  .work-strip .work-card:hover .work-media{
    filter: none;                                       /* couleur au hover */
  }
  .work-strip .work-card:hover::after{ opacity: 1; }     /* voile lisibilité */
  .work-strip .work-card:hover .work-meta{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar discrète (WebKit) */
.work-strip::-webkit-scrollbar{ height: 8px; }
.work-strip::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.25); border-radius: 8px; }
.work-strip::-webkit-scrollbar-track{ background: transparent; }

/* Préf. d’animation */
@media (prefers-reduced-motion: reduce){
  .work-strip{ scroll-snap-type: none; }
  .work-card, .work-card::after, .work-meta{ transition: none; }
  .work-card .work-media{ transition: none; }
}

/* Mobile */
@media (max-width:1100px){
  :root{ --card-w: 66vw; }
  .work-strip{
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
  }
  .work-card{
    flex: 0 0 var(--card-w);
    width: var(--card-w);
    scroll-snap-align: center;
  }
  .work-card::after{ opacity: .55; }    /* retire si tu ne veux pas de voile sur mobile */
  .work-meta{ opacity:1; transform:none; }
  .work-strip:hover .work-card,
  .work-strip .work-card:hover{
    flex-basis: var(--card-w);
    box-shadow: none;
    filter: none;
  }
}

/* Bonus : ancres sous header fixe */
[id]{ scroll-margin-top: calc(var(--header-h) + var(--header-gap)); }