:root{
  --bg1:#f7f7f7;
  --bg2:#ffffff;
  --card:#ffffff;
  --text:#2a2a2a;
  --muted:#6b7280;
  --accent:#1B4F4F;       /* vert principal */
  --accent2:#2a7c7c;      /* dégradé */
  --soft:#E7F0F0;         /* fond de la barre */
  --radius:18px;
  --shadow:0 12px 30px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(60% 60% at 50% 20%, #FFF7E7 0%, #fafafa 45%, var(--bg2) 100%);
}

.wrap{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.card{
  width:min(92vw,720px);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(26px,3.2vw,46px);
  text-align:center;
}

.logo{
  width:min(180px,38vw);
  height:auto;
  display:block;
  margin:0 auto 16px auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}

.title{
  margin:0 0 10px;
  font-size:clamp(22px,3.2vw,30px);
  line-height:1.2;
}

.lead{
  margin:0 0 22px;
  color:var(--muted);
  font-size:clamp(15px,2.4vw,18px);
}

.progress{
  position:relative;
  height:14px;
  background:var(--soft);
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.progress__bar{
  width:0%;
  height:100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: inherit;
  animation: load 3s ease-in-out infinite;
}

.progress__bar::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.20) 25%, transparent 25%,
    transparent 50%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,.20) 75%, transparent 75%,
    transparent
  );
  background-size:28px 28px;
  animation: stripes 1s linear infinite;
  pointer-events:none;
}

.small{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
}

/* animations */
@keyframes load{
  0%{width:0%}
  55%{width:78%}
  100%{width:100%}
}

@keyframes stripes{
  0%{background-position:0 0}
  100%{background-position:28px 0}
}

/* accessibilité : réduit les anims */
@media (prefers-reduced-motion: reduce){
  .progress__bar{animation:none;width:70%}
  .progress__bar::after{animation:none}
}