/* ======================================== FICHE-NOIRE-PORTFOLIO.css ======================================== */
/* Structuration et séquençage d'une fiche visuelle portfolio sur fond noir */
/* Septembre 2025 - IAFACTORY j.muckensturm

/* Crédits ! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license  */


/* FICHE PORTFOLIO
================================================================================================== */


/* Body  -------------------------------------------------- */
body {width:100%;height: 100%;margin: 0;margin-top:-1px;background:#fff;z-index:99;margin-top:-1px;font-family:'typoarchia', "Trebuchet MS", Helvetica, sans-serif;overflow-x:hidden;/* Masque la scroll bar horizontale */}

/* >>	Typographie */

@font-face {font-family: 'typoarchia';src: url('../font/archia.ttf') format('truetype'),url('../font/archia.eot'),url('../font/archia.woff') format('woff'),url('../font/archia.svg') format('svg'),url('../font/archia.eot?#iefix') format('embedded-opentype');font-weight: normal;font-style: normal;}
@font-face {font-family: 'typobriquete';src: url('../font/briquete.ttf') format('truetype'),url('../font/briquete.eot'),url('../font/briquete.woff') format('woff'),url('../font/briquete.svg') format('svg'),url('../font/briquete.eot?#iefix') format('embedded-opentype');font-weight: normal;font-style: normal;}
@font-face {font-family: 'typorintix';src: url('../font/rintix.ttf') format('truetype'),url('../font/rintix.eot'),url('../font/rintix.woff') format('woff'),url('../font/rintix.svg') format('svg'),url('../font/rintix.eot?#iefix') format('embedded-opentype');font-weight: normal;font-style: normal;}
@font-face {font-family: 'typoitaliabook';src: url('../font/italiabook.ttf') format('truetype'),url('../font/italiabook.eot'),url('../font/italiabook.woff') format('woff'),url('../font/italiabook.svg') format('svg'),url('../font/italiabook.eot?#iefix') format('embedded-opentype');font-weight: normal;font-style: normal;}

.typo-archia {font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
.typo-briquete {font-family: 'typobriquete', "Trebuchet MS", Helvetica, sans-serif;}
.typo-rintix {font-family: 'typorintix', "Trebuchet MS", Helvetica, sans-serif;}
.typo-italiabook {font-family: 'typoitaliabook', "Trebuchet MS", Helvetica, sans-serif;}



/* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/
#custom-cursor {position: fixed;top: 0;left: 0;pointer-events: none; /* ne bloque pas les clics */font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size: 14px;font-weight: bold;color:#FFF;background: rgba(0,0,0,0.7);padding: 6px 6px 6px 6px;border-radius: 4px;transform: translate(-50%, -50%);z-index:5;white-space: nowrap;transition: transform 0.1s ease; /* fluide au changement */}
#custom-cursor.hidden {opacity: 0;}/* Masquer le curseur texte au contact des éléments cliquables */

/* Curseur trainée pixel */
.pixel {position: absolute;width:5px;height:5px;background:#DADADA;pointer-events: none; /* ne bloque pas les clics */opacity: 1;transition: opacity 1.5s linear; /* disparition progressive */}
@keyframes trail {0% {opacity: 1;transform: scale(1);} 100% {opacity: 0;transform: scale(0);}}


/* GRILLE NOIRE
================================================================================================== */
/* >>	Conteneur grille 100 % */
.grille-meta-noir {z-index:-30;background-color:#000;margin-left: auto;margin-right: auto;background-image:/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */
repeating-linear-gradient(to bottom, #232323 0, #232323 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 25px),
repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 5px);}

/* >>	Conteneur grille repères */
.grille-reperes-noir {z-index:-30;width: 1605px;margin: auto;background:/*permet de gérer la répétition des repères */
repeating-linear-gradient(to bottom, #5C5C5C 0, #5C5C5C 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 10px);}

/* >>	Conteneur conteu 1500PX + PADDING 100PX */
.conteneur-contenu-noir {z-index:-30;height:auto;width: 1501px;padding:0 50px 0 50px;margin: auto;background-color:#000;background-image:/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan  */
repeating-linear-gradient(to right, #181818 0, #181818 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #181818 0, #181818 1px, transparent 1px, transparent 50px),/* Lignes de 50px */
repeating-linear-gradient(to right, #111 0, #111 1px, transparent 1px, transparent 25px), repeating-linear-gradient(to bottom, #111 0, #111 1px, transparent 1px, transparent 25px),/* Lignes de 25px */
repeating-linear-gradient(to right, #111 0, #111 1px, transparent 1px, transparent 5px), repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 5px);}/* Lignes de 5px */



/* lOGO FOND NOIR
================================================================================================== */
.logo-iafactory-noir {float:right;display:block;z-index:5;position:absolute;top:0;height:176px;width:952px;margin:0 0 0 800px;padding:13px 0 0 0;border-bottom:none;background:none;font-size:142px;letter-spacing : 13px;font-family: 'typorintix';color:#FFF;text-decoration:none;
-webkit-text-stroke: 4px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.logo-iafactory-noir:hover {margin:0 0 0 781px;padding:13px 0 0 0;z-index:5;border-bottom:none;background:none;color:#000;-webkit-text-stroke: 3px #FFF;text-shadow:-1px -1px 0 #FFF,1px -1px 0 #FFF,-1px  1px 0 #FFF,1px  1px 0 #FFF}
.logo-iafactory-noir-box {float:right;display:block;z-index:4;position:absolute;top:0;height:173px;width:1500px;margin:0 0 0 910px;padding:26px 0 0 0;background:#FFF;
-webkit-transform:skew(23deg);-moz-transform:skew(23deg);-o-transform:skew(23deg);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.logo-aos-fx {z-index:5;position:absolute;}/*hack pour faire fonctionner l'animaton aos du logo sans dénaturer l'effet scramble*/



/* HEADER FOND NOIR
================================================================================================== */
header {clear:both;height:301px;}

/* >>	Navigation fond noir */
nav.navfichenoire {float:left;display:block;margin:50px 0 0 0;padding:63px 53px 11px 61px;height:75px;width:35px;border:1px solid transparent;background-image:url(../img/ico/ico-menu-retour-blanc.png), url(../img/bg/bg-bouton-court-haut-droite-blanc.png);background-repeat:no-repeat, no-repeat;background-position:43px 60px, 99px -1px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
nav.navfichenoire:hover {border:1px solid transparent;background-position:33px 60px, 99px -1px;cursor:pointer;}

/* >>	Briefer fond noir */
.bouton-briefer-noir {position:absolute;z-index:5;display:block;float:left;margin:50px 0 0 300px;padding:63px 53px 11px 61px;height:75px;width:235px;border:1px solid transparent;text-decoration:none;
font-size:40px;letter-spacing : 4px;line-height:40px;font-family: 'typobriquete', "Trebuchet MS", Helvetica, sans-serif;color:#FFF;
background-image:url(../img/bg/bg-bouton-long-bas-gauche-blanc.png);background-repeat:no-repeat;background-position:-1px 99px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.bouton-briefer-noir:hover {border:1px solid #FFF;color:#FFF;background-position:-1px 99px;background-color:rgba(119, 119, 119, 0.050);}
     /* >>	Animation contour */
    .bouton-briefer-noir-animation {position:absolute;margin:50px 0 0 300px;height:151px;width:351px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
    .bouton-briefer-noir-animation:hover {cursor: pointer;}
    .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after {animation: clipMe 10s linear infinite;/* double de Animation Delay*/;color:rgba(255, 255, 255, 0.1)/* couleur de l'animation*/;z-index:5;position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: "";box-shadow: inset 0 0 0 1px;}
    .bouton-briefer-noir-animation::before {animation-delay: -5s;/*moitié de clip Me*/}
    @keyframes clipMe {0%, 100% { clip: rect(0, 351px, 1px, 0); } 25% { clip: rect(0, 351px, 151px, 350px); } 50% { clip: rect(150px, 351px, 151px, 0); } 75% { clip: rect(0, 1px, 151px, 0);}}


/* >>	Baseline fond noir */
.baseline-iafactory-noir {float:left;display:block;margin:184px 0 0 599px;padding:0 0 0 0;text-transform:lowercase;line-height:25px;font-size:14px;color:#FFF;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}

/* >>	Ariane fond noir */
.fil-ariane-noir {clear:both;float:left;height: 25px;margin:-31px 0 0 0;padding: 0 0 0 0;text-transform:lowercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:12px;letter-spacing : 1px;text-align: left;font-weight:normal;}
.fil-ariane-noir ul {display:block;padding:0 0 0 42px;}
.fil-ariane-noir ul li {display:inline;margin:0 0 0 0;padding:0 21px 0 8px;background-image:url(../img/ico/ico-chevron-ariane.png);background-repeat:no-repeat;background-position:right 4px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:#777;}
.fil-ariane-noir ul li a {font-size:12px;letter-spacing : 1px;text-align: left;font-weight:normal;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;color:#FFF;text-decoration:none;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.fil-ariane-noir ul li a:hover {background:#FFF;color:#000;padding:6px;}

.fil-ariane-noir ul li.arianelast {} /*item visible sur petite résolution*/
.fil-ariane-noir .nochevron {background-image:none;}



/* Contenu ---------------------------------------------------------------------------------------- */
/* Bouton fermer	*/
.bouton-close button {z-index: 99;position:fixed;top:300px;right:115px;border-radius:44px;width:88px;height:88px;margin:0 0 0 0 ;border:1px solid #000;outline:none;cursor: pointer;background:#fff;background-image: url(../img/ico/ico-portfolio-navigation-close.png); background-repeat:no-repeat;background-position:0 0;transition: all 0.2s ease;}
.bouton-close button:hover {z-index: 99;position:fixed;top:300px;right:115px;border-radius:44px;width:88px;height:88px;margin:0 0 0 0 ;border:1px solid #151515;outline:none;cursor: pointer;background:#111;background-image: url(../img/ico/ico-portfolio-navigation-close-negatif.png); background-repeat:no-repeat;background-position:0 0;}

/* Bruit	*/
#canvas {z-index: 50;position:fixed;width:100%;height:100%;top:0;opacity: 0.05;}
#canvas, #particle-canvas {pointer-events: none;} /* bouton close au-dessus du canvas */

/* Projet partie haute	*/
.projet-ia-container-top {z-index: 20;height:350px;margin:0 0 0 0;background:#000;background-image:/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */
repeating-linear-gradient(to bottom, #232323 0, #232323 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 25px),
repeating-linear-gradient(to bottom, #000 0, #000 1px, transparent 1px, transparent 5px);}
.fx-projet-ia-titre {}
  .projet-ia-titre {
    width:1000px;z-index: 20;position: absolute;display: inline-block;height:50px;margin:60px 0 0 0;padding: 50px 0 0 0;
    line-height:60px;font-size: 32px;transform: translate(-50%, -50%);left: 50%;text-align:center;color:#fff;font-weight:bold;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
.fx-projet-ia-description {}
  .projet-ia-description {z-index: 20;display:block;margin:0 auto 0 auto;padding: 132px 0 0 0;width:1175px;text-align:center;font-size: 15px;line-height:25px;color:#7f7f7f;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
  .projet-ia-description a {color:#CCC;text-decoration:underline;}
  .projet-ia-description a:hover {color:#FFF;text-decoration:underline;}


/* Projet partie basse	*/
.projet-ia-container-bottom {height:auto;margin:0 0 0 0;padding:0 0 100px 0;background-image: url(../img/bg/bg-portfolio-repeat-quadrillage.png);background-position: 0 -1px;}


/* Animation texte marque */
.projet-ia-container-bottom-spacer {height:50px;padding:0 0 0 0;margin:0 0 0 0;background:transparent;text-align:center;font-size: 16px;line-height:50px;color:#333;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}

    svg {display: block;font: 130px 'typoarchia';height: 47px;margin: 0 auto;background:#fff;width:100%;text-transform:uppercase;}
    .text-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 4px/*2px plus fin*/;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;}
    .text-copy:nth-child(1){stroke: #111;animation-delay: -1;}
    .text-copy:nth-child(2){stroke: #111;animation-delay: -2s;}
    .text-copy:nth-child(3){stroke: #111;animation-delay: -3s;}
    .text-copy:nth-child(4){stroke: #888;animation-delay: -4s;}
    .text-copy:nth-child(5){stroke: #111;animation-delay: -5s;}

    @keyframes stroke-offset{
      100% {stroke-dashoffset: -35%;}
    }

/* Visuel */
.projet-ia-visuel {margin:50px 22px 0 0;text-align:center;}
.projet-ia-visuel img {width:95%;height:95%;margin:0 0 0 0;} /*les visuels de la fiche portfolio restent toujours dans le cadre de la fenêtre*/

/* Particules */
#particle-canvas {
  transform: rotate(180deg);
  position:absolute;
  left:0;/*33%*/
  top:400px;
  width: 100%;
  height: 400px;
  vertical-align: middle;
  z-index:100;
  overflow-x: hidden;overflow-y: hidden;
}



/* >>	Scroll vers le haut de la page */
#scrolltop {z-index: 1000;display: flex;position: fixed;bottom: 0;right: 0;width: 51px;height: 51px;border:1px solid #000;outline:none;background-color: #000;cursor: pointer;opacity: 0;visibility: hidden;transition: all 0.2s ease;justify-content: center;align-items: center;color: white;user-select: none;}
#scrolltop.visible {opacity: 1;visibility: visible;}
#scrolltop:hover {background:#333;}



/* ==================================================================== */
/* °°° 	@MEDIAQUERIES - opti position header, briefing, logo  					*/
/* ==================================================================== */

@media screen and (min-width: 1600px) and (max-width: 1795px) {
  .logo-iafactory-noir {top:0;height:176px;width:952px;margin:0 0 0 750px;padding:34px 0 0 0;font-size:132px;letter-spacing : 13px;-webkit-text-stroke: 4px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;}
  .logo-iafactory-noir:hover {margin:0 0 0 734px;padding:34px 0 0 0;-webkit-text-stroke: 3px #FFF;text-shadow:-1px -1px 0 #FFF,1px -1px 0 #FFF,-1px  1px 0 #FFF,1px  1px 0 #FFF;}
  .logo-iafactory-noir-box {top:0;height:173px;width:1500px;margin:0 0 0 852px;padding:26px 0 0 0;-webkit-transform:skew(23deg);-moz-transform:skew(23deg);-o-transform:skew(23deg);}
  .bouton-briefer-noir {margin:50px 0 0 250px;padding:63px 53px 11px 61px;height:75px;width:235px;border:1px solid transparent;font-size:40px;letter-spacing : 4px;line-height:40px;background-image:url(../img/bg/bg-bouton-long-bas-gauche-blanc.png);background-position:-1px 99px;}
  .bouton-briefer-noir-animation {margin:50px 0 0 250px;height:151px;width:351px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);}
  .baseline-iafactory-noir {float:left;display:block;margin:184px 0 0 549px;padding:0 0 0 0;text-transform:lowercase;line-height:25px;font-size:14px;}

}


@media screen and (min-width: 1065px) and (max-width: 1600px) {
  .logo-iafactory-noir {top:-2px;height:86px;width:952px;margin:0 0 0 500px;padding:33px 0 0 0;font-size:72px;letter-spacing : 6px;-webkit-text-stroke: 2px #000;}
  .logo-iafactory-noir:hover {margin:0 0 0 492px;padding:33px 0 0 0;-webkit-text-stroke: 2px #FFF;}
  .logo-iafactory-noir-box {top:0;height:173px;width:1500px;margin:-50px 0 0 545px;padding:26px 0 0 0;}
  .bouton-briefer-noir {margin:0 0 0 150px;padding:67px 53px 11px 29px;height:71px;width:167px;font-size:30px;letter-spacing : 4px;line-height:40px;background-image:url(../img/bg/bg-bouton-long-bas-gauche-noir.png);background-position:-1px 99px;}
  .bouton-briefer-noir-animation {margin:0 0 0 150px;height:151px;width:251px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.0);}
   .bouton-briefer-noir-animation:hover {}
   .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after {top: 0;left: 0;right: 0;bottom: 0;content: "";box-shadow: inset 0 0 0 1px;}
   .bouton-briefer-noir-animation::before {}
   @keyframes clipMe {0%, 100% { clip: rect(0, 251px, 1px, 0); } 25% { clip: rect(0, 251px, 151px, 250px); } 50% { clip: rect(150px, 251px, 151px, 0); } 75% { clip: rect(0, 1px, 151px, 0);}}
  .baseline-iafactory-noir {margin:134px 0 0 299px;padding:0 0 0 0;line-height:25px;font-size:12px;}

}


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

  /* >>	Logo */
  .logo-iafactory-noir {top:-2px;height:86px;width:952px;margin:0 0 0 448px;padding:43px 0 0 0;font-size:60px;letter-spacing : 10px;-webkit-text-stroke: 2px #000;}
  .logo-iafactory-noir:hover {margin:0 0 0 440px;padding:43px 0 0 0;-webkit-text-stroke: 2px #FFF;}
  .logo-iafactory-noir-box {top:0;height:173px;width:1500px;margin:-50px 0 0 487px;padding:26px 0 0 0;}
  .scramble-logo {} /* classe spécifique pour toucher le logo avec effet scramble */
  .scramble-logo-noir {} /* classe spécifique pour toucher le logo avec effet scramble dans les fiches noires */
  .logo-aos-fx {}/*hack pour faire fonctionner l'animaton aos du logo sans dénaturer l'effet scramble*/

  .bouton-briefer-noir {margin:0 0 0 150px;padding:67px 43px 11px 29px;height:71px;width:127px;font-size:25px;letter-spacing : 2px;line-height:40px;background-image:url(../img/bg/bg-bouton-long-bas-gauche-noir.png);background-position:-1px 99px;}
  .bouton-briefer-noir:hover {background-position:-1px 99px;}
     .bouton-briefer-noir-animation {margin:0 0 0 150px;height:151px;width:201px;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.0);}
      .bouton-briefer-noir-animation:hover {}
      .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after {top: 0;left: 0;right: 0;bottom: 0;content: "";box-shadow: inset 0 0 0 1px;}
      .bouton-briefer-noir-animation::before {}
      @keyframes clipMe {0%, 100% { clip: rect(0, 201px, 1px, 0); } 25% { clip: rect(0, 201px, 151px, 200px); } 50% { clip: rect(150px, 201px, 151px, 0); } 75% { clip: rect(0, 1px, 151px, 0);}}

  .baseline-iafactory-noir {margin:134px 0 0 249px;padding:0 0 0 0;line-height:25px;font-size:12px;}



}






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

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


  /* Body  -------------------------------------------------- */
  body {width:100%;height: 100%;margin: 0;margin-top:-1px;margin-top:-1px;overflow-x:hidden;}

  /* >>	Typographie */

  .typo-archia {}
  .typo-briquete {}
  .typo-rintix {}
  .typo-italiabook {}


  /* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/
  #custom-cursor {font-size: 14px;padding: 6px 6px 6px 6px;}
  #custom-cursor.hidden {opacity: 0;}/* Masquer le curseur texte au contact des éléments cliquables */

  /* Curseur trainée pixel */
  .pixel {width:5px;height:5px;}
  @keyframes trail {0% {opacity: 1;transform: scale(1);} 100% {opacity: 0;transform: scale(0);}}


  /* GRILLE NOIRE
  ================================================================================================== */
  /* >>	Conteneur grille 100 % */
  .grille-meta-noir {}/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */

  /* >>	Conteneur grille repères */
  .grille-reperes-noir {width: 850px;}/*permet de gérer la répétition des repères */

  /* >>	Conteneur conteu 1500PX + PADDING 100PX */
  .conteneur-contenu-noir {width: 751px;padding:0 50px 0 50px;}/* englobe le site dans la limite de 1500 px et permet de gérer la répétition interne de l'arrière plan  */


  /* lOGO
  ================================================================================================== */
  /* voir alignement mediaqueries spécifique header */

  /* >>	Briefer fond noir */
  /* voir alignement mediaqueries spécifique header */


  /* >>	Baseline fond noir */
  /* voir alignement mediaqueries spécifique header */



  /* HEADER FOND NOIR
  ================================================================================================== */
  header {height:251px;}

  /* >>	Navigation fond noir */
  nav.navfichenoire {margin:0 0 0 0;padding:63px 53px 11px 61px;height:75px;width:35px;border:1px solid transparent;
    background-image:url(../img/ico/ico-menu-retour-blanc.png), url(../img/bg/bg-bouton-court-haut-droite-blanc.png);background-position:43px 60px, 99px -1px;}
  nav.navfichenoire:hover {border:1px solid transparent;background-position:33px 60px, 99px -1px;}

  /* >>	Briefer fond noir */
  /* bouton-briefer-noir - voir alignement mediaqueries spécifique header */


  /* >>	Ariane fond noir */
  .fil-ariane-noir {height: 25px;margin:-33px 0 0 0;padding: 0 0 0 0;font-size:12px;letter-spacing : 1px;}
  .fil-ariane-noir ul {padding:0 0 0 42px;}
  .fil-ariane-noir ul li {margin:0 0 0 0;padding:0 21px 0 8px;background-image:url(../img/ico/ico-chevron-ariane.png);background-position:right 4px;}
  .fil-ariane-noir ul li a {font-size:12px;letter-spacing : 1px;}
  .fil-ariane-noir ul li a:hover {padding:6px;}

  .fil-ariane-noir ul li.arianelast {background-image:none;}
  .fil-ariane-noir .nochevron {background-image:none;display:none;}/*dernier item pas visible sur petite résolution car il y a le titre*/



  /* Contenu ---------------------------------------------------------------------------------------- */
  /* Bouton fermer	*/
  .bouton-close button {top:200px;right:115px;border-radius:34px;width:68px;height:68px;margin:0 0 0 0 ;background-image: url(../img/ico/ico-portfolio-navigation-close.png);background-position:center center;}
  .bouton-close button:hover {top:200px;right:115px;border-radius:34px;width:68px;height:68px;margin:0 0 0 0 ;border:1px solid #151515;background-image: url(../img/ico/ico-portfolio-navigation-close-negatif.png);background-position:center center;}

  /* Bruit	*/
  #canvas {width:100%;height:100%;top:0;opacity: 0.05;}
  #canvas, #particle-canvas {} /* bouton close au-dessus du canvas */

  /* Projet partie haute	*/
  .projet-ia-container-top {height:300px;margin:0 0 0 0;background-image:/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */
  repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 50px),
  repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 25px),
  repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 5px);}
  .fx-projet-ia-titre {}
    .projet-ia-titre {width:700px;font-size:26px;margin:25px 0 0 0;padding:33px 0 0 0;line-height:45px}

  .fx-projet-ia-description {}
    .projet-ia-description {padding: 86px 0 0 0;width:770px;font-size: 13px;line-height:20px;}

    .projet-ia-description a {}
    .projet-ia-description a:hover {}



  /* Projet partie basse	*/
  .projet-ia-container-bottom {height:auto;margin:0 0 0 0;padding:0 0 100px 0;background-image: url(../img/bg/bg-portfolio-repeat-quadrillage.png);background-position: 0 -1px;}


  /* Animation texte marque */
  .projet-ia-container-bottom-spacer {height:50px;padding:0 0 0 0;margin:0 0 0 0;font-size: 16px;line-height:50px;}

      svg {font: 130px 'typoarchia';height: 47px;margin: 0 auto;width:100%;}
      .text-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 4px/*2px plus fin*/;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;}
      .text-copy:nth-child(1){stroke: #111;animation-delay: -1;}
      .text-copy:nth-child(2){stroke: #111;animation-delay: -2s;}
      .text-copy:nth-child(3){stroke: #111;animation-delay: -3s;}
      .text-copy:nth-child(4){stroke: #888;animation-delay: -4s;}
      .text-copy:nth-child(5){stroke: #111;animation-delay: -5s;}

      @keyframes stroke-offset{
        100% {stroke-dashoffset: -35%;}
      }

  /* Visuel */
  .projet-ia-visuel img {width:75%;height:75%;margin:0 0 0 0;}

  /* Particules */
  #particle-canvas {left:0;/*33%*/top:250px;width: 100%;height: 400px;overflow-x: hidden;overflow-y: hidden;}

  /* >>	Scroll vers le haut de la page */
  #scrolltop {z-index: 1000;display: flex;position: fixed;bottom: 0;right: 0;width: 51px;height: 51px;border:1px solid #000;outline:none;background-color: #000;cursor: pointer;opacity: 0;visibility: hidden;transition: all 0.2s ease;justify-content: center;align-items: center;color: white;user-select: none;}
  #scrolltop.visible {opacity: 1;visibility: visible;}
  #scrolltop:hover {background:#333;}


}




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

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


  /* Body  -------------------------------------------------- */
  body {width:100%;height: 100%;margin: 0;margin-top:-1px;margin-top:-1px;overflow-x:hidden;}

  /* >>	Typographie */

  .typo-archia {}
  .typo-briquete {}
  .typo-rintix {}
  .typo-italiabook {}


  /* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/
  #custom-cursor {font-size: 14px;padding: 6px 6px 6px 6px;}
  #custom-cursor.hidden {opacity: 0;}/* Masquer le curseur texte au contact des éléments cliquables */

  /* Curseur trainée pixel */
  .pixel {width:5px;height:5px;}
  @keyframes trail {0% {opacity: 1;transform: scale(1);} 100% {opacity: 0;transform: scale(0);}}


  /* GRILLE NOIRE
  ================================================================================================== */
  /* >>	Conteneur grille 100 % */
  .grille-meta-noir {}/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */

  /* >>	Conteneur grille repères */
  .grille-reperes-noir {width: 300px;}/*permet de gérer la répétition des repères */

  /* >>	Conteneur contenu noir 300PX */
  .conteneur-contenu-noir {width: 301px;padding:0 0 0 0;}/* englobe le site dans la limite de 300 px et permet de gérer la répétition interne de l'arrière plan  */


  /* lOGO
  ================================================================================================== */
  /* >>	Logo */
  /* voir alignement mediaqueries spécifique header */

  .logo-iafactory-noir {top:0;height:50px;width:250px;margin:0 0 0 65px;padding:3px 0 0 0;font-size:35px;letter-spacing : 5px;-webkit-text-stroke: 1px #000;}
  .logo-iafactory-noir:hover {margin:0 0 0 61px;padding:3px 0 0 0;-webkit-text-stroke: 1px #FFF;}
  .logo-iafactory-noir-box {top:0;height:73px;width:500px;margin:-50px 0 0 84px;padding:26px 0 0 0;}
  .scramble-logo {} /* classe spécifique pour toucher le logo avec effet scramble */
  .scramble-logo-noir {} /* classe spécifique pour toucher le logo avec effet scramble dans les fiches noires */
  .logo-aos-fx {}/*hack pour faire fonctionner l'animaton aos du logo sans dénaturer l'effet scramble*/


  /* HEADER FOND NOIR
  ================================================================================================== */
  header {height:151px;}

  /* >>	Navigation fond noir */
  nav.navfichenoire {margin:-50px 0 0 0;padding:13px 0 11px 0;height:75px;width:50px;border:1px solid transparent;background-image:url(../img/ico/ico-menu-retour-blanc-min.png);background-repeat:no-repeat;background-position:center 67px;}
  nav.navfichenoire:hover {border:1px solid transparent;background-image:url(../img/ico/ico-menu-retour-blanc-min.png);background-repeat:no-repeat;background-position:5px 67px;}

  /* >>	Briefer fond noir */
  .bouton-briefer-noir, .bouton-briefer-noir:hover, .bouton-briefer-noir-animation, .bouton-briefer-noir-animation:hover, .bouton-briefer-noir-animation::before, .bouton-briefer-noir-animation::after, .bouton-briefer-noir-animation::before
  {display:none;}

  /* >>	Baseline fond noir */
  .baseline-iafactory-noir {display:none;}


  /* >>	Ariane fond noir */
  .fil-ariane-noir {height: 25px;margin:25px 0 0 0;padding: 0 0 0 25px;font-size:12px;letter-spacing : 1px;}
  .fil-ariane-noir ul {padding:0 0 0 0;}
  .fil-ariane-noir ul li {margin:0 0 0 0;padding:0 21px 0 0;background-image:url(../img/ico/ico-chevron-ariane.png);background-position:right 4px;display:none;}
  .fil-ariane-noir ul li a {font-size:12px;letter-spacing : 1px;border-bottom:1px dotted #FFF;}
  .fil-ariane-noir ul li a:hover {padding:6px;}

  .fil-ariane-noir ul li.arianelast {background-image:url(../img/ico/ico-chevron-ariane.png);background-position:right 4px;display:block;}
  .fil-ariane-noir .nochevron {background-image:none;display:none;}/*dernier item pas visible sur petite résolution car il y a le titre*/



  /* Contenu ---------------------------------------------------------------------------------------- */
  /* Bouton fermer	*/
  .bouton-close button {top:100px;right:25px;border-radius:48px;width:48px;height:48px;margin:0 0 0 0 ;background-image: url(../img/ico/ico-portfolio-navigation-close-min.png);background-position:center center;}
  .bouton-close button:hover {top:100px;right:25px;border-radius:48px;width:48px;height:48px;margin:0 0 0 0 ;border:1px solid #151515;background-image: url(../img/ico/ico-portfolio-navigation-close-negatif-min.png);background-position:center center;}

  /* Bruit	*/
  #canvas {width:100%;height:100%;top:0;opacity: 0.05;}
  #canvas, #particle-canvas {} /* bouton close au-dessus du canvas */

  /* Projet partie haute	*/
  .projet-ia-container-top {height:auto;margin:0 0 0 0;background-image:/*permet de gérer l'arrière plan du site avec la répétition des lignes horizontales */
  repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 50px),
  repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 25px),
  repeating-linear-gradient(to bottom, #222 0, #000 1px, transparent 1px, transparent 5px);}
  .fx-projet-ia-titre {}
    .projet-ia-titre {width:250px;font-size:16px;margin:25px 0 0 0;padding:33px 25px 0 25px;line-height:25px;text-align:left}

  .fx-projet-ia-description {}
    .projet-ia-description {padding: 86px 25px 0 25px;width:250px;font-size: 11px;line-height:18px;text-align:left;}

    .projet-ia-description a {}
    .projet-ia-description a:hover {}



  /* Projet partie basse	*/
  .projet-ia-container-bottom {height:auto;width:301px;margin:0 auto 0 auto;padding:0 0 100px 0;background-image: url(../img/bg/bg-portfolio-repeat-quadrillage.png);background-position: 0 -1px;}


  /* Animation texte marque */
  .projet-ia-container-bottom-spacer {height:50px;padding:0 0 0 0;margin:0 0 0 0;font-size: 16px;line-height:50px;}

      svg {font: 130px 'typoarchia';height: 47px;margin: 0 auto;width:100%;}
      .text-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 4px/*2px plus fin*/;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;}
      .text-copy:nth-child(1){stroke: #111;animation-delay: -1;}
      .text-copy:nth-child(2){stroke: #111;animation-delay: -2s;}
      .text-copy:nth-child(3){stroke: #111;animation-delay: -3s;}
      .text-copy:nth-child(4){stroke: #888;animation-delay: -4s;}
      .text-copy:nth-child(5){stroke: #111;animation-delay: -5s;}

      @keyframes stroke-offset{
        100% {stroke-dashoffset: -35%;}
      }

  /* Visuel */
  .projet-ia-visuel img {width:75%;height:75%;margin:0 0 0 0;}

  /* Particules */
  #particle-canvas {left:0;/*33%*/top:250px;width: 100%;height: 400px;overflow-x: hidden;overflow-y: hidden;}

  /* >>	Scroll vers le haut de la page */
  #scrolltop {z-index: 1000;display: flex;position: fixed;bottom: 0;right: 0;width: 51px;height: 51px;border:1px solid #000;outline:none;background-color: #000;cursor: pointer;opacity: 0;visibility: hidden;transition: all 0.2s ease;justify-content: center;align-items: center;color: white;user-select: none;}
  #scrolltop.visible {opacity: 1;visibility: visible;}
  #scrolltop:hover {background:#333;}



}