body { margin: 0; background: #fbf0d1; color: #4c2207; font-family: Arial, Helvetica, sans-serif;}

* { box-sizing: border-box; }
#container { width: min(1200px, 100%); margin: auto; padding: 40px 20px; }

h1 { text-align: center; color: #aebcd0; font-weight: lighter; letter-spacing: 1px;
  font-size: 30px; margin-bottom: 60px; }

p { text-align: left; color: #4c2207; font-weight: lighter; letter-spacing: 1px; font-size: 16px; 
  margin-bottom: 60px; }

/* HERO */

.hero { position: relative; width: 100%; height: 70vh; min-height: 420px;
  background-image: url("../assets/hero/vallee.jpg");
  background-size: cover;          /* couvre toute la hauteur */
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  animation: heroZoomMove 18s ease-in-out infinite;
}

/* Animation desktop */
@keyframes heroZoomMove {
  0%   { background-size: 110%; background-position: center; }
  25%  { background-size: 125%; background-position: 60% center; }
  50%  { background-size: 160%; background-position: center; }
  75%  { background-size: 125%; background-position: 40% center; }
  100% { background-size: 110%; background-position: center; }
}

/* OVERLAY */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  animation: gradientSlide 14s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.65) 100%
  );
  background-size: 200% 100%;
}

@keyframes gradientSlide {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* TEXTE + LOGO */

.hero-textbox { position: absolute; bottom: 40px; left: 40px; background: #008055;
  padding: 8px; display: flex; flex-direction: row; z-index: 3; max-width: 500px;  min-width: 400px; }

/* Colonne texte */
.textbox-left { flex: 1; }

/* Logo */
.textbox-right img { width: 140px; height: auto; display: block; }

/* MACHINE À ÉCRIRE  */
.type-title,
.type-text { overflow: hidden; white-space: nowrap; width: 0; color: white; }

/* Titre */
.type-title { font-size: 22px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: bold;  animation: typingTitle 2.2s steps(30) forwards; }

/* Texte */
.type-text { font-size: 14px; margin-top: 8px; text-align: left;
  animation: typingText 2.2s steps(40) forwards 2.3s;
}

@keyframes typingTitle {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes typingText {
  from { width: 0; }
  to   { width: 100%; }
}

/* RESPONSIVE */

@media (max-width: 600px) {

  .hero {
    animation: heroZoomMoveMobile 14s ease-in-out infinite !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  @keyframes heroZoomMoveMobile {
    0%   { background-size: 120%; background-position: 50% 40%; }
    50%  { background-size: 135%; background-position: 48% 45%; }
    100% { background-size: 120%; background-position: 50% 40%; }
  }

  .hero-textbox { bottom: 20px; left: 20px; right: 20px; max-width: 460px; min-width: 400px;
    padding: 15px; gap: 12px; }
  .textbox-right img { width: 80px; }
  .type-title { font-size: 20px; }
  .type-text { font-size: 14px; }
}