@font-face {
  font-family: 'Leixo';
  src: url('../fonts/LEIXO-DEMO.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

/* BASE */
body{
  font-family:'Leixo',sans-serif;
  background:#000;
  color:#fff;
  overflow:hidden;
  line-height:1.4;
}

/* === BACKGROUNDS === */
.backgrounds{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.backgrounds img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 2.5s ease-in-out;
}
.backgrounds img.active{opacity:1}

/* === OVERLAY === */
.bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url('../images/raster_dot.png'),
    linear-gradient(0deg, rgba(10,12,16,0.45), rgba(10,12,16,0.45));
  background-repeat: repeat, no-repeat;
  background-size: 6px 6px, cover;
  background-position: 0 0, center;
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* === CONTENT === */
.content{
  position:relative;
  z-index:2;
  text-align:center;
  top:35%;
  transform:translateY(-35%);
  padding:0 20px;
}

/* === LOGOS === */
.logo{
  letter-spacing:.28rem;
  opacity:.85;
  text-transform:none;
  animation:fadeIn 2.5s ease;
}
.desktop-logo{font-size:3.6rem;}
.mobile-logo{display:none;font-size:5.5rem;}

/* === SLOGANS === */
.slogans{
  margin-top:40px;
  height:90px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.slogans p{
  position:absolute;
  width:100%;
  left:0;top:0;
  opacity:0;
  transition:opacity 1s ease;
  font-size:1.6rem;
  letter-spacing:.14rem;
  text-transform:none;
  line-height:1.3;
}
.slogans p.active{opacity:1}
.slogans p .sub{
  display:block;
  font-size:1.4rem;
  opacity:.9;
  margin-top:5px;
  letter-spacing:.1rem;
}

.mobile-line .subline {
  display: block;
  margin-top: 6px; /* ajuste entre 4 et 10 selon ton goût */
  font-size: 1.3rem;
  opacity: .85;
  letter-spacing: .12rem;
}

/* === FOOTER === */
footer{
  position:absolute;
  bottom:45px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:2;
}
.socials{margin-bottom:28px;}
.socials a{
  margin:0 14px;
  font-size:1.6rem;
  transition:opacity .3s;
}

/* === Couleurs officielles & ordre personnalisé === */
/* 1️⃣ WhatsApp */
.socials a.whatsapp {color:#25D366;}

/* 2️⃣ X (Twitter) */
.socials a.twitter {color:#1DA1F2;}

/* 3️⃣ Telegram */
.socials a.telegram {color:#229ED9;}

/* 4️⃣ TikTok */
.socials a.tiktok {color:#010101;}
.socials a.tiktok i {
  text-shadow:1px 1px 2px #25F4EE,-1px -1px 2px #FE2C55;
}

/* 5️⃣ Instagram */
.socials a.instagram {
  background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.socials a:hover{opacity:.7}

/* COPYRIGHT MODERNE */
footer .copyright {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: #fff;
  text-transform: none;
  line-height: 1.4;
  opacity: .9;
  font-size: .9rem;
  letter-spacing: .05rem;
}

footer .copyright .top-line {
  display: inline-block;
  white-space: nowrap; /* ✅ garde © + date + nom sur une seule ligne */
  font-weight: 700;
  letter-spacing: .06rem;
}

footer .copyright .bottom-line {
  display: block;
  font-weight: 400;
  opacity: .75;
  margin-top: 2px;
  font-size: .85rem;
}

/* === ANIMATIONS === */
@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:.85;transform:translateY(0)}
}

/* === MOBILE === */
@media (max-width:768px){
  .content{
    top:25%;
    transform:translateY(-25%);
  }
  .desktop-logo{display:none;}
  .mobile-logo{display:block;}
  .slogans{
    height:120px;
  }
/* === ANIMATION CYCLIQUE DES SLOGANS === */
  .animated-slogans {
    position: relative;
    height: 90px; /* adapte si besoin */
  }
  
  .animated-slogans .slogan {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    font-size: 1.6rem;
    letter-spacing: .14rem;
  }
  .animated-slogans .slogan.active {
    opacity: 1;
    transform: translateY(0);
  }
  .slogans p{
    font-size:1.3rem;
    line-height:1.4;
    letter-spacing:.1rem;
    padding:0 10px;
  }
  .slogans p .sub{
    font-size:1.1rem;
  }
  footer{
    bottom:30px;
  }
  .socials a{
    font-size:1.8rem;
    margin:0 10px;
  }
  footer .copyright{
    font-size:.8rem;
    line-height:1.4;
  }
}