* { box-sizing: border-box; }
@media screen and (min-width: 851px) { div#wrapper { position: absolute; width: 100%; top: 125px; left: 0; overflow: hidden; } }
@media screen and (max-width: 850px) and (min-width: 601px) { div#wrapper { position: absolute; width: 100%; top: 125px; left: 0; overflow: hidden; } }
@media screen and (max-width: 600px) { div#wrapper { position: absolute; } }




/* ==========================================================================
   1. GRILLE BLANCHE ÉPURÉE & CONTENEURS DE ZOOM (Surcharge TMCK.css)
   ========================================================================== */

.container1, 
.container2, 
.container3 {
  background-color: #ffffff !important;
  padding: 6px; /* Gouttière blanche fine sur PC */
}

@media screen and (max-width: 600px) {
  .container1, 
  .container2, 
  .container3 {
    padding: 0 0 28px 0; /* Respiration blanche verticale entre les projets sur mobile */
  }
}

/* Le lien <a> sert de masque (overflow: hidden) pour contenir le zoom de l'image */
.container1 > a,
.container2 > a,
.container3 > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f4f4f4;
}

/* Suppression du cadre noir sur l'image et transition douce */
img.tmckcv {
  padding: 0 !important;
  background-color: transparent !important;
  transform: scale(1.005); /* Léger zoom initial avant l'animation au scroll */
  transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.8s cubic-bezier(0.54, 0.51, 0.045, 1);
  will-change: transform;
}

/* Ajuste le dégradé et le titre à l'intérieur du masque */
.overlayb,
.overlay {
  left: 0;
  bottom: 0;
  pointer-events: none; /* Permet de cliquer à travers le titre sans gêner le survol */
}


/* ==========================================================================
   2. ZOOM LÉGER AU SURVOL SUR PC (Comme sur l'accueil .image-itemZ)
   ========================================================================== */

@media screen and (min-width: 851px) {
  .container1 > a:hover img.tmckcv,
  .container2 > a:hover img.tmckcv,
  .container3 > a:hover img.tmckcv {
    transform: scale(1.00); /* Zoom subtil et fluide au survol */
  }

  /* Légère montée du titre au survol pour accompagner le zoom */
  .container1 .overlay,
  .container2 .overlay,
  .container3 .overlay {
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .container1:hover .overlay,
  .container2:hover .overlay,
  .container3:hover .overlay {
    transform: translateY(0);
  }
}

/* Accessibilité : désactive les mouvements si l'utilisateur l'a demandé */
@media (prefers-reduced-motion: reduce) {
  .reveal-ready,
  img.tmckcv {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}