/* Reset minimal */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* écran plein écran, jamais de scroll */
}

/*
  Conteneur plein écran. 100dvh (plutôt que 100vh) pour éviter que la barre
  d'adresse mobile ne décale/rogne le contenu à l'ouverture.
*/
.ecran-chargement {
  position: relative;
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calque {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fond {
  z-index: 0;
}

/*
  Bloc de contenu (logo + wordmark + barre) centré verticalement ET
  horizontalement dans le viewport. Le gap remplace les marges fixes pour que
  l'espacement s'adapte à toutes les hauteurs d'écran.
*/
.contenu {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5dvh, 56px);
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
}

/*
  Logo First Blade (icône + wordmark + sous-titre), image déjà recadrée au
  plus près de son contenu. Largeur fluide en clamp() pour ne jamais déborder
  ni rester minuscule sur grand écran ; height: auto préserve son ratio.
*/
.visuel {
  display: block;
  width: clamp(200px, 60vw, 460px);
  max-width: 100%;
  height: auto;
}

.zone-ui {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: clamp(220px, 34vw, 460px);
  max-width: 100%;
  padding: 0 16px;

  /* Couleur commune à la barre et au texte (voir currentColor plus bas) */
  color: #000000;
}

.barre-track {
  width: 100%;
  height: clamp(12px, 1.6vw, 20px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.barre-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}

/* Pourcentage affiché au-dessus de la barre, en Montserrat Regular
   (à distinguer du texte "Loading..." qui reste en Bold en dessous) */
.pourcentage {
  margin: 0;
  color: inherit;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

.texte-chargement {
  margin: 0;
  color: inherit;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

/* Tablette : resserre un peu le bloc de contenu */
@media (max-width: 768px) {
  .visuel {
    width: clamp(200px, 65vw, 380px);
  }

  .zone-ui {
    width: clamp(220px, 60vw, 380px);
  }
}

/* Mobile : priorise la largeur d'écran, autorise le sous-titre à revenir à
   la ligne s'il ne tient vraiment pas sur une seule ligne */
@media (max-width: 480px) {
  .contenu {
    gap: clamp(16px, 4dvh, 40px);
    padding: 0 24px;
  }

  .visuel {
    width: clamp(180px, 78vw, 320px);
  }

  .zone-ui {
    width: 100%;
    gap: 10px;
  }

  .pourcentage,
  .texte-chargement {
    white-space: normal;
  }
}