/* ======================================== ACCUEIL.css ======================================== */
/* Présentation page d'accueil */
/* Septembre 2025 - IAFACTORY j.muckensturm


/* ACCUEIL
================================================================================================== */

/* Curseur */
/* Faux curseur texte : permet d'ajouter un texte devant et derrière le faux curseur "back" ou "brief"*/
#custom-cursorhp {z-index:7;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,1.0);padding: 6px 7px 6px 7px;border-radius: 4px;transform: translate(-50%, -50%);z-index:5;white-space: nowrap;transition: transform 0.1s ease; /* fluide au changement */}
#custom-cursorhp.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);}}


/* Hauteur de page pour gérer le background / min-height pour augmenter la taille du conteneur quand la page s'agrandit avec les expand, permettant d'afficher la grille en arrière plan */
.gabarit-accueil {height:1150px;}
h1:has(> .logo-iafactory) {all: unset;display:contents;} /* appliquer le h1 au logo sur la page d'accueil */



/* Animation logo IAFACTORY / SVG */
#logo-iaf-svg {cursor:pointer;float:right;display:block;z-index:9;position:absolute;top:0;height:176px;width:952px;margin:13px 0 0 759px;padding:24px 0 0 0;border-bottom:none;background:none;font-size:142px;letter-spacing : 13px;font-family: 'typorintix';color:#000;
background-image: url(../img/bg/bg-logo-iafactory-mediaquery1a.png);background-repeat:no-repeat;background-position:0 37px;
-webkit-text-stroke: 4px #FFF;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-iaf-svg:hover {margin:13px 0 0 732px;padding:24px 25px 0 0;z-index:999;border-bottom:none;background:none;color:#FFF;background-image: url(../img/bg/bg-logo-iafactory-mediaquery1a.png);background-repeat:no-repeat;background-position:0 37px;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;}

