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


/* PRECHARGEMENT
================================================================================================== */
/* curseur - force le curseur "normal" pendant le préchargement pour éviter conflit visuel avec le curseur personnalisé de la page d'accueil*/
.preloader, .preloader * {cursor: default !important;}





/* grille */
    .preloader {z-index: 1000;position: fixed;inset: 0;/* top:0; right:0; bottom:0; left:0 */width: 100vw;height: 100vh;/* couvre exactement la fenêtre */overflow-x: hidden;overflow-y: hidden;box-sizing: border-box;
      background-color:#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, #333 0, #333 1px, transparent 1px, transparent 50px),
      repeating-linear-gradient(to bottom, #222 0, #222 1px, transparent 1px, transparent 25px),
      repeating-linear-gradient(to bottom, #222 0, #222 1px, transparent 1px, transparent 5px);}
    .chargement-reperes {z-index:1;width: 1605px;margin: auto;background:/*permet de gérer la répétition des repères */
      repeating-linear-gradient(to bottom, #555 0, #555 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #333 0, #333 1px, transparent 1px, transparent 10px);}
    .chargement-contenu {z-index:1;height:100vh;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, #333 0, #333 1px, transparent 1px, transparent 50px), repeating-linear-gradient(to bottom, #333 0, #333 1px, transparent 1px, transparent 50px),/* Lignes de 50px */
      repeating-linear-gradient(to right, #222 0, #222 1px, transparent 1px, transparent 25px), repeating-linear-gradient(to bottom, #222 0, #222 1px, transparent 1px, transparent 25px),/* Lignes de 25px */
      repeating-linear-gradient(to right, #222 0, #222 1px, transparent 1px, transparent 5px), repeating-linear-gradient(to bottom, #222 0, #222 1px, transparent 1px, transparent 5px);}/* Lignes de 5px */

/* preloader - empêcher - bloquer le scroll durant l'animation */
html.lock-scroll {overflow-y: hidden;overflow-x: hidden;scrollbar-gutter: stable; /* évite le saut de mise en page quand la scrollbar disparaît */}

/* preloader */
.loader-container {background:none;position:absolute;width: 1599px;height: 397px;margin:1px 0 0 -50px;}
.counter-container {position:absolute;width:1599px;height:399px;margin:0 0 0 0;}
.counter {display:block;margin:119px 0 0 0;text-align:center;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:70px;letter-spacing : 2px;font-weight:normal;color:#FFF;opacity: 0.25/*opacité 0.25 au départ puis vers 1 via JS*/;transform: translateY(20px);}
.progress-bar {position: absolute;margin:599px 0 0 500px;width: 501px;height: 3px;background-color:rgba(119, 119, 119, 0.7);overflow: hidden;}
.progress-bar-fill {height:3px;width: 0;background-color: #FFF;}
.skip-intro {cursor:pointer!important;z-index:99;position:absolute;display:block;margin:700px 0 0 650px;padding:0 0 0 0;width:199px;height:48px;border:1px solid #DFDFDF;border-radius:1px;line-height:51px;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;text-align:center;font-size:14px;letter-spacing:2px;color:#DFDFDF;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.skip-intro:hover {width:201px;border:1px solid #DFDFDF;color:#000;background:#DFDFDF;}

.lines-container {position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.line {position: absolute;background-color:#777;opacity: 0.75;}
.horizontal-line {transform: scaleX(0);transform-origin: left;height: 1px;width: 100%;background: linear-gradient(to right,rgba(119,119,119,0.2) 0%,/* début 20% */rgba(255,255,255,1) 50%,/* milieu 100% */rgba(119,119,119,0.2) 100%/* fin 20% */);}
.vertical-line {transform: scaleY(0);transform-origin: top;width: 1px;height: 100%;background: linear-gradient(to bottom, rgba(119,119,119,0.2) 0%, rgba(255,255,255,1) 50%, rgba(119,119,119,0.2));}
.dot {position: absolute;margin:-3px 0 0 -3px;width: 7px;height: 7px;border-radius: 0;background-color:#FFF;opacity: 0;}
.message {position: absolute;width:500px;margin:458px 0 0 500px;text-transform:lowercase;font-family: 'typoarchia', "Trebuchet MS", Helvetica, sans-serif;font-size:50px;letter-spacing : 2px;text-align:center;font-weight:normal;color:#FFF;opacity: 0;}
.particles-container {position:absolute;width: 100%;height:100%;top:0;left:0;pointer-events: none;}
.particle {position: absolute;width: 4px;height: 4px;border-radius:0;background:#7F7F7F;border:1px solid rgba(119, 119, 119, 0.50);opacity: 0;}



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

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


  /* PRECHARGEMENT
  ================================================================================================== */
  /* grille */
      .preloader {}
      .chargement-reperes {width: 855px;}
      .chargement-contenu {width: 751px;padding:0 50px 0 50px;}

  /* preloader - empêcher - bloquer le scroll durant l'animation */
  html.lock-scroll {/* évite le saut de mise en page quand la scrollbar disparaît */}

  /* preloader */
  .loader-container {width: 1599px;height: 397px;margin:1px 0 0 -425px;}
  .counter-container {width:1599px;height:399px;margin:0 0 0 0;}
  .counter {margin:130px 0 0 0;font-size:60px;letter-spacing : 2px;}
  .progress-bar {margin:499px 0 0 150px;width: 451px;height: 3px;}
  .progress-bar-fill {height:3px;width: 0;}
  .skip-intro {margin:600px 0 0 300px;padding:0 0 0 0;width:149px;height:48px;font-size:13px;letter-spacing:2px;}
  .skip-intro:hover {width:149px;}

  .lines-container {top: 0;left: 0;}
  .line {}
  .horizontal-line {}
  .vertical-line {}
  .dot {margin:-3px 0 0 -3px;width: 7px;height: 7px;}
  .message {width:449px;margin:421px 0 0 150px;font-size:35px;letter-spacing : 2px;}
  .particles-container {top:0;left:0;}
  .particle {width: 4px;height: 4px;border-radius:0;}



}



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


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

  /* PRECHARGEMENT
  ================================================================================================== */
  /* grille */
      .preloader {}
      .chargement-reperes {width: 295px;}
      .chargement-contenu {width: 301px;padding:0 0 0 0;}

  /* preloader - empêcher - bloquer le scroll durant l'animation */
  html.lock-scroll {/* évite le saut de mise en page quand la scrollbar disparaît */}

  /* preloader */
  .loader-container {width: 599px;height: 297px;margin:1px 0 0 -150px;}
  .counter-container {width:599px;height:299px;margin:0 0 0 0;}
  .counter {margin:96px 0 0 0;font-size:40px;letter-spacing : 2px;}
  .progress-bar {margin:399px 0 0 50px;width: 201px;height: 3px;}
  .progress-bar-fill {height:3px;width: 0;}
  .skip-intro {margin:450px 0 0 50px;padding:0 0 0 0;width:199px;height:48px;font-size:12px;letter-spacing:2px;}
  .skip-intro:hover {width:199px;}

  .lines-container {top: 0;left: 0;}
  .line {}
  .horizontal-line {}
  .vertical-line {}
  .dot {margin:-3px 0 0 -3px;width: 7px;height: 7px;}
  .message {width:299px;margin:331px 0 0 0;font-size:22px;letter-spacing : 2px;}
  .particles-container {top:0;left:0;}
  .particle {width: 3px;height: 3px;border-radius:0;}



}