@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("fonts/archivo-latin-wdth-italic.woff2") format("woff2");
}

:root {
  --fond: #140f33;
  --fond-2: #1f1850;
  --texte: #ece9ff;
  --doux: #a49cd9;
  --chantier: #ffd23f;
  --ombre: #ff4f9a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(120% 80% at 85% 0%, var(--fond-2) 0%, transparent 60%),
    var(--fond);
  color: var(--texte);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.chantier {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(20px, 7vw, 120px) 32px;
  max-width: 1200px;
}
.domaine {
  margin: 0 0 18px;
  color: var(--doux);
  font-size: 1rem;
  letter-spacing: 0.02em;
}
h1 {
  margin: 0;
  font-size: clamp(3.4rem, 13vw, 10rem);
  line-height: 0.92;
  font-weight: 900;
  font-style: italic;
  font-stretch: 125%;
  letter-spacing: -0.02em;
  color: var(--chantier);
  text-shadow: 0.05em 0.05em 0 var(--ombre);
}
.texte {
  margin: 28px 0 0;
  max-width: 34ch;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
}

/* Ruban de chantier : la seule décoration de la page. */
.ruban {
  height: 56px;
  margin: 0 -40px 48px;
  transform: rotate(-3deg);
  background: repeating-linear-gradient(
    -45deg,
    var(--chantier) 0 28px,
    var(--fond) 28px 56px
  );
  background-size: 79.2px 79.2px;
  border-block: 4px solid var(--chantier);
  animation: defile 3s linear infinite;
}
@keyframes defile {
  to { background-position: 79.2px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ruban { animation: none; }
}
@media (max-width: 600px) {
  .ruban { height: 40px; margin-bottom: 32px; }
}
a { color: var(--chantier); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--ombre); outline-offset: 3px; }