/* ======================================== FRONTIERE-ISOMETRIQUE.css ======================================== */
/* Structuration frontière tech */
/* Septembre 2025 - IAFACTORY j.muckensturm


/*  	STRUCTURE                									                        */
/* ==================================================================== */

/* Body  -------------------------------------------------- */
.gabarit-tableau-iso {min-height: 4445px; height: auto;background:url(../img/isometric-ia/bg-isometric-ia-mindmap.png);background-repeat:no-repeat;background-position:left 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 */


#iso {}
.iso-content {position:absolute;margin:-10px 0 0 -147px;z-index:1;position:relative;width: 100%;height: 100%;}
#iso h1 {transform: rotate(-30deg) skew(-23deg);z-index:6;position:absolute;margin:0 0 0 0;left:229px;top:-166px;padding:15px 0 15px 50px;text-align:left;font-family:'typorintix',"Trebuchet MS", Helvetica, sans-serif;font-size:46px;font-weight:900;color:#DFDFDF;}
.special-align-frontiere-aide {clear:both;margin:30px 0 0 0;} /* bien caler le footer sous le résumé dans les pages tableaux et liste */




#particle-canvas-iso {pointer-events: none;
  transform: rotate(-30deg);
  position:absolute;
  left:0;
  top:-200px;
  width: 100%;
  height: 500px;
  vertical-align: middle;
  z-index:7;
  overflow-x: hidden;overflow-y: hidden;
}




/* ISO GRID */
    path {
      stroke: rgba(5, 4, 60, 0.1);
      stroke-width: 0.004px;/*0.012px ORIGIN*/
      stroke-linecap: square;
      animation: draw 12s linear infinite;
      stroke-dasharray: 30 10;/*30 10 ORIGIN*/
    }
    @keyframes draw {
      80% {
        stroke: #a1a1a1;
      }
      100% {
        stroke-dashoffset: 90;/*40 ou 440 INTERESTING VALUE*/
      }
    }
    svg {position:absolute;
      margin:0 0 0 0;
      padding:0 0 0 0;
      width: 2000px;
      max-height: 1000px;
    }
    path:nth-child(2n) {
      animation-delay: -27s;
      animation-duration: 15.24s;
    }
    path:nth-child(3n) {
      animation-duration: 45s;
      animation-delay: -18s;
    }
    path:nth-child(4n) {
      animation-delay: -45s;
    }
    path:nth-child(5n) {
      animation-delay: -90s;
      animation-duration: 6s;
    }
    path:nth-child(6n) {
      animation-delay: -90s;
      animation-duration: 14.4s;
    }
    path:nth-child(7n) {
      animation-delay: -6s;
      animation-duration: 21.84s;
    }
    path:nth-child(8n) {
      animation-duration: 63.6s;
      animation-delay: -51.96s;
    }


