/* CSS DOCUMENT */

#cadre
{
    width: 950px;
    height: 13  0px;
    background-color: var(--jaune);
    border: 5px solid var(--vert_fonce);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#cadre_haut
{
    display: flex;
    gap: 40px;
}

#texte_gauche
{
    transform: translateX(-75%);
}

#texte_droite
{
    transform: translateX(200px);
}

#texte_bas 
{
	transform: translateY(15px);
}

.texte
{
    font-size: 23px;
    font-weight: bold;
    color: var(--vert_fonce);
}

.zigzag-container
{
    position: absolute;
}

.zigzag
{
    position: absolute;
    display: flex;
    left: 80px;
    gap: 40px;
}

.zigzag:nth-child(2)
{
    transform: rotate(180deg);
}

.zigzag div
{
    position: relative;
    width: 60px;
    height: 60px;
    display: block;
    transform: rotate(315deg);
    overflow: hidden;
}

.zigzag div::before
{
    content: '';
    position: absolute;
    transform: translateX(-100%);   
    width: 100%;
    height: 7px;
    background: linear-gradient(90deg,transparent,var(--vert));
    animation: animateB 3s linear infinite;
    animation-delay: calc(1s * var(--i));
}

@keyframes animateB
{
    0%
      {
        transform: translateX(-100%)
      }
      
    25%,100%
      {
        transform: translateX(100%)
      }
}

.zigzag div::after
{
    content: '';
    position: absolute;
    right: 0;
    transform: translateY(-100%);   
    width: 7px;
    height: 100%;
    background: linear-gradient(180deg,transparent,var(--vert));
    animation: animateA 3s linear infinite;
    animation-delay: calc(1s * var(--i));
}

@keyframes animateA
{
    0%,12.5%
      {
        transform: translateY(-100%)
      }
      
    37.5%,100%
      {
        transform: translateY(100%)
      }
}

.zigzag div span
{
    position: absolute;
    inset: 5px;
    background: var(--jaune);
    display: flex;
    justify-content: center; 
    align-items: center;
    border: 3px solid var(--gris_fonce);   
}

.zigzag div span b
{
    color: var(--vert_fonce);
    transform: rotate(45deg);
    font-size: 30px;
    font-weight: bold;
}

.rotateY 
{
  display: inline-block;
  /*font-size: clamp(40px, 8vw, 120px);
  font-weight: bold;*/

  /* Inclinaison de base */
  transform: rotateZ(45deg);

  /* Pour la 3D */
  transform-style: preserve-3d;
  perspective: 800px;

  animation: spinY 7s linear infinite;
  animation-delay: var(--d);
}

@keyframes spinY {
  from {
    transform: rotateZ(45deg) rotateY(360deg);
  }
  to {
    transform: rotateZ(45deg) rotateY(0deg);
  }
}