.section{
    display: flex;
    justify-content: center;
    margin: 100px;
}

.vendu{
    position: absolute;
    top: 100px;
    left: 35%;
}


.warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  font-size: 2rem;
  font-weight: bold;
  color: white;

  z-index: 9999;

  animation: warningFlash 0.2s infinite, shake 0.05s infinite;
}

/* Flash violent */
@keyframes warningFlash {
  0% { background: red; color: white; }
  25% { background: black; color: yellow; }
  50% { background: white; color: red; }
  75% { background: blue; color: lime; }
  100% { background: magenta; color: cyan; }
}

/* Tremblement */
@keyframes shake {
  0% { transform: translate(0,0); }
  25% { transform: translate(10px,-10px); }
  50% { transform: translate(-10px,10px); }
  75% { transform: translate(10px,10px); }
  100% { transform: translate(0,0); }
}

/* House */
.section {
  display: inline-block;
  animation: chaos 0.8s linear infinite;
}

.section:active { /* mobile = pas de hover */
  animation-duration: 0.2s;
}

@keyframes chaos {
  0%   { transform: rotate(0deg) scale(1) translate(0,0); }
  25%  { transform: rotate(90deg) scale(1.3) translate(20px,-20px); }
  50%  { transform: rotate(180deg) scale(0.7) translate(-20px,20px); }
  75%  { transform: rotate(270deg) scale(1.5) translate(15px,15px); }
  100% { transform: rotate(360deg) scale(1) translate(0,0); }
}

/* Background */
body {
  animation: hell 1s infinite;
}

@keyframes hell {
  0% { background: red; }
  20% { background: lime; }
  40% { background: blue; }
  60% { background: yellow; }
  80% { background: magenta; }
  100% { background: cyan; }
}


/* Format telephone */
@media (max-width: 600px) {
  .section {
    animation-duration: 1s; /* un peu moins violent */
  }

  body {
    animation-duration: 2s; /* évite crise d’épilepsie 💀 */
  }
}