@charset "utf-8";
/* === Portfolio content only === */

/* =========================================================
   VARIABLES
   ========================================================= */
:root{
  --cards-gap: clamp(6px, 1vw, 12px);
  --card-w: clamp(100px, 6vw, 140px);   /* utilisé surtout en mobile */
  --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 */
}

/* =========================================================
   LAYOUT
   ========================================================= */

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

/* .work-strip = stack vertical rows */
.work-strip{
  display: flex;
  flex-direction: column;
  gap: var(--cards-gap);
  overflow: visible; /* IMPORTANT: plus de scroll horizontal sur le container global */
}

/* .work-row = ancien .work-strip (strip horizontal + accordion) */
.work-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--cards-gap);

  /* on garde le comportement "strip" si jamais ça overflow */
  overflow-x: auto;
  overflow-y: visible;

  padding-inline: var(--cards-gap);
  margin-inline: auto;

  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

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

/* =========================================================
   CARD
   ========================================================= */
.work-card{
  position: relative;
  display: block;

  /* largeur adaptative (remplit toujours le conteneur) */
  flex: 1 1 0;
  min-width: 120px;
  width: auto;

  height: 55vh;
  border-radius: var(--work-radius);
  overflow: hidden;
  background: #eee;
  scroll-snap-align: start;

  /* l’accordion se fait via flex-grow (pas flex-basis) */
  will-change: flex-grow;
  transition: flex-grow .35s ease, box-shadow .3s ease, filter .2s ease;
}

/* 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;
}

/* =========================================================
   MEDIA (WRAPPER + IMG) — anti compression
   ========================================================= */
.work-media{
  width: 100%;
  height: 100%;
  display: block;
}

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

/* compat si jamais tu as encore des cards avec <img class="work-media"> */
img.work-media{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   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;
}

/* =========================================================
   DESKTOP HOVER — Accordion + Reveal
   ========================================================= */
@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-row:hover .work-card{
    filter: saturate(1) brightness(1); /* dim des cartes non survolées */
    flex-grow: 1;
  }

  .work-row .work-card:hover{
    flex-grow: var(--hover-grow);      /* élargit & repousse dans la LIGNE */
    filter: none;                      /* enlève le dim */
  }

  .work-row .work-card:hover .work-media{
    filter: none;                      /* couleur au hover */
  }

  .work-row .work-card:hover::after{
    opacity: 1;                        /* voile lisibilité */
  }

  .work-row .work-card:hover .work-meta{
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   ACCESSIBILITY — Préférence d’animation
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .work-row{ 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-row{
    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-row:hover .work-card,
  .work-row .work-card:hover{
    flex-basis: var(--card-w);
    box-shadow: none;
    filter: none;
  }
}

@media (max-width:1100px){

  /* autorise le swipe horizontal sur la row */
  .work-row{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* évite que les cards se compressent et garantit le débordement */
  .work-card{
    flex: 0 0 var(--card-w);
  }
}

@media (max-width:1100px){
  html, body{ overflow-x: hidden; }  /* ok globalement */
  .work-strip, .work-container{ overflow: visible; } /* surtout pas hidden ici */
}

@media (max-width:1100px){
  .work-row{
    /* clé : ne jamais laisser overflow-y: visible sur un conteneur qui doit scroller en X */
    overflow-x: auto;
    overflow-y: hidden;

    /* bonus mobile */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    /* évite les cas où un margin auto peut gêner en mobile */
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
  }
}

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