.text-copy {fill: none;stroke: none;stroke-dasharray: 6% 29%;stroke-width: 1.5px/*2px plus fin*/;stroke-dashoffset: 0%;animation: stroke-offset 5.5s infinite linear;}
.text-copy:nth-child(1){stroke: #7F7F7F;animation-delay: -1s;}
.text-copy:nth-child(2){stroke: #FFF;animation-delay: -2s;}
.text-copy:nth-child(3){stroke: #7F7F7F;animation-delay: -3s;}
.text-copy:nth-child(4){stroke: #FFF;animation-delay: -4s;}
.text-copy:nth-child(5){stroke: #7F7F7F;animation-delay: -5s;}

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


/* >>	Aimation - Baseline - liée à js accueil animation */
.baseline-iafactory-animation {position:absolute;float:left;display:block;margin:234px 0 0 749px;padding:0 0 0 0;line-height:25px;text-transform:lowercase;font-size:14px;color:#000;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
.hidden {opacity:0;}
.console-underscore {display:inline-block;position:relative;top:-0.14em;left:0;color: #d1d1d1;}
#text{background-image: linear-gradient(-90deg, #7f7f7f, #000);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}


.accueil-corps-box {position:absolute;width:1501px;margin:74px 0 0 0;}

  /* Colonne gauche */
  .accueil-sidebar-box {display:block;float:left;border-top:1px solid #000;height:450px;width:601px;margin:-404px 50px 0 0/*grille svg dessous*/;padding:0 0 0 0;background-image:url(../img/accueil/iafactory-showcase-footer-media1500.png);background-repeat:no-repeat;background-position:left 351px;}
    .accueil-sidebar-visuel img {margin:0 0 0 0;padding:0 0 0 0;}
    .accueil-sidebar-visuel {height: 400px;width: 601px;margin: -25px 0 0 0;padding: 0;text-align: center;background: none;/* Assure que le canvas remplit bien le conteneur */display: flex;justify-content: center;align-items: center;}
    .accueil-sidebar-visuel canvas {/* Le canvas doit avoir la même taille que le conteneur */width: 601px !important;height: 351px !important;/* Désactive le redimensionnement automatique */display: block;}

    /* Animation logo */
    .accueil-sidebar-defile {position:absolute;z-index:9;height:100px;margin:135px 0 0 160px;padding: 0 0 0 0;width: 381px;overflow: hidden;white-space: nowrap;box-sizing: border-box;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align:right;font-weight:normal;color:#000;}

    /*defile texte sans logo
    .accueil-sidebar-defile {z-index:10;height:50px;margin:59px 0 0 100px;padding: 0 0 0 0;width: 401px;overflow: hidden;white-space: nowrap;box-sizing: border-box;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:14px;letter-spacing :2px;text-align:right;font-weight:normal;color:#000;}*/
    .accueil-sidebar-defile span {display: inline-block;padding-left: 100%; /* démarre hors de l’écran à droite */animation: defile 30s linear infinite; /* défilement continu */}
    .accueil-sidebar-defile span a img {opacity:0.7;width:250px;height:76px;padding:11px 0 11px 0;margin-right:50px;border:1px dotted #5A5A5A;border-radius:2px;background:rgba(245, 245, 245, 0.0);text-transform:uppercase;-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
    .accueil-sidebar-defile span a img:hover {opacity:1.0;border:1px solid #333;background:rgba(0, 0, 0, 0.7);-webkit-transition: all 0.1s ease;-moz-transition: all 0.1s ease;-o-transition: all 0.1s ease;transition: all 0.1s ease;}
    .accueil-sidebar-defile:hover span {animation-play-state: paused;}
    @keyframes defile {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}


  /* Contenus corps */
  .accueil-contenu-box {display:block;float:left;height:450px;width:701px;margin:-403px 0 89px 99px/*grille svg dessous*/;padding:0 0 0 0;}


  /* Grille animée */
          path {stroke: rgba(119, 119, 119, 0.4);stroke-width: 0.005px;/*0.012px ORIGIN*/stroke-linecap: square;animation: draw 12s linear infinite;stroke-dasharray: 30 10;/*30 10 ORIGIN*/}
          @keyframes draw {80% {stroke: #333;}100% {stroke-dashoffset: 40;}}

          svg {position:relative;margin:0 0 0 0;padding:0 0 0 0;width: 1501px;height: 401px;}
          path:nth-child(2n) {animation-delay: 2s;animation-duration: 15s;}
          path:nth-child(3n) {animation-duration: 4s;animation-delay: -18s;}
          path:nth-child(4n) {animation-delay: 6s;}
          path:nth-child(5n) {animation-delay: 8s;animation-duration: 21s;}
          path:nth-child(6n) {animation-delay: 10s;animation-duration: 24s;}
          path:nth-child(7n) {animation-delay: 12s;animation-duration: 27s;}
          path:nth-child(8n) {animation-duration: 14s;animation-delay: 30s;}


  /* parallax */
  .wrap {display:none;}
  .inner {display:none;}
  .inner .js-parallax {display:none;}

  /* 404 - 403 - 500
  ================================================================================================== */

  .focus404 {position:absolute;display:block;float:left;height:300px;width:701px;margin:8px 0 0 0;padding:0 0 0 0;}
  .focus404-min {font-size:50px;}
  .focus404-big {margin:0 0 0 0;padding:6px 6px 6px 6px;line-height:40px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:72px;letter-spacing : 2px;text-align: left;font-weight:normal;color:#000;}
  .focus404-accroche {position:absolute;margin:225px 0 0 -2px;padding:0 0 0 0;line-height:35px;font-style: italic;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:22px;letter-spacing : 2px;text-align: left;font-weight:normal;color:#000;}


  /* Curseur images accueil avec trainée
  ================================================================================================== */

  /* conteneur */
  .hero-section {z-index:9/*au-dessus img, en-dessous menu*/;position: absolute;width: 100%;height: 100%;pointer-events: none;background:none;overflow: hidden;top:200px;margin:0 0 0 0;padding: 0;}

  /* trainée image */
  .trail-img {z-index: 12;border-radius:2px;border:1px solid #000;margin:0 20px 0 20px;position: absolute;object-fit: cover;transform-origin: center;pointer-events: none;will-change: transform;}
  .trail-image {z-index: 12;position: absolute;overflow: hidden;will-change: transform;transform-origin: center;backface-visibility: hidden;transform: translate3d(0, 0, 0);}
  .image-fragment {position: absolute;overflow: hidden;will-change: transform, clip-path;backface-visibility: hidden;transform: translate3d(0, 0, 0);}
  .fragment-bg {position: absolute;top: 0;left: 0; width: 100%;height: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;transform: translate3d(0, 0, 0);}

  /* indicateur vitesse - à garder pour faire fonctionner le curseur */
  .speed-indicator {display:none/* dans le html pour fonctionner mais pas afficher*/;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);color: var(--color-text);font-family: var(--font-mono);font-size: 10px;text-transform: uppercase;opacity: 0;transition: opacity 0.3s ease;z-index: 20;}

  /* Effet pulse */
  @keyframes pulse {
    0%,
    100% {opacity: 0.4;}
    50% {opacity: 0.2;}
  }


  /* Animation texte avancée couplée avec JS - voir 01-accueil-animation-texte.js
  ================================================================================================== */

  main {margin:15px 0 0 -2px;position: relative;width: 100%;max-width: 1000px;aspect-ratio: 16/9;backface-visibility: hidden;}

  .slide {margin:0 0 0 0;padding:0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:26px;letter-spacing : 2px;text-align: left;font-weight:normal;opacity: 0;position: absolute;display: flex;flex-direction: column/*dispoé verticalement de haut en bas*/;justify-content: left;}
  .slide .row {padding:0 0 0 0;margin:0 0 0 0;display: flex;justify-content: left;flex-wrap: nowrap;}
  .slide p {padding:0 0 0 0;margin:0 0 0 0;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:28px;letter-spacing : 2px;text-align: left;font-weight:normal;flex-shrink: 0;/*élément ne rétrécit jamaiis*/line-height: 50px;white-space: nowrap;}
  .slide p.center {padding:0 0 0 0;margin:0 0 0 0;}
  .features p {}

  .slide  p[data-color="1"] {color:#000;}
  .slide  p[data-color="2"] {color:#555;}
  .slide  p[data-color="3"] {color:#999;}


  /* Action
  ================================================================================================== */

  /* Bouton plan du site */
  .align-plan {clear:both;float:left;margin:-150px 0 0 0;width:300px;height:49px;}
  .plan-du-site {clear:both;display:block;margin:60px 0 0 0;padding:0 0 0 48px;width:151px;height:49px;border:1px solid transparent;line-height:51px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:2px;
      color:transparent;background-image:url(../img/bg/bg-bouton-court-bas-gauche-noir.png), url(../img/ico/ico-plan-du-site.png);background-repeat:no-repeat, no-repeat;background-position:-1px -2px, 80px 11px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
  .plan-du-site:hover {width:151px;color:#000;border:1px solid #000;background-position:-1px -2px, 80px -42px;}

  /* Bouton frontière visuelle */
  .align-frontiere {clear:both;float:left;margin:-250px 0 0 400px;width:300px;height:49px;}
  .frontiere-visuelle {clear:both;display:block;margin:60px 0 0 0;padding:0 0 0 48px;width:151px;height:49px;border:1px dotted transparent;line-height:51px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:2px;
      color:#000;background-image:url(../img/bg/bg-bouton-court-bas-droite-noir.png), url(../img/ico/ico-wireframe.png);background-repeat:no-repeat, no-repeat;background-position:148px -2px, 80px 52px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
  .frontiere-visuelle:hover {width:151px;border:1px dotted #000;color:transparent;background-position:148px -2px, 80px 6px;}

  /* Bouton action accueil */
  .align-action1 {clear:both;float:left;margin:-90px 0 0 750px;width:300px;height:49px;}
  .action-accueil1 {clear:both;display:block;margin:0 0 0 0;padding:0 0 0 48px;width:151px;height:49px;border:1px dotted transparent;border-radius:1px;line-height:51px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:2px;
      color:#FFF;background-image:url(../img/bg/bg-bouton-court-bas-droite-noir.png);background-repeat:no-repeat;background-position:248px -2px;background:rgba(0,0,0,1.0);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
  .action-accueil1:hover {width:151px;border:1px solid #000;color:#000;background-position:248px -2px;background:rgba(250,250,250,0.5);}

  .align-action2 {clear:both;float:left;margin:-90px 0 0 1000px;width:300px;height:49px;}
  .action-accueil2 {clear:both;display:block;margin:0 0 0 0;padding:0 0 0 48px;width:151px;height:49px;border:1px dotted #000;border-radius:1px;line-height:51px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:left;font-size:14px;letter-spacing:2px;
      color:#000;background-image:url(../img/bg/bg-bouton-court-bas-droite-noir.png);background-repeat:no-repeat;background-position:248px -2px;background:rgba(250,250,250,0.5);-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
  .action-accueil2:hover {width:151px;border:1px solid #000;color:#FFF;background-position:248px -2px;background:rgba(0,0,0,1.0);}


  /* Alignement footer */
  .footer-allusion-accueil {clear:both;float:left;display:block;width:350px;height:25px;margin:0 0 0 1152px;padding:0 0 0 0;font-size:14px;letter-spacing:2px;text-align:right;}
  .footer-allusion-404 {clear:both;float:left;display:block;width:350px;height:25px;margin:0 0 0 1152px;padding:0 0 0 0;font-size:14px;letter-spacing:2px;text-align:right;}

  /* Particules - accueil */
  #particle-canvas0 {pointer-events: none;
    transform: rotate(184deg);
    position:absolute;
    left:0px;
    top:-100px;
    width: 100%;
    height: 400px;
    vertical-align: middle;
    z-index:7;
    overflow-x: hidden;overflow-y: hidden;
  }

    /* ==================================================================== */
    /* °°° 	@MEDIAQUERIES - opti position logo  					*/
    /* ==================================================================== */

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

    /* animation logo - alignement */
    #logo-iaf-svg {top:0;height:176px;width:952px;margin:13px 0 0 709px;padding:24px 0 0 0;font-size:136px;letter-spacing : 10px;-webkit-text-stroke: 4px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image: url(../img/bg/bg-logo-iafactory-mediaquery1b.png);background-repeat:no-repeat;background-position:0 42px;}
    #logo-iaf-svg:hover {margin:13px 0 0 684px;padding:24px 25px 0 0;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image: url(../img/bg/bg-logo-iafactory-mediaquery1b.png);background-repeat:no-repeat;background-position:0 42px;}
    .text-copy {stroke-width: 1.5px;}

    /* animation baseline - alignement */
    .baseline-iafactory-animation {margin:234px 0 0 699px;padding:0 0 0 0;line-height:25px;font-size:14px;}

    /* animation accueil - alignement */
    main {margin:15px 0 0 -52px;max-width: 1000px;}
    .align-action1 {margin:-90px 0 0 700px;width:300px;height:49px;}
    .align-action2 {margin:-90px 0 0 950px;width:300px;height:49px;}

    /* 404 - 403 - 500 */
    .focus404 {height:300px;width:701px;margin:8px 0 0 -50px;padding:0 0 0 0;}
    .focus404-min {font-size:50px;}
    .focus404-big {margin:0 0 0 -50px;padding:6px 6px 6px 6px;line-height:40px;font-size:72px;letter-spacing : 2px;}
    .focus404-accroche {margin:225px 0 0 -52px;padding:0 0 0 0;line-height:35px;font-size:22px;letter-spacing : 2px;}

    }


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

    /* animation logo - alignement */
    #logo-iaf-svg {top:69px;height:86px;width:952px;margin:0 0 0 452px;padding:24px 0 0 0;font-size:72px;letter-spacing : 10px;-webkit-text-stroke: 2px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image: url(../img/bg/bg-logo-iafactory-mediaquery2a.png);background-repeat:no-repeat;background-position:0 27px;}
    #logo-iaf-svg:hover {margin:0 0 0 437px;padding:24px 0 0 0;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;}
    .text-copy {stroke-width: 1.5px;}

    /* animation baseline - alignement */
    .baseline-iafactory-animation {margin:234px 0 0 449px;padding:0 0 0 0;line-height:25px;font-size:12px;}

    /* animation accueil - alignement */
    main {margin:32px 0 0 -2px;width: 100%;max-width: 500px;backface-visibility: hidden;}
    .align-action1 {margin:-154px 0 0 450px;width:200px;height:49px;}
    .align-action2 {margin:-154px 0 0 600px;width:200px;height:49px;}

    /* 404 - 403 - 500 */
    .focus404 {height:300px;width:701px;margin:25px 0 0 0;padding:0 0 0 0;}
    .focus404-min {font-size:30px;}
    .focus404-big {margin:0 0 0 0;padding:6px 6px 6px 6px;line-height:14px;font-size:40px;letter-spacing : 2px;}
    .focus404-accroche {position:absolute;margin:125px 0 -200px -2px;padding:0 0 0 0;line-height:35px;font-size:22px;letter-spacing : 2px;}

    }


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

    /* animation logo - alignement */
    #logo-iaf-svg {top:69px;height:86px;width:952px;margin:0 0 0 404px;padding:24px 0 0 0;font-size:60px;letter-spacing : 10px;-webkit-text-stroke: 2px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image: url(../img/bg/bg-logo-iafactory-mediaquery2b.png);background-repeat:no-repeat;background-position:0 37px;}
    #logo-iaf-svg:hover {margin:0 0 0 392px;padding:24px 0 0 0;-webkit-text-stroke: 3px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image: url(../img/bg/bg-logo-iafactory-mediaquery2b.png);background-repeat:no-repeat;background-position:0 37px;}
    .text-copy {stroke-width: 1.5px;}

    /* animation baseline - alignement */
    .baseline-iafactory-animation {margin:234px 0 0 399px;padding:0 0 0 0;line-height:25px;font-size:12px;}

    /* animation accueil - alignement */
    main {margin:32px 0 0 -52px;width: 100%;max-width: 500px;backface-visibility: hidden;}
    .align-action1 {margin:-154px 0 0 400px;width:200px;height:49px;}
    .align-action2 {margin:-154px 0 0 550px;width:200px;height:49px;}

    /* 404 - 403 - 500 */
    .focus404 {height:300px;width:701px;margin:25px 0 0 -50px;padding:0 0 0 0;}
    .focus404-min {font-size:30px;}
    .focus404-big {margin:0 0 0 -50px;padding:6px 6px 6px 6px;line-height:14px;font-size:40px;letter-spacing : 2px;}
    .focus404-accroche {position:absolute;margin:125px 0 0 -52px;padding:0 0 0 0;line-height:35px;font-size:22px;letter-spacing : 2px;}
    .footer-allusion-404 {margin:158px 0 0 0;}

    }




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

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


    /* Hauteur de page pour gérer le background / min-height pour augmenter la taille du conteneur quand la page s'agrandit avec les expand, permettant d'afficher la grille en arrière plan */
    .gabarit-accueil {height:1150px;}
    h1:has(> .logo-iafactory) {all: unset;display:contents;} /* appliquer le h1 au logo sur la page d'accueil */

    /* Animation logo IAFACTORY / SVG */
    /*  logo-iaf-svg - voir alignement mediaqueries spécifique header */

    /* >>	Aimation - Baseline - liée à js accueil animation */
    /* Animation texte avancée couplée avec JS - voir 01-accueil-animation-texte.js
    ================================================================================================== */

    /*  baseline animation - voir alignement mediaqueries spécifique header */
    /* .baseline-iafactory-animation {margin:234px 0 0 449px;padding:0 0 0 0;line-height:25px;font-size:12px;} */
    .hidden {}
    .console-underscore {}
    #text{}


    .accueil-corps-box {width:751px;margin:24px 0 0 0;}

      /* Colonne gauche */
      .accueil-sidebar-box {height:250px;width:351px;margin:-404px 0 0 0;border-top:17px solid #000;padding:24px 0 0 0;background-image:url(../img/accueil/iafactory-showcase-footer-media750.png);background-position:0 205px;}
        .accueil-sidebar-visuel {height: 206px;width: 351px;margin: -25px 0 0 75px;padding: 0;}
        .accueil-sidebar-visuel canvas {/* Le canvas doit avoir la même taille que le conteneur */width: 351px !important;height: 206px !important;}
        #glitchCanvas {margin:0 0 0 -150px;width:351px;height:206px}/*modifie la taille du visuel accueil */

        /* Animation logo */
        .accueil-sidebar-defile {height:50px;margin:62px 0 0 0;padding: 0 0 0 0;width: 351px;overflow: hidden;white-space: nowrap; /* texte sur une seule ligne */font-size:14px;letter-spacing :2px;}
        .accueil-sidebar-defile span {padding-left: 100%;}
        .accueil-sidebar-defile span a img {width:125px;height:37.5px;margin-right:50px;line-height:25px;padding:4px 4px 2px 4px;}
        .accueil-sidebar-defile span a img:hover {}
        .accueil-sidebar-defile:hover span {animation-play-state: paused;}
        @keyframes defile {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}


      /* Contenus corps */
      .accueil-contenu-box {height:249px;width:349px;margin:-404px 0 -11px 450px;padding:0 0 0 0;border:1px solid transparent;}

      /* Grille animée */
              path {stroke: rgba(119, 119, 119, 0.4);stroke-width: 0.005px;/*0.012px ORIGIN*/stroke-linecap: square;animation: draw 12s linear infinite;stroke-dasharray: 30 10;/*30 10 ORIGIN*/}
              @keyframes draw {80% {stroke: #333;}100% {stroke-dashoffset: 40;}}

              svg {position:relative;margin:0 0 0 -50px;padding:0 0 0 0;width: 1501px;height: 401px;}
              path:nth-child(2n) {}
              path:nth-child(3n) {}
              path:nth-child(4n) {}
              path:nth-child(5n) {}
              path:nth-child(6n) {}
              path:nth-child(7n) {}
              path:nth-child(8n) {}


        /* parallax */
        .wrap {width:100%;height:450px;overflow:hidden;margin:250px auto 0 auto;}
        .inner {background: url(../img/parallax/mindmap-iafactory-parallax-tspt.png) repeat 0 0;background-size: 6000px;width: 400%; height: 400%;}


      /* 404 - 403 - 500
      ================================================================================================== */
      /*voir spécial alignement media query 1600 / 1000 / 800 ... */


      /* Curseur images accueil avec trainée
      ================================================================================================== */

      /* conteneur */
      .hero-section {width: 100%;height: 100%;overflow: hidden;top:200px;margin:0 0 0 0;padding: 0;}

      /* trainée image */
      .trail-img {width:75px;height:75px;margin:0 20px 0 20px;object-fit: cover;}
      .trail-image {overflow: hidden;}
      .image-fragment {overflow: hidden;}
      .fragment-bg {top: 0;left: 0; width: 100%;height: 100%;}

      /* indicateur vitesse - à garder pour faire fonctionner le curseur */
      .speed-indicator {display:none/* dans le html pour fonctionner mais pas afficher*/;}

      /* Effet pulse */
      @keyframes pulse {
        0%,
        100% {opacity: 0.6;}
        50% {opacity: 0.3;}
      }


      /* Animation texte avancée couplée avec JS - voir 01-accueil-animation-texte.js
      ================================================================================================== */

      /* main - voir alignement mediaqueries spécifique header */
      /* main {margin:32px 0 0 -2px;width: 100%;max-width: 500px;backface-visibility: hidden;} */


      .slide {margin:0 0 0 0;padding:0 0 0 0;font-size:15px;letter-spacing : 1px;}
      .slide .row {padding:0 0 0 0;margin:0 0 0 0;}
      .slide p {padding:0 0 0 0;margin:0 0 0 0;font-size:15px;letter-spacing : 1px;line-height: 25px;}
      .slide p.center {padding:0 0 0 0;margin:0 0 0 0;}
      .features p {}


      /* Action
      ================================================================================================== */

      /* Bouton plan du site */
      .align-plan {margin:-114px 0 0 0;width:225px;height:49px;}
      .plan-du-site {margin:60px 0 0 0;padding:0 0 0 23px;width:126px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;background-position:-1px -2px, 55px 11px;}
      .plan-du-site:hover {width:126px;background-position:-1px -2px, 55px 71px;}

      /* Bouton frontière visuelle */
      .align-frontiere {margin:-214px 0 0 200px;width:225px;height:49px;}
      .frontiere-visuelle {margin:60px 0 0 0;padding:0 0 0 23px;width:126px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;background-position:98px -2px, 55px 52px;}
      .frontiere-visuelle:hover {width:126px;background-position:98px -2px, 55px 6px;}

      /* Bouton action accueil */
      /*  align-action1 - voir alignement mediaqueries spécifique header */
      .action-accueil1 {margin:0 0 0 0;padding:0 0 0 0;width:149px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;text-align:center;background-position:248px -2px;}
      .action-accueil1:hover {width:149px;background-position:248px -2px;}

      /*  align-action2 - voir alignement mediaqueries spécifique header */
      .action-accueil2 {margin:0 0 0 0;padding:0 0 0 0;width:149px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;text-align:center;background-position:248px -2px;}
      .action-accueil2:hover {width:149px;background-position:248px -2px;}


      /* Alignement footer */
      .footer-allusion-accueil {width:350px;height:25px;margin:85px 0 0 449px;padding:0 0 0 0;font-size:13px;letter-spacing:2px;text-align:left;}
      .footer-allusion-404 {width:350px;height:25px;margin:85px 0 0 399px;padding:0 0 0 0;font-size:13px;letter-spacing:2px;text-align:right;}


      /* Particules - accueil */
      #particle-canvas0 {transform: rotate(184deg);left:0px;top:-100px;width: 100%;height: 300px;overflow-x: hidden;overflow-y: hidden;}

  }



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

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



    /* Hauteur de page pour gérer le background / min-height pour augmenter la taille du conteneur quand la page s'agrandit avec les expand, permettant d'afficher la grille en arrière plan */
    .gabarit-accueil {height:1150px;}

    h1:has(> .logo-iafactory) {all: unset;display:contents;} /* appliquer le h1 au logo sur la page d'accueil */

    /* Animation logo IAFACTORY / SVG */
    #logo-iaf-svg {top:48px;height:50px;width:230px;margin:0 0 0 45px;padding:6px 0 0 0;font-size:30px;letter-spacing:6px;
    -webkit-text-stroke: 1px #FFF;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image:none;}

    #logo-iaf-svg:hover {margin:0 0 0 38px;padding:6px 0 0 0;-webkit-text-stroke: 1px #000;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px  1px 0 #000,1px  1px 0 #000;background-image:none;}
    .text-copy {stroke-width: 1.5px;}

    /* >>	Aimation - Baseline - liée à js accueil animation */
    .baseline-iafactory {display:block !important;margin:109px 0 0 201px;padding:0 0 0 0;line-height:25px;font-size:12px;text-align:left;}
    .baseline-iafactory-animation {margin:159px 0 0 200px;padding:0 0 0 0;line-height:25px;font-size:12px;text-align:left;}

    .accueil-corps-box {width:301px;margin:24px 0 0 0;}

      /* Colonne gauche */
      .accueil-sidebar-box {height:250px;width:301px;margin:-404px 0 0 0;border-top:25px solid #000;padding:24px 0 0 0;background-image:url(../img/accueil/iafactory-showcase-footer-media750.png);background-position:0 175px;}
        .accueil-sidebar-visuel {display:block/*vs flex */;height: 177px;width: 201px;margin:-25px 0 0 75px;padding: 0;}
        .accueil-sidebar-visuel canvas {/* Le canvas doit avoir la même taille que le conteneur */width: 301px !important;height: 177px !important;}
        #glitchCanvas {margin:0 0 0 -75px;width:301px;height:177px}/*modifie la taille du visuel accueil */

        /* Animation logo */
        .accueil-sidebar-defile {height:50px;margin:27px 0 0 0;padding: 0 0 0 0;width: 301px;overflow: hidden;white-space: nowrap; /* texte sur une seule ligne */font-size:14px;letter-spacing :2px;}
        .accueil-sidebar-defile span {padding-left: 100%;}
        .accueil-sidebar-defile span a img {width:125px;height:37.5px;margin-right:50px;line-height:25px;padding:4px 4px 2px 4px;}
        .accueil-sidebar-defile span a img:hover {}
        .accueil-sidebar-defile:hover span {animation-play-state: paused;}
        @keyframes defile {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}


      /* Contenus corps */
      .accueil-contenu-box {height:249px;width:299px;margin:-154px 0 -11px 0;padding:0 0 0 0;border:1px solid transparent;}

      /* Grille animée */
              path {stroke: rgba(119, 119, 119, 0.4);stroke-width: 0.005px;/*0.012px ORIGIN*/stroke-linecap: square;animation: draw 12s linear infinite;stroke-dasharray: 30 10;/*30 10 ORIGIN*/}
              @keyframes draw {80% {stroke: #333;}100% {stroke-dashoffset: 40;}}

              svg {position:relative;margin:0 0 0 0;padding:0 0 0 0;width: 300px;height: 401px;}
              path:nth-child(2n) {}
              path:nth-child(3n) {}
              path:nth-child(4n) {}
              path:nth-child(5n) {}
              path:nth-child(6n) {}
              path:nth-child(7n) {}
              path:nth-child(8n) {}


        /* parallax */
        .wrap {width:100%;height:450px;overflow:hidden;margin:150px auto 0 auto;}
        .inner {background: url(../img/parallax/mindmap-iafactory-parallax-tspt.png) repeat 0 0;background-size: 6000px;width: 400%; height: 400%;}


      /* 404 - 403 - 500
      ================================================================================================== */

      .focus404 {height:300px;width:701px;margin:28px 0 0 25px;padding:0 0 0 0;}
      .focus404-min {font-size:25px;}
      .focus404-big {margin:9px 0 0 25px;padding:6px 6px 6px 6px;line-height:23px;font-size:30px;letter-spacing : 2px;}
      .focus404-accroche {position:absolute;margin:125px 0 0 25px;padding:0 0 0 0;line-height:35px;font-size:20px;letter-spacing : 2px;}


      /* Curseur images accueil avec trainée
      ================================================================================================== */

      /* conteneur */
      .hero-section {width: 100%;height: 100%;overflow: hidden;top:200px;margin:0 0 0 0;padding: 0;}

      /* trainée image */
      .trail-img {width:75px;height:75px;margin:0 20px 0 20px;object-fit: cover;}
      .trail-image {overflow: hidden;}
      .image-fragment {overflow: hidden;}
      .fragment-bg {top: 0;left: 0; width: 100%;height: 100%;}

      /* indicateur vitesse - à garder pour faire fonctionner le curseur */
      .speed-indicator {display:none/* dans le html pour fonctionner mais pas afficher*/;}

      /* Effet pulse */
      @keyframes pulse {
        0%,
        100% {opacity: 0.6;}
        50% {opacity: 0.3;}
      }


      /* Animation texte avancée couplée avec JS - voir 01-accueil-animation-texte.js
      ================================================================================================== */

      main {margin:34px 0 0 23px;width: 100%;max-width: 350px;backface-visibility: hidden;}


      .slide {margin:0 0 0 0;padding:0 0 0 0;font-size:11px;letter-spacing : 0;}
      .slide .row {padding:0 0 0 0;margin:0 0 0 0;}
      .slide p {padding:0 0 0 0;margin:0 0 0 0;font-size:11px;letter-spacing : 0;line-height: 25px;}
      .slide p.center {padding:0 0 0 0;margin:0 0 0 0;}
      .features p {}


      /* Action
      ================================================================================================== */

      /* Bouton plan du site */
      .align-plan {margin:110px 0 0 0;width:175px;height:49px;}
      .plan-du-site {margin:0 0 0 0;padding:0 0 0 23px;width:126px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;background-position:-1px -2px, 55px 11px;}
      .plan-du-site:hover {width:126px;background-position:-1px -2px, 55px 71px;}

      /* Bouton frontière visuelle */
      .align-frontiere {margin:0 0 0 150px;width:150px;height:49px;}
      .frontiere-visuelle {margin:-449px 0 0 0;padding:0 0 0 23px;width:126px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;background-position:98px -2px, 55px 52px;}
      .frontiere-visuelle:hover {border:1px dotted transparent;width:126px;background-position:98px -2px, 55px 6px;}

      /* Bouton action accueil */
      .align-action1 {margin:-198px 0 0 0;width:175px;height:49px;}
      .action-accueil1 {margin:0 0 0 0;padding:0 0 0 0;width:149px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;text-align:center;background-position:248px -2px;}
      .action-accueil1:hover {width:149px;background-position:248px -2px;}

      .align-action2 {margin:-198px 0 0 150px;width:150px;height:49px;}
      .action-accueil2 {margin:0 0 0 0;padding:0 0 0 0;width:149px;height:49px;line-height:51px;font-size:12px;letter-spacing:2px;text-align:center;background-position:248px -2px;}
      .action-accueil2:hover {width:149px;background-position:248px -2px;}


      /* Alignement footer */
      .footer-allusion-accueil {width:275px;height:25px;margin:17px 0 0 0;padding:0 0 0 25px;font-size:13px;letter-spacing:1px;text-align:left;}
      .footer-allusion-404 {width:300px;height:25px;margin:0 0 0 0;padding:0 0 0 25px;font-size:13px;letter-spacing:2px;text-align:left;}

      /* Particules - accueil */
      #particle-canvas0 {display:none;}

  }