/* ======================================== PORTFOLIO.css ======================================== */
/* Visualisation des projets */
/* Septembre 2025 - IAFACTORY j.muckensturm


/* GALERIE
================================================================================================== */

/* body */
body {}
body.dragging {cursor: grabbing;}
body.zoom-mode {cursor: default;}

/* effet animation bruit */
body::before {content: "";position: fixed;top: -50%;left: -50%;width: 200%;height: 200%;
  background: transparent url("http://assets.iceable.com/img/noise-transparent.png") repeat 0 0;background-size: 300px 300px;
  animation: noise-animation 0.3s steps(5) infinite;opacity: 0.9;will-change: transform;z-index: 100;pointer-events: none;}

@keyframes noise-animation {
  0% {transform: translate(0, 0);}
  10% {transform: translate(-2%, -3%);}
  20% {transform: translate(-4%, 2%);}
  30% {transform: translate(2%, -4%);}
  40% {transform: translate(-2%, 5%);}
  50% {transform: translate(-4%, 2%);}
  60% {transform: translate(3%, 0);}
  70% {transform: translate(0, 3%);}
  80% {transform: translate(-3%, 0);}
  90% {transform: translate(2%, 2%);}
  100% {transform: translate(1%, 0);}
}

/* preloader */
#preloader-overlay {} /* valeur modifiées dans le js */

