body{
	background: #000;
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

@font-face {
  font-family: 'FreaksOfNature';
  src: url('../Fonts/FreaksOfNature.ttf') format('truetype');
}

.text1 {
  font-family: 'FreaksOfNature', sans-serif;
}

.container{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.container span{
	text-transform: uppercase;
	display: block;
}
.text1{
	color: white;
	font-size: 45px;
	font-weight: 700;
	letter-spacing: 8px;
	margin-bottom: 20px;
	background: black;
	position: relative;
	animation: text 3s 1;
}
.text2{
	font-size: 25px;
	color: #8c14fc;
}@keyframes text{
	0%{
		color: black;
		margin-bottom: -40px;
	}
30%{
		letter-spacing: 25px;
	margin-bottom: -40px;
	}
	85%{
		letter-spacing: 8px;
		margin-bottom: -40px;
	}
}

.logo-container,
h1,
h3 {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* aligne à gauche */
  gap: 10px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  color: white; /* pour que le texte ressorte sur le fond sombre */
}

img {
max-height: 90px; 
max-width: 85px; 
/*transition: transform 0.4s ease;*/
animation: pulse 2s infinite ease-in-out;
}

img:hover {
  transform: scale(1.1) rotate(5deg);
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}


.animated-text span {
  text-transform: uppercase;
  display: block;
}

.sections-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap; /* utile pour les petits écrans */
  margin-top: 650px;
  width: 400px;
  /* background-color: rgba(255, 255, 255, 0.4); /* blanc semi-transparent */
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */    /* ombre légère */
}

.section {
  flex: 1;
  min-width: 250px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  /*background-color: rgba(255, 255, 255, 0.4); /* blanc semi-transparent */
 /*  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */    /* ombre légère */

}

.logo_AOZ {
  max-width: 150px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
  
  .video-container {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
  }

  .video-container img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .video-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .video-container:hover .video-title {
    opacity: 1;
  }