/* ISO EXPERIMENT */
    #holder {top:55px;display:inline-block;margin-left:98px;width:1599px;height: 220vw;overflow: hidden;position: relative;background-image: url(../img/isometric-ia/bg-isometric-ia-quadrillage.png);background-repeat:repeat;background-position:0 0;background-color:rgba(250,250,250,0.8);}
    img{height:100%;  display: block;}
    p {font-weight: 100;font-size: 1.0vw;margin: 1vw;line-height: 120%;color: #000;}

    .grid{display:grid;width: 100vw;grid-template-columns: repeat(auto-fill, 5vw);grid-auto-rows: 5.7735vw;}
    .grid > div {background: rgba(235, 235, 235, 0.20);overflow: hidden;}

    #grid1 {position: absolute;transform-origin: 0 0;transform: skewY(-30deg);font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
    #grid2 {position: absolute;transform-origin: 100vw 0;transform: skewY(30deg);font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}
    #grid3 {position: absolute;width: 600vw;transform-origin: 500vw 0;transform: translatex(-500vw) rotatez(-60deg) skewY(30deg);font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;}

    #grid1 > div{border-top: #9F9F9F 1px solid;padding-top:2px;}
    #grid2 > div{border-bottom: #000 1px solid;padding-top:2px;}
    #grid2 > div > p{text-align: right;color: #9F9F9F;font-size: 0.85vw;}



/* GRID 1  */
    #grid1 > div:nth-child(1){border-top: none;border-left: #000 1px solid;grid-column: 5 / 2;grid-row: 3 / 4;}/*architecte*/
    #grid1 > div:nth-child(2){grid-column: 16 / 21;grid-row: 13;border-left:1px solid #000;}/*créativité*/
    #grid1 > div:nth-child(3){border-left: #000 1px solid;grid-column: 8 / 11;grid-row: 10 / 11;}/*nb*/
    #grid1 > div:nth-child(4){border-top: #000 1px solid;grid-column: 4 / 9;grid-row: 12 / 14;}/*sur-mesure*/
    #grid1 > div:nth-child(5){border-bottom: #000 1px solid;border-left: #000 1px solid;grid-column: 9 / 16;grid-row: 19;}/*méthode*/
    #grid1 > div:nth-child(6){border-top: #000 1px solid;border-right: #000 1px solid;grid-column: 2 / 9;grid-row: 20;}/*mind map*/
    #grid1 > div:nth-child(7){border-top: #000 1px solid;grid-column: 13 / 17;grid-row: 29/32;}/*steve jobs*/
    #grid1 > div:nth-child(8){border-top: #000 1px solid;grid-column: 3 / 6;grid-row: 26/28;}/*satisfaction*/



/* GRID 2  */
    #grid2 > div:nth-child(1){margin-top:-4px;grid-column: 8 / 12;grid-row: 8;border-top:1px solid #7F7F7F;border-bottom:none;}
    #grid2 > div:nth-child(2){grid-column: 13 / 15;grid-row: 7 / 11;}
    #grid2 > div:nth-child(3){margin-top:-4px;grid-column: 18 / 20;grid-row: 8;border-top:1px solid #000;border-bottom:none;}/*40000*/
    #grid2 > div:nth-child(4){margin-top:-10px;grid-column: 3 / 5;grid-row: 14 / 16;}/*adepte*/
    #grid2 > div:nth-child(5){grid-column: 16 / 19;grid-row: 12;}/*arbo*/
    #grid2 > div:nth-child(6){grid-column: 5 / 9;grid-row: 21;}/*sketch*/
    #grid2 > div:nth-child(7){grid-column: 12 / 16;grid-row: 21 / 23;}/*je modélise haute fidélité*/
    #grid2 > div:nth-child(8){grid-column: 9 / 12;grid-row: 23 / 30;}/*mise  en page isométrique*/
    #grid2 > div:nth-child(9){border-bottom:none;border-left: #000 1px solid;grid-column: 3 / 7;grid-row:  36/37;}/*précision*/
    #grid2 > div:nth-child(10){border-top: #000 1px solid;border-bottom:none;grid-column: 10 / 12;grid-row:  33 / 36;}/*multi support*/



/*IMAGES*/
    #grid3 > div:nth-child(1){grid-column: 104/109;grid-row: 8 / 13;}/*paco*/
    #grid3 > div:nth-child(2){grid-column: 93 / 102;grid-row: 5 / 11;}/*zoing lucien*/
    #grid3 > div:nth-child(3){grid-column: 96 / 103;grid-row: 15 / 19;}/*arbo*/
    #grid3 > div:nth-child(4){grid-column: 91 / 96;grid-row: 15 / 19;}/*sketch*/
    #grid3 > div:nth-child(5){grid-column: 91 / 97;grid-row: 22 / 26;}/*ds*/
    #grid3 > div:nth-child(9){grid-column: 82 / 89;grid-row: 21 / 26;}/*mind map black*/
    #grid3 > div:nth-child(6){grid-column: 73 / 84;grid-row: 34 / 39;}/*chanel mobile*/
    #grid3 > div:nth-child(7){grid-column: 62 / 71;grid-row: 39 / 44;}/*jm*/
    #grid3 > div:nth-child(8){grid-column: 71 / 77;grid-row: 39 / 44;}/*mobile paco*/
    #grid3 > div:nth-child(10){grid-column: 76 / 89;grid-row: 28 / 32;}/*secu routiere*/


/* >>	Scroll vers le haut de page */
#scrolliso {z-index: 1000;display: flex;position: fixed;bottom:0;right: 0;width: 51px;height: 51px;background-color: #000;background-image:url(../img/ico/ico-chevron-replier-blanc.png);background-repeat: no-repeat;background-position:center center;cursor: pointer;opacity: 0;visibility: hidden;transition: opacity 0.5s ease;justify-content: center;align-items: center;color: white;user-select: none;}
#scrolliso.visible {opacity: 1;visibility: visible;}


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


@media screen and (min-width: 875px) and (max-width: 1600px) {
.gabarit-tableau-iso {min-height: 2445px;}
#iso h1 {display:none;}
#holder {margin-left:98px;width:849px;height: 220vw;}
}


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


@media screen and (min-width:50px) and (max-width:874px){
.gabarit-tableau-iso {min-height: 1345px;}
#iso h1 {display:none;}
#holder {top:5px;margin-left: 49px;width:549px;height: 220vw;}
}