/* Hero « La pluie de sable » : section épinglée plein écran, ordinateur et mobile.
   Le canvas WebGL dessine la voiture (sale, mousse, propre) et les grands mots derrière elle.
   Rendu fixe (sans JS, mouvement réduit, ou sans GSAP : classe est-statique) : photo propre, titre et boutons.
   Rendu animé : dès la première image, fond sable, photo sale au cadrage de départ du canvas, titre masqué. */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: var(--blanc, #fff);
}

.hero__fond,
.hero__fond img,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__fond img {
  object-fit: cover;
  object-position: 50% 72%;
}

/* Rendu fixe : un voile blanc en haut garde le titre lisible */
.hero__fond::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92) 55%, rgba(255, 255, 255, 0));
}

/* Le canvas reste transparent tant que sa première image n'est pas dessinée */
.hero__canvas {
  opacity: 0;
}

.hero__canvas.est-pret {
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* Mots d'étape en HTML : seulement pour le secours canvas 2D (en WebGL ils passent derrière la voiture) */
.hero__mots {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero.est-repli .hero__mots {
  display: block;
}

.hero__mot {
  position: absolute;
  left: var(--gouttiere, 16px);
  right: var(--gouttiere, 16px);
  top: calc(var(--entete-h, 68px) + 3vh);
  font-family: var(--police-titre, sans-serif);
  font-stretch: 112%;
  font-weight: 800;
  font-size: clamp(3rem, 12vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--graphite, #1b2029);
  visibility: hidden;
}

.hero__mot.est-visible {
  visibility: visible;
}

/* Texte final : dans le HTML dès le départ */
.hero__texte {
  container-type: inline-size;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(var(--entete-h, 68px) + 2vh);
  padding-inline: var(--gouttiere, 16px);
}

/* « ressort propre. » mesure 9 em en chasse 100 : 10,6 cqi tient sur la ligne */
.hero__titre {
  font-family: var(--police-titre, sans-serif);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(2.2rem, 10.6cqi, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--graphite, #1b2029);
}

.hero__morceau {
  display: block;
}

.hero__sous-titre {
  max-width: 36rem;
  margin-top: 16px;
  color: var(--graphite-2, #4a5261);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* Ordinateur : titre centré sur deux lignes au-dessus de la voiture */
@media (min-width: 900px) {
  .hero__texte {
    top: calc(var(--entete-h, 68px) + 3vh);
    text-align: center;
  }

  /* « Votre voiture ressort propre. » mesure environ 18 em : 5,3 cqi tient sur la ligne */
  .hero__titre {
    font-stretch: 104%;
    font-size: clamp(2.8rem, 5.3cqi, 6.6rem);
  }

  .hero__ligne {
    display: block;
  }

  .hero__morceau {
    display: inline;
  }

  .hero__sous-titre {
    margin-inline: auto;
    margin-top: 20px;
    font-size: 1.15rem;
  }

  .hero__actions {
    justify-content: center;
    margin-top: 26px;
  }

  /* Rendu fixe sur ordinateur : la voiture détourée posée en bas, sur fond blanc, comme la fin animée */
  .hero__fond::after {
    display: none;
  }

  /* Hauteur bornée : sur un écran bas, la voiture reste sous les boutons (le texte occupe environ 460 px) */
  .hero__fond img {
    inset: auto 0 4vh 0;
    height: clamp(160px, calc(100dvh - 460px), 52vh);
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 22px 18px rgba(27, 32, 41, 0.14));
  }
}

/* Rendu animé, posé par le CSS avant même le chargement des scripts.
   Le cadrage de la photo reprend le départ du canvas (FORMATS dans hero/pluie-de-sable.js) :
   le canvas se pose dessus sans que la voiture bouge. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero:not(.est-statique) {
    background: var(--fond-hero, var(--sable, #ddb89b));
  }

  .hero:not(.est-statique) .hero__fond {
    transform: translateY(-16%) scale(0.94);
  }

  .hero:not(.est-statique) .hero__fond::after {
    display: none;
  }

  /* Aperçu flou de la voiture sale détourée (350 octets), le temps que la photo arrive */
  .hero:not(.est-statique) .hero__fond::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/webp;base64,UklGRloBAABXRUJQVlA4WAoAAAAQAAAAHQAANQAAQUxQSHoAAAART6CokSQ1thKYf3sQEQEZ/+DOMzitte1NntBlFBtUlxGoC3RwvcmowAQ/v05956WDQ0X0fwL4Q3R3+yAws9yDWHcX93w9zN8ss0cVYJPq8Ql8Pe0QP5cjey7v6Zucp86ykFlrrpmkKuEFYrWAoZSnXQNvkANcc+T3AVZQOCC6AAAAcAUAnQEqHgA2AD7dWqdNqKSjojAYCgEQG4ljADUNc/+CORAK9ywsZCGep93UcmdVfE/rSAD++2UEB78NRHPsWrtlWRz+nlhwI75XUJHsUbOkWPuN0jFX76+oR2tLkkaUFrxnNWQEmv3te0wPPmKLoscQxXbWvq0JEGsEXPgOfjvOSdIITrMXALZSitlKiQFTY+/V1vAOZ15ZULcPPylRA7kBJia1c01PymXxKXi+Yq0uWJ0jZdskAAAA") 50% 50% / cover no-repeat;
    filter: blur(14px);
  }

  .hero.photo-prete .hero__fond::before {
    display: none;
  }

  .hero:not(.est-statique) .hero__fond img {
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: none;
  }

  /* Titre masqué jusqu'à la fin du lavage ; filet : il réapparaît si les scripts n'ont pas démarré */
  .hero:not(.est-statique) .hero__texte {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.7s var(--ease-sortie, ease);
    animation: hero-secours 0.4s ease 6s forwards;
  }

  .hero.est-anime .hero__texte {
    animation: none;
  }

  .hero:not(.est-statique).est-fini .hero__texte,
  .hero:not(.est-statique) .hero__texte:focus-within {
    opacity: 1;
    transform: none;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .hero:not(.est-statique) .hero__fond {
    transform: translateY(7%) scale(0.9);
  }

  .hero:not(.est-statique) .hero__fond::before {
    background-image: url("data:image/webp;base64,UklGRqgBAABXRUJQVlA4WAoAAAAQAAAALwAAGgAAQUxQSJAAAAART6CgbRs2VRTt/omIwNh7PT/h5LYeRwkd3Ehwa3Eg11HUOhy2N9fB9iY7fP83yQxVR/R/AugPbHY68+6hGrYage+HLAqQkzrvpghU5gblMaSoPKFOS94T+oxUg2VWWtr40s0meDvfWcpN74GkdAKOTy5KCySkAZ5JIpO/A2HKdcOS2fVCREQn9MmtKUccfWdWUDgg8gAAALAHAJ0BKjAAGwA+3V6lT6ikoyIquAwBEBuJQBkgbY2f54AdwLiB5iJQpQQ5WLuAigGraDC5G8srNtsofAk1CjzOPRnieoAA/vvZYn6RslVFemqFtJNueoVrq9RmiNU9mchdAvwON3R/+XTY9S+4aix30hX0EVMuGF5y0Kjb+h37arGxi2dTmJIwo47zFqkN7agvUVH+EfjgN/jRKYKcXSjeiy8U/gpXrD+fWGtLr8DmC9h1xrB8e6Id0F3nA1dPiVXPZhkFFvtT8NBILh9vauVOseExj050m73erNbjdo/0GS6SPIDTVBwhW7pN1aIYgAAA");
  }
}

@keyframes hero-secours {
  to {
    opacity: 1;
    transform: none;
  }
}