/* ==========================================================================
   Cartes talents — refonte
   ==========================================================================
   Chargée APRÈS css/nova-7385cd.webflow.css, qu'elle surcharge sans le
   modifier. Le HTML n'est pas touché : classes et balisage Webflow restent
   intacts, donc `tools/build_portfolio.py` peut toujours régénérer les
   listes. Retirer le <link> dans index.html / works.html / works-copy.html
   suffit à revenir à l'ancienne carte.

   L'empilement au défilement est conservé, mais il devient VISIBLE : à
   l'origine toutes les cartes se collaient au même `top`, donc chacune
   recouvrait entièrement la précédente — on voyait un remplacement, pas une
   pile. Ici chaque carte se cale 10 px plus bas que la précédente, ce qui
   laisse dépasser la tranche de celles du dessous.

   Ce qui change par ailleurs
     avant : 1275 × 720 px, titre 48 px, légende posée sur l'image derrière
             un dégradé
     après : carte horizontale d'environ 880 × 350, visuel carré non
             recadré à gauche, nom et étiquette à droite, titre 34 px

   L'interaction Webflow « Project image on hover » liée à ces cartes est
   inerte (elle vise des enfants absents de ce balisage) : le survol est
   donc géré ici, en CSS, sans conflit.
   ========================================================================== */

/* --------------------------------------------------------- la pile */

.projects-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-row-gap: 64px;
  width: 100%;
  /* La marge basse laisse la dernière carte rester collée un instant. 30vh
     creusait un vide de 250 px avant la section suivante ; 96 px suffisent. */
  padding: 56px 0 96px;
}

.container-6.padding-72px.overflow {
  padding-left: 48px;
  padding-right: 48px;
}

/* --------------------------------------------------------- la carte */

