/* ==========================================================================
   Darkpool : les styles de l'app
   Les couleurs, polices et formes viennent de la DA (dossier da/).

   Toutes les cotes sont prises sur les maquettes de Site dev/Maquettes/C-gravure-editoriale/,
   dessinées pour un téléphone de 384 px de large. --u vaut 1 px de maquette : l'app
   garde ses proportions sur tous les téléphones.
   ========================================================================== */

html {
  container-type: inline-size;   /* cqw : la largeur sans la barre de défilement */
  overflow-x: clip;              /* clip et pas hidden, sinon le sticky casse */
  background: var(--dp-fond);
}

body {
  --u: calc(100cqw / 384);
  margin: 0;
  min-height: 100dvh;
  background: var(--dp-fond);
  color: var(--dp-texte);
  font-family: var(--dp-police-texte);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

/* ------------------------------------------------------------ écran de lancement
   La gravure du billet occupe tout le haut, le pied noir porte le statut et la barre.
   Le globe et le nom sont centrés sur la hauteur de l'écran. */
.lancement {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--dp-fond);
  overflow: hidden;
}

.lancement__fond {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 97.25 * var(--u));
  object-fit: cover;
  object-position: 50% 40%;
}

.lancement__marque {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 88.25 * var(--u));   /* le haut du globe : 255,75 sur 688 */
}

.lancement__globe {
  width: calc(102.25 * var(--u));
  height: calc(102.25 * var(--u));
  margin-left: calc(141 * var(--u));
}

/* Le nom en IBM Plex Sans très espacé (le SVG de la marque est trop espacé pour cet écran). */
.lancement__nom {
  position: absolute;
  top: calc(121.72 * var(--u));
  left: calc(77.9 * var(--u));
  margin: 0;
  font-family: var(--dp-police-texte);
  font-weight: 350;
  font-size: calc(35.46 * var(--u));
  line-height: 1;
  letter-spacing: calc(6.9 * var(--u));
  white-space: nowrap;
  color: var(--dp-texte);
}

.lancement__pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(97.25 * var(--u));
  background: var(--dp-fond);
}

.lancement__statut {
  position: absolute;
  top: calc(30 * var(--u));
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--dp-police-chiffres);
  font-weight: 400;
  font-size: calc(9.3 * var(--u));
  line-height: 1;
  letter-spacing: calc(-0.16 * var(--u));
  color: var(--dp-texte-3);
}

/* La barre : un rail fin entre deux petits carrés, comme un curseur de terminal. */
.lancement__barre {
  position: absolute;
  top: calc(51.35 * var(--u));
  left: calc(75.25 * var(--u));
  width: calc(233.5 * var(--u));
  height: calc(2.25 * var(--u));
  background: #3C3C3C;
}

.lancement__barre::before,
.lancement__barre::after {
  content: "";
  position: absolute;
  top: calc(-1.125 * var(--u));
  width: calc(4.25 * var(--u));
  height: calc(4.5 * var(--u));
}
.lancement__barre::before { left: 0; background: #A1A1A1; }
.lancement__barre::after  { right: 0; background: #717171; }

.lancement__rempli {
  position: absolute;
  inset: 0 auto 0 0;
  width: 76.7%;
  background: #A0A1A0;
  transition: width .4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lancement__rempli { transition: none; }
}