/* TéléPonts – Loading screen
   (standalone, does not depend on the template CSS) */

:root{
  --tp-blue:#1080D0;
  --tp-blue-2:#60C090;
  --tp-ink:#071018;
  --tp-paper:#F4FAFF;
}

/* Prevent scroll during initial load */
body.tp-is-loading{
  overflow:hidden !important;
}

/* Overlay */
.tp-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  background: var(--tp-paper);
  color: var(--tp-ink);
  overflow:hidden;
  transition: opacity 700ms ease, transform 900ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

/* Failsafe: hide loader after ~10s even if JS fails */
.tp-loader{
  animation: tp-failsafe 0s linear 10s forwards;
}
@keyframes tp-failsafe{
  to{
    opacity:0;
    pointer-events:none;
    transform: translateY(-12px);
  }
}

/* Atmosphere */
.tp-loader__bg{
  position:absolute;
  inset:-20%;
  pointer-events:none;
}
.tp-loader__bg::before,
.tp-loader__bg::after{
  content:"";
  position:absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius:999px;
  filter: blur(30px);
  opacity:.55;
  background: radial-gradient(circle at 30% 30%, rgba(5,73,113,.22), transparent 62%),
              radial-gradient(circle at 70% 70%, rgba(10,109,168,.14), transparent 60%);
}
.tp-loader__bg::before{
  top:-10%;
  left:-10%;
}
.tp-loader__bg::after{
  bottom:-15%;
  right:-10%;
  opacity:.35;
}

.tp-loader__grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    linear-gradient(to right, rgba(5,73,113,.10) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(to bottom, rgba(5,73,113,.06) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.85), transparent 65%);
}

.tp-loader__noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.tp-loader__inner{
  position:relative;
  width:min(680px, calc(100vw - 56px));
  text-align:center;
  display:grid;
  gap:14px;
  padding: 30px 18px 24px;
}

.tp-loader__logo{
  width:min(160px, 42vw);
  margin:0 auto;
  transform: translateY(10px);
  opacity:0;
  animation: tp-rise .75s cubic-bezier(.16,1,.3,1) .05s forwards;
}
.tp-loader__logo svg{width:100%; height:auto; display:block;}

.tp-loader__logoImg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 40px rgba(5,73,113,.18));}

.tp-loader__word{
  font-family: "Monument Grotesk","Standerd","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: clamp(46px, 7.2vw, 92px);
  line-height: .92;
  margin: 0;
}

.tp-loader__word .tp-char{
  display:inline-block;
  transform: translateY(110%);
  opacity:0;
  animation: tp-char-in .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * 42ms + 160ms);
}
@keyframes tp-char-in{
  to{
    transform: translateY(0);
    opacity:1;
  }
}

.tp-loader__meta{
  font-family: "Monument Grotesk","Inter",system-ui,sans-serif;
  font-size: 14px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: rgba(7,16,24,.72);
}

.tp-loader__bar{
  height: 2px;
  width: min(520px, 92%);
  margin: 10px auto 0;
  background: rgba(5,73,113,.18);
  border-radius:999px;
  overflow:hidden;
  position:relative;
}
.tp-loader__bar span{
  position:absolute;
  inset:0;
  transform-origin:left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--tp-blue), var(--tp-blue-2));
  border-radius:999px;
  will-change: transform;
}

.tp-loader__percent{
  margin-top: 2px;
  font-family: "Monument Grotesk","Inter",system-ui,sans-serif;
  font-size: 12px;
  color: rgba(7,16,24,.65);
}

/* Exit */
.tp-loader.tp-loader--done{
  opacity:0;
  pointer-events:none;
  transform: translateY(-12px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tp-loader__logo,
  .tp-loader__word .tp-char{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .tp-loader{ transition: opacity 180ms ease; }
}
@keyframes tp-rise{
  to{ transform: translateY(0); opacity:1; }
}