.projects-flex {
  position: sticky;
  width: 100%;
  max-width: 880px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Décalage croissant : c'est ce qui fait voir la pile plutôt qu'un
   simple recouvrement. 96 px dégagent la navbar fixe. */
.projects-flex:nth-child(1) { top:  96px; }
.projects-flex:nth-child(2) { top: 106px; }
.projects-flex:nth-child(3) { top: 116px; }
.projects-flex:nth-child(4) { top: 126px; }
.projects-flex:nth-child(5) { top: 136px; }
.projects-flex:nth-child(6) { top: 146px; }
.projects-flex:nth-child(7) { top: 156px; }
.projects-flex:nth-child(n+8) { top: 166px; }

.projects-link-wrapper {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  height: auto;
  border: 1px solid #232326;
  border-radius: 16px;
  /* Opaque : sans quoi la carte du dessous transparaîtrait pendant
     l'empilement. */
  background-color: #000;
  box-shadow: 0 24px 48px -32px #000;
  overflow: hidden;
  transition: border-color .28s ease, background-color .28s ease;
}

/* --------------------------------------------------------- le visuel */

/* Les 8 visuels sont carrés (428 à 1024 px de côté) : un cadre 1/1 les
   affiche entiers, sans recadrage. */
.project-image,
.project-image-copy {
  position: static;
  inset: auto;
  display: block;
  flex: 0 0 40%;
  width: 40%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  padding: 0;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* -------------------------------------------------------- la légende */

.projects-details-flex-4,
.projects-details-flex-3-copy-copy {
  display: flex;
  position: static;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  width: auto;
  min-height: 0;
  padding: 32px 36px;
  background-image: none;
  text-align: left;
}

/* Une flèche discrète ancre la composition à droite et signale que la carte
   mène quelque part. Purement décorative, donc invisible aux lecteurs
   d'écran : le lien porte déjà son intitulé. */
.projects-details-flex-4::after,
.projects-details-flex-3-copy-copy::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: 24px;
  border-top: 1px solid #3A3A40;
  border-right: 1px solid #3A3A40;
  transform: rotate(45deg);
  transition: border-color .28s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.projects-text-flex,
.projects-text-flex-copy {
  grid-column-gap: 0;
  grid-row-gap: 16px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.projects-flex .caps,
.projects-flex .caps-copy-copy {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: .005em;
}

/* ------------------------------------------------------ l'étiquette */

.badge-3,
.badge-3-copy {
  min-height: 0;
  padding: 4px 11px;
  border: 1px solid #2E2E33;
  border-radius: 999px;
  background-color: transparent;
  transition: border-color .28s ease;
}

.badge-3 .heading-14,
.badge-3-copy h5 {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #A3A0A0;
  transition: color .28s ease;
}

/* Sur works.html, « View Details » doublait une carte déjà entièrement
   cliquable. */
.button-flex-copy { display: none; }

/* --------------------------------------------------------- le survol */

.projects-link-wrapper:hover {
  border-color: rgba(255, 0, 0, .38);
  background-color: #0a0a0a;
}

.projects-link-wrapper:hover .project-image,
.projects-link-wrapper:hover .project-image-copy {
  transform: scale(1.04);
}

.projects-link-wrapper:hover .badge-3,
.projects-link-wrapper:hover .badge-3-copy {
  border-color: rgba(255, 0, 0, .45);
}

.projects-link-wrapper:hover .heading-14,
.projects-link-wrapper:hover .badge-3-copy h5 {
  color: #FF0000;
}

.projects-link-wrapper:hover .projects-details-flex-4::after,
.projects-link-wrapper:hover .projects-details-flex-3-copy-copy::after {
  border-color: #FF0000;
  transform: rotate(45deg) translate3d(4px, -4px, 0);
}

.projects-link-wrapper:focus-visible {
  outline: 2px solid #EEEEEE;
  outline-offset: 3px;
}

/* -------------------------------------------------------- responsive */

@media screen and (max-width: 991px) {
  /* la feuille Webflow figeait la carte à 690 px de large et annulait le
     sticky */
  .projects-flex {
    position: sticky;
    width: 100%;
    max-width: 720px;
  }

  .container-6.padding-72px,
  .container-6.padding-72px.overflow {
    padding-left: 5%;
    padding-right: 5%;
  }

  .projects-details-flex-4,
  .projects-details-flex-3-copy-copy {
    width: auto;
    height: auto;
    padding: 24px 28px;
    border-radius: 0;
  }

  .projects-flex .caps,
  .projects-flex .caps-copy-copy { font-size: 28px; }
}

/* En dessous, la carte repasse en vertical et l'empilement est abandonné :
   sur un écran haut de 700 px, huit cartes collantes deviennent pénibles. */
@media screen and (max-width: 767px) {
  .projects-wrapper {
    grid-row-gap: 28px;
    padding: 32px 0 32px;
  }

  .projects-flex {
    position: static;
    top: auto;
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .projects-link-wrapper { flex-direction: column; }

  .project-image,
  .project-image-copy {
    flex: none;
    width: 100%;
  }

  .projects-details-flex-4,
  .projects-details-flex-3-copy-copy {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 18px 20px 20px;
    text-align: left;
  }

  .projects-details-flex-4::after,
  .projects-details-flex-3-copy-copy::after { display: none; }

  .projects-text-flex,
  .projects-text-flex-copy {
    grid-row-gap: 10px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .projects-flex .caps,
  .projects-flex .caps-copy-copy { font-size: 22px; }
}

@media screen and (max-width: 479px) {
  /* la feuille Webflow enfermait la liste dans une boîte de 300 × 270 px
     et débordait l'image à 120 % de large */
  .collection-list-wrapper-2 {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    text-align: left;
    overflow: visible;
  }

  .container-6.padding-72px.overflow {
    display: block;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .project-image,
  .project-image-copy {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .projects-link-wrapper { display: flex; max-width: none; }

  .projects-flex .caps,
  .projects-flex .caps-copy-copy { font-size: 20px; }
}

/* ------------------------------------------- confort de mouvement */

@media (prefers-reduced-motion: reduce) {
  .project-image,
  .project-image-copy,
  .projects-link-wrapper,
  .badge-3,
  .badge-3-copy,
  .badge-3 .heading-14 {
    transition: none;
  }

  .projects-link-wrapper:hover .project-image,
  .projects-link-wrapper:hover .project-image-copy {
    transform: none;
  }

  .projects-details-flex-4::after,
  .projects-details-flex-3-copy-copy::after { transition: none; }

  .projects-link-wrapper:hover .projects-details-flex-4::after,
  .projects-link-wrapper:hover .projects-details-flex-3-copy-copy::after {
    transform: rotate(45deg);
  }
}