/* ENTÊTE */

.entete {position: relative; width: 100%; height: 260px; background-image: url("../assets/fond-entete.webp");
  background-size: cover; background-position: center; background-repeat: no-repeat; display: flex;
  justify-content: space-between; align-items: flex-end; padding: 0; box-sizing: border-box;
  overflow: hidden; animation: cineMove 22s ease-in-out infinite;
}
@keyframes cineMove {
  0%   { background-size: 100%; background-position: 50% 50%; }
  50%  { background-size: 130%; background-position: 80% 80%; }
  100% { background-size: 100%; background-position: 50% 50%; }
}

/* BLOC GAUCHE */

.entete-left {display: flex;  background: #de6429; padding: 0; align-items: center; box-sizing: border-box; }

/* Logo sur fond noir */
.entete-logo { background: #000; padding: 0; display: flex; align-items: center; justify-content: center;}
.entete-logo img { width: 90%; height: auto; }

/* Titre + texte */
.entete-texte h1 { margin: 8px; background-color: #de6429; color: white;  font-size: 22px; 
  text-transform: uppercase; letter-spacing: 1px; }

.entete-texte p { margin: 9px; color: white; font-size: 14px; text-align: left; }


/* NAVIGATION DROITE */

.entete-nav { display: flex; gap: 1px; max-width: 300px; }

.nav-item { width: 140px; background: #de6429; display: flex; align-items: center;
  justify-content: center;  position: relative; overflow: hidden; text-decoration: none; }
.nav-item img { width: 40px; height: auto; transition: opacity 0.3s; }

/* Texte au hover */
.nav-item::after {  content: attr(data-text); position: absolute; color: white; font-size: 14px;
  opacity: 0; transition: opacity 0.3s; font-family: Arial, Helvetica, sans-serif; 
  text-transform: uppercase; letter-spacing: 1px; font-weight: bold;
  background: #000; transition: 0.8s ease;
}

.nav-item:hover img { opacity: 0; }

.nav-item:hover::after {  opacity: 1; background: #de6429; transition: 0.8s ease; }

/* RESPONSIVE */

@media (max-width: 700px) {

  .entete {  flex-direction: column; height: auto; padding-bottom: 60px; }

  .entete::after { content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,0.15); animation: fadeOverlay 6s ease-in-out infinite; pointer-events: none; }

  @keyframes fadeOverlay {
  0%   { opacity: 0.2; }
  50%  { opacity: 0.5; }
  100% { opacity: 0.2; }
}
  .entete-left { width: 100%; justify-content: flex-start;}

  .entete-nav { width: 100%; max-width: none; justify-content: center; margin-top: 40px; }

  .nav-item { justify-content: center; }
}

/* SECTION GLOBALE */
.intro-section { width: 100%; display: flex; justify-content: center; 
  padding: 60px 20px; }

/* CONTENEUR 1400px MAX */
.intro-container { width: min(1000px, 100%); display: flex; align-items: center; }

/* COLONNE GAUCHE — TITRE */
.intro-left { background: #44a8a4; padding: 40px; flex: 1; display: 
  flex; align-items: center; border-radius: 8px 0 0 8px; }
.intro-left h1 { color: white; font-size: 48px; margin: 0; }

/* COLONNE DROITE — TEXTE */
.intro-right { background: #fff9e1; padding: 40px; flex: 1; 
  border-left: 3px solid #44a8a4; border-radius: 0 8px 8px 0; }

.intro-right p { font-size: 20px; margin: 0; }

/* RESPONSIVE */
@media (max-width: 900px) {
  .intro-container { flex-direction: column; text-align: center; }
  .intro-left,
  .intro-right { width: 100%; }
  .intro-left h1 { font-size: 36px;}
  .intro-left { border-radius: 8px 8px 0 0 ; }
  .intro-right { border-top: 3px solid #44a8a4; border-radius: 0 0 8px 8px ; }
}


/* FOOTER */

.footer { width: 100%; height: 50px; background: #fff; display: flex;
  justify-content: space-between; align-items: center; overflow: hidden; }

/* Logo à gauche */
.footer-left { background: #000; height: 100%; width: 50px; display: flex;
  align-items: center; justify-content: center; }
.footer-left img { width: 100%; height: auto;}

/* Texte au centre */
.footer-center { flex: 1; text-align: left; padding-left: 30px; }

.footer-center p { margin: 0; font-size: 12px; color: #000;
  font-family: Arial, Helvetica, sans-serif; }
.footer-link { color: #000; text-decoration: underline;}

/* Navigation à droite (même style que l’entête) */
.footer-nav {  display: flex; gap: 1px; height: 100%; }
.footer-nav .nav-item { width: 140px; height: 100%; background: #de6429; display: flex; align-items: center;
  justify-content: center; position: relative; overflow: hidden; text-decoration: none; }
.footer-nav .nav-item img { width: 50px; height: auto; transition: opacity 0.3s; }
.footer-nav .nav-item::after { content: attr(data-text); position: absolute;  color: white; font-size: 14px;
  opacity: 0; transition: opacity 0.3s; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase;
  letter-spacing: 1px; font-weight: bold; }
.footer-nav .nav-item:hover img { opacity: 0; }

.footer-nav .nav-item:hover::after { opacity: 1; }

@media (max-width: 700px) {

  .footer { flex-direction: column; height: auto; padding: 0; }

  /* Logo + texte restent sur la même ligne */
  .footer-top { width: 100%; height: 80px; display: flex; align-items: center;  }
  .footer-left { width: 120px; height: 100%; display: flex; align-items: center; justify-content: center; }
  .footer-left img { width: 70%; height: auto; }

  .footer-center { flex: 1; padding-left: 20px; text-align: left; }

  /* Navigation descend seule */
  .footer-nav { width: 100%; justify-content: center;  margin-top: 10px; height: 80px; }
  .footer-nav .nav-item { width: 100px; }
}