.selection {display:none;/*on n'affiche pas le picto "sélection de projets"*/height:25px;line-height:25px;width:145px;margin:-48px 0 0 480px;padding: 2px 2px 2px 2px;border-radius:2px;border:1px solid #DFDFDF;color:#BABABA;background:#F7F7F7;letter-spacing:3px;font-size:11px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align: center;font-weight:normal;text-transform:uppercase;}



/* conteneur galerie */
a {position: relative;cursor: pointer;}
a::after {content: "";position: absolute;top: 0;left: 0;width: 0;height: 100%;background-color:#000;z-index: -1;transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}
.viewport {position:absolute;height:799px;width: 100vw;overflow: hidden;z-index: 1;opacity: 0;cursor: grab;}
.galerie-conteneur-hauteur {height:799px;width:100%;margin:44px 0 0 0;padding:5px 5px 5px 5px;position:absolute;left:0;
  background:#000;/*background: rgba(225, 225, 225, 0.5);*/
  box-shadow:inset 0 0 60px rgba(0, 0, 0, 0.1),inset 0 0 120px rgba(0, 0, 0, 0.1),inset 0 0 200px rgba(0, 0, 0, 0.1),inset 0 0 300px rgba(0, 0, 0, 0.1);}

.container {display:block;position: relative;margin:0 0 0 0;width: 5000px;overflow: hidden;cursor: grab;}
.grid-container {position: relative;width: 100%;height: 100%;}
.canvas {position: absolute;will-change: transform;}
.canvas-wrapper {position: absolute;top: 0;left: 0;transform-origin: 0 0;will-change: transform;isolation: isolate;}


/* page vignette effet */
.page-vignette-container {width: 100%;height: 100%;pointer-events: none;z-index: 9998;}
.page-vignette-extreme {width: 100%;
  mix-blend-mode: multiply;background:
  /* haut */linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 25%,transparent 50%),
  /* bas */linear-gradient(to top,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 25%,transparent 50%),
  /* gauche */linear-gradient(to right,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 25%,transparent 50%),
  /* droite */linear-gradient(to left,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 25%,transparent 50%);}


/* grid */
.grid-item {overflow: hidden;/*pour le hover*/position: absolute;width: 275px;height: 275px;border-radius:5px;background: #000;cursor: pointer;will-change: transform, opacity;z-index: 1;transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;}
.grid-item.out-of-view {opacity: 0.1;}
.grid-item.selected {z-index: 2 !important;}
.grid-item img {transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);position: relative;overflow: hidden;width: 100%;height: 100%;object-fit: cover;display: block;user-select: none;pointer-events: none;}
.grid-item::after {transition: box-shadow 0.4s ease;content: "";position: absolute;inset: 0;pointer-events: none;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7),inset 0 0 120px rgba(0, 0, 0, 0.3),inset 0 0 200px rgba(0, 0, 0, 0.3),inset 0 0 300px rgba(0, 0, 0, 0.3);}
.grid-item:hover {transform: scale(1.06);z-index: 3;}
.grid-item:hover img {transform: scale(1.05);}
.grid-item:hover::after {transition: all 0.4s ease;box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6),inset 0 0 80px rgba(0, 0, 0, 0.2),inset 0 0 120px rgba(0, 0, 0, 0.2);}
.grid-number {position: absolute;bottom: 10px;left: 10px;width:40px;height:30px;line-height:30px;border-radius:3px;background:#000;text-align: center;font-size: 15px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-weight:500;color: #FFF;opacity: 0.1;z-index: 2;}

.percentage-indicator {display:none;} /* important de garder cette classe de pagination sinon le JS fonctionne pas */



/* Résumé et texte synthétique bas de page
---------------------------------------------------------------------- */
.resume-projet-titre {display:block;margin:977px 0 0 50px;width:1450px;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;}
.resume-projet-texte {display:block;margin:25px 0 0 50px;width:550px;height:117px;padding:0 900px 0 0;line-height:25px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:1px;color:#777777;}
.specifique-footer-position-portfolio {} /* spécifique mediaqueries pour caler le footer */


/* Particules - porfolio */
#particle-canvas3 {pointer-events:none;
  transform: rotate(180deg);
  position:absolute;
  left:0;
  top:350px;
  width: 100%;
  height: 600px;
  vertical-align: middle;
  z-index:9;
  overflow-x: hidden;overflow-y: hidden;
}

/* ==================================================================== */
/* °°° 	@MEDIAQUERIES                         													*/
/* °°°  875px                       																		*/
/* ==================================================================== */

@media screen and (min-width: 875px) and (max-width: 1600px) {


      /* body */
      body {}
      body.dragging {}
      body.zoom-mode {}

      /* effet animation bruit */
      body::before {}

      @keyframes noise-animation {
        0% {transform: translate(0, 0);}
        10% {transform: translate(-2%, -3%);}
        20% {transform: translate(-4%, 2%);}
        30% {transform: translate(2%, -4%);}
        40% {transform: translate(-2%, 5%);}
        50% {transform: translate(-4%, 2%);}
        60% {transform: translate(3%, 0);}
        70% {transform: translate(0, 3%);}
        80% {transform: translate(-3%, 0);}
        90% {transform: translate(2%, 2%);}
        100% {transform: translate(1%, 0);}
      }

      /* preloader */
      #preloader-overlay {} /* valeur modifiées dans le js */

      .selection {display:none;height:20px;line-height:20px;width:95px;margin:-29px 0 0 278px;padding: 2px 2px 2px 2px;letter-spacing:1px;font-size:11px;}


      /* conteneur galerie */
      a {}
      a::after {top: 0;left: 0;width: 0;height: 100%;}
      .viewport {height:541px;width: 100vw;overflow: hidden;}
      .galerie-conteneur-hauteur {height:541px;width:100%;margin:44px 0 0 0;padding:5px 5px 5px 5px;left:0;box-shadow:inset 0 0 60px rgba(0, 0, 0, 0.1),inset 0 0 120px rgba(0, 0, 0, 0.1),inset 0 0 200px rgba(0, 0, 0, 0.1),inset 0 0 300px rgba(0, 0, 0, 0.1);}

      .container {margin:0 0 0 0;width: 3000px;overflow: hidden;cursor: grab;}
      .grid-container {width: 100%;height: 100%;}
      .canvas {}
      .canvas-wrapper {top: 0;left: 0;}

      /* page vignette effet */
      .page-vignette-container {}
      .page-vignette-extreme {width: 100%;}

      /* grid */
      .grid-item {overflow: hidden;/*pour le hover*/width: 150px;height: 150px;border-radius:5px;}

      .grid-item.out-of-view {}
      .grid-item.selected {}
      .grid-item img {overflow: hidden;width: 100%;height:100%;}
      .grid-item::after {inset: 0;pointer-events: none;box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7),inset 0 0 120px rgba(0, 0, 0, 0.3),inset 0 0 200px rgba(0, 0, 0, 0.3),inset 0 0 300px rgba(0, 0, 0, 0.3);}
      .grid-item:hover {}
      .grid-item:hover img {}
      .grid-item:hover::after {box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6),inset 0 0 80px rgba(0, 0, 0, 0.2),inset 0 0 120px rgba(0, 0, 0, 0.2);}
      .grid-number {bottom: 10px;left: 10px;width:40px;height:30px;line-height:30px;border-radius:3px;font-size: 15px;}

      .percentage-indicator {display:none;} /* important de garder cette classe de pagination sinon le JS fonctionne pas */



      /* Résumé et texte synthétique bas de page
      ---------------------------------------------------------------------- */
      .resume-projet-titre {margin:677px 0 0 50px;width:450px;line-height:25px;font-size:14px;letter-spacing:1px;}
      .resume-projet-texte {margin:25px 0 0 50px;width:600px;height:117px;padding:0 0 0 0;line-height:25px;font-size:13px;letter-spacing:1px;}
      .specifique-footer-position-portfolio {clear:both;margin:88px 0 0 0;} /* bien caler le footer sous le résumé dans les pages tableaux et liste */

}


/* ==================================================================== */
/* °°° 	@MEDIAQUERIES                         													*/
/* °°°  300px - mobile mini          																		*/
/* ==================================================================== */


@media screen and (min-width:50px) and (max-width:874px){

        /* body */
        body {}
        body.dragging {}
        body.zoom-mode {}

        /* effet animation bruit */
        body::before {}

        @keyframes noise-animation {
          0% {transform: translate(0, 0);}
          10% {transform: translate(-2%, -3%);}
          20% {transform: translate(-4%, 2%);}
          30% {transform: translate(2%, -4%);}
          40% {transform: translate(-2%, 5%);}
          50% {transform: translate(-4%, 2%);}
          60% {transform: translate(3%, 0);}
          70% {transform: translate(0, 3%);}
          80% {transform: translate(-3%, 0);}
          90% {transform: translate(2%, 2%);}
          100% {transform: translate(1%, 0);}
        }

        /* preloader */
        #preloader-overlay {} /* valeur modifiées dans le js */

        .selection {display:none;height:20px;line-height:20px;width:95px;margin:-29px 0 0 278px;padding: 2px 2px 2px 2px;letter-spacing:1px;font-size:11px;}


        /* conteneur galerie */
        a {}
        a::after {top: 0;left: 0;width: 0;height: 100%;}
        .viewport {height:341px;width: 100vw;overflow: hidden;}
        .galerie-conteneur-hauteur {height:341px;width:100%;margin:44px 0 0 0;padding:5px 5px 5px 5px;left:0;box-shadow:inset 0 0 60px rgba(0, 0, 0, 0.1),inset 0 0 120px rgba(0, 0, 0, 0.1),inset 0 0 200px rgba(0, 0, 0, 0.1),inset 0 0 300px rgba(0, 0, 0, 0.1);}

        .container {margin:0 0 0 0;width: 3000px;overflow: hidden;cursor: grab;}
        .grid-container {width: 100%;height: 100%;}
        .canvas {}
        .canvas-wrapper {top: 0;left: 0;}

        /* page vignette effet */
        .page-vignette-container {}
        .page-vignette-extreme {width: 100%;}

        /* grid */
        .grid-item {overflow: hidden;/*pour le hover*/width: 150px;height: 150px;border-radius:5px;}

        .grid-item.out-of-view {}
        .grid-item.selected {}
        .grid-item img {overflow: hidden;width: 100%;height:100%;}
        .grid-item::after {inset: 0;pointer-events: none;box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7),inset 0 0 120px rgba(0, 0, 0, 0.3),inset 0 0 200px rgba(0, 0, 0, 0.3),inset 0 0 300px rgba(0, 0, 0, 0.3);}
        .grid-item:hover {}
        .grid-item:hover img {}
        .grid-item:hover::after {box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6),inset 0 0 80px rgba(0, 0, 0, 0.2),inset 0 0 120px rgba(0, 0, 0, 0.2);}
        .grid-number {bottom: 10px;left: 10px;width:40px;height:30px;line-height:30px;border-radius:3px;font-size: 15px;}

        .percentage-indicator {display:none;} /* important de garder cette classe de pagination sinon le JS fonctionne pas */



        /* Résumé et texte synthétique bas de page
        ---------------------------------------------------------------------- */
        .resume-projet-titre {margin:477px 25px 0 25px;width:250px;line-height:25px;font-size:13px;letter-spacing:1px;}
        .resume-projet-texte {margin:25px 25px 0 25px;width:250px;height:117px;padding:0 0 0 0;line-height:25px;font-size:12px;letter-spacing:1px;}
        .specifique-footer-position-portfolio {clear:both;margin:190px 0 0 0;} /* bien caler le footer sous le résumé dans les pages tableaux et liste */


/* Particules - porfolio */
#particle-canvas3 {left:0;top:200px;width: 100%;height: 350px;overflow-x: hidden;overflow-y: hidden;}

  }