:root{
  --jaune:#fcb900;
  --anthracite:#333333;
  --teal:#00897c;
  --encre:#1c1c1c;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --titre:ui-rounded,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--jaune);
  color:var(--encre);
  font:400 1.05rem/1.6 var(--sans);
  display:grid;
  place-items:center;
  padding:2rem;
  overflow:hidden;
  position:relative;
}

/* Triangles décoratifs, à l'identique de l'esprit du site */
.triangle{
  position:absolute;
  fill:rgba(255,255,255,.25);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));
}
.triangle--1{top:8%;right:10%;width:9rem;transform:rotate(12deg)}
.triangle--2{bottom:10%;left:8%;width:6rem;transform:rotate(-18deg)}
.triangle--3{bottom:18%;right:18%;width:3.5rem;transform:rotate(30deg)}

main{
  position:relative;
  z-index:1;
  max-width:34rem;
  text-align:center;
  display:grid;
  justify-items:center;
  gap:1.75rem;
}

.oiseau{width:6rem;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2))}

h1{
  margin:0;
  font:400 clamp(1.75rem,1rem + 3vw,2.75rem)/1.15 var(--titre);
  letter-spacing:-.01em;
  color:var(--anthracite);
}

p{margin:0;color:rgba(0,0,0,.72)}

.contact{
  margin-top:.5rem;
  display:grid;
  gap:.4rem;
  font-weight:600;
}
.contact a{color:var(--anthracite);text-decoration:underline;text-underline-offset:.2em}
.contact a:hover{color:var(--teal)}

.marque{
  margin-top:1rem;
  font:600 .8rem/1 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
}
.mentions{margin-top:-1rem;font-size:.8rem}
.mentions a{color:rgba(0,0,0,.55);text-decoration:underline;text-underline-offset:.2em}
.mentions a:hover{color:var(--anthracite)}

@media (prefers-reduced-motion:no-preference){
  .oiseau{animation:flotter 3.5s ease-in-out infinite}
}
@keyframes flotter{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-.6rem)}
}