@font-face {
            font-family: 'Passion One';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('/fonts/PassionOne-Regular.ttf') format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        
        /* BLEU*/
      
        :root {
  --couleur-1: #006bf8;
  --couleur-2: #005bd4;
  --couleur-3: #2d87fc;
  --couleur-secondaire-1: #2d87fc;
  --couleur-secondaire-2: #2d87fc;
  --couleur-tertiaire-1: #d9e9ff;
  --couleur-tertiaire-2: #b5d5ff;
        }   
        
                /* ROUGE 
        :root {
  --couleur-1: #f80000;
  --couleur-2: #d40000;
  --couleur-3: #fc2d2d;
  --couleur-secondaire-1: #fc2d2d;
  --couleur-secondaire-2: #fc2d2d;
        }*/
        
                        /* GOLD 
        :root {
  --couleur-1: #FFD700;
  --couleur-2: #ffc800;
  --couleur-3: #d6a904;
  --couleur-secondaire-1: #d6a904;
  --couleur-secondaire-2: #d6a904;
        } */


body {
             margin: 0;
            height: 100vh;
            display: flex;
            font-family: 'Passion One', sans-serif;
        }
        .animated-background{
        background: linear-gradient(45deg, #ffffff, var(--couleur-2), var(--couleur-3));
            background-size: 200% 200%;
            animation: gradientAnimation 10s infinite;
        }

        .lower-third {
            background: linear-gradient(45deg, var(--couleur-1), var(--couleur-2), var(--couleur-3));
            background-size: 200% 200%;
            animation: gradientAnimation 10s infinite;
            color: white;
            bottom: 0;
            right: 0;
            border-right: 10px solid white; 
            font-family: 'Passion One', sans-serif;
            text-transform:uppercase;
            font-size:4.5vh;
            padding: 15px; /* Ajoutez du rembourrage pour un meilleur aspect */
            display: inline-block; /* Permet au bloc de s'ajuster à la taille du texte */ 
            width: 100%; /* Fixer la largeur à la taille du contenu */
            margin:25px;
            height: auto;
            overflow: hidden;
            transform: skew(-10deg);
            margin-bottom: 40px;

        }
        .lower-third-white {
            background: white;
            background-size: 200% 200%;
            animation: gradientAnimation 10s infinite;
            color: white;
            bottom: 0;
            right: 0;
            border-right: 10px solid white; 
            font-family: 'Passion One', sans-serif;
            text-transform:uppercase;
            font-size:4.5vh;
            padding: 15px; /* Ajoutez du rembourrage pour un meilleur aspect */
            display: inline-block; /* Permet au bloc de s'ajuster à la taille du texte */ 
            width: 100%; /* Fixer la largeur à la taille du contenu */
            margin:25px;
            height: auto;
            overflow: hidden;
            transform: skew(-10deg);
            margin-bottom: 40px;

        }
        
         .lower-third::before {
            content: '';
            position: absolute;
            top: 0%;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 80%);
            transform: translateX(-100%);
            animation: flareAnimation 20s infinite;
        }
        
        .libelle {
            transform: skew(10deg); /* Inverser le skew pour annuler l'effet sur le texte */
            margin-left:20px;
        }

        @keyframes flareAnimation {
            0% {
                transform: translateX(-100%);
            }
            50% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        .image-container { 
            width:100%;
            height: auto;
            overflow: hidden;
            align-items: center;
            justify-content: center;
        }

 @keyframes gradientAnimation {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
  .container {
            height:80px;
            width: 100%;
            display: flex;            
            align-self: flex-end; /* Alignement en bas de l'écran */

        }

        .red-div {
            width: 25%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .green-div {
            width: 70%;
            height: 20%;
            display: flex;
            align-items: center;
            justify-content: end;
            right:15px;
        }
        
        .panel-container {
            position: relative;
            width: 80%; /* Ajustez la largeur selon vos besoins */
            height: 50%; /* Ajustez la hauteur selon vos besoins */
            font-family: 'Passion One', sans-serif;
        }

        .panel {
            position: relative;
            font-size: 4em;
            font-family: 'Passion One', sans-serif;
            width: 100%;
            height: 120px; /* Hauteur fixe de la pancarte */
            border: 8px solid #ffffff;
            color: white;
            text-align: center;
            overflow: hidden; /* Masquer tout texte dépassant de la pancarte */
            transform: skew(-10deg); /* Incline le panneau */
        }

        .panel-pied {
            content: '';
            position: absolute;
            width: 20px; /* Largeur de la base du pied */
            height: 60px; /* Hauteur de la base du pied */
            background: linear-gradient(45deg, var(--couleur-1), var(--couleur-2), var(--couleur-3));
            top: 100%; /* Au bas du panneau */
            left: 50%;
            transform: translateX(-50%) skewX(-10deg); /* Incline la base du pied */
        }
        

/********************* 
* Animation NOMS
*********************/


@keyframes animation-4-stroke {
  0% {transform: translate3d(0, -100%, 0);}  
  2% {transform: translate3d(0, -100%, 0);}  
  10% {transform: translate3d(0, 0, 0);}
}

@keyframes animation-4-text {
  0% {transform: translate3d(0, -100%, 0);}  
  4% {transform: translate3d(0, -100%, 0);}  
  15% {transform: translate3d(0, 0, 0);}
}


#animation-4>div {
  display: inline-block;
  vertical-align: middle;
}

#animation-4>div>div {
  animation: 5s cubic-bezier(.19, .76, .32, 1) 2 alternate both;
}

#animation-4>div:first-child {
  font-size: 1.1em;
}

#animation-4>div:first-child>div {
      animation-name: animation-4-text;

}

#animation-4>div:last-child>div {
  width: .28em;
  height: 1em;
  background-color: var(--couleur-1);
  margin-left: 20px;
  margin-bottom:10px;
  animation-name: animation-4-stroke;

}

main {
  font-family: 'Passion One', sans-serif;
  text-transform: uppercase;
  line-height: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(25deg, #091521, #7a8699);
}

.animation {
  width: 100%;
  height: 4em;
  position: absolute;
  top:50px;
  left:50px;
}

.arimo {
  font-family: 'Passion One', sans-serif;
}

.white {
  color: white;
}

.light {
  font-weight: 300;
}

.bold {
  font-weight: 700;
}

.mask {
  overflow: hidden;
  position: relative;
}