/* Hero de l'accueil : photo nette plein cadre (aucun masque en bureau), bloc titre en bas au début de la ligne, barre de recherche à cheval sur le bord bas de la photo.
   Inspiré de Real Estate Search Hero par felipemenezes098 (21st.dev, https://21st.dev/@felipemenezes098/components/hero-09), licence non indiquée.
   Réécriture vanilla : seule l'idée (carte de recherche posée sur la photo) est reprise, aucun code d'origine. Barre : recherche.css. Spec : 02-CORRECTIONS-SPEC.md section 1. */

.hero { --recouvrement: 72px; position: relative; }

/* Scène : la photo remplit le cadre, le bloc titre s'arrête au-dessus de la barre (recouvrement + une marge) */
.hero__scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: clamp(520px, calc(100svh - var(--entete-h) - 160px), 720px);
}
.hero__scene-contenu { position: relative; padding-block: var(--e4) calc(var(--recouvrement) + var(--e4)); }

/* Photo : nette jusqu'aux quatre bords, voile uniforme de 8 % */
.hero__photo { position: absolute; inset: 0; overflow: hidden; }
.hero__photo picture { display: block; inline-size: 100%; block-size: 100%; }
.hero__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 58%; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--dominante) 8%, transparent);
  pointer-events: none;
}

/* Bloc titre outremer : le titre n'est jamais posé sur la photo nue ; 40 % de la largeur au plus, au début de la ligne (droite en hébreu) */
.bandeau {
  inline-size: clamp(22rem, 40vw, 36rem);
  margin-inline-end: auto;
  padding: var(--e4) var(--e5);
  background: var(--dominante);
  color: var(--surface);
  border-radius: var(--rayon-m);
}
/* En hébreu le bloc reste en bas à gauche, côté collines : la photo n'est pas miroitée (la miroiter fausserait la villa) et la mer et la table restent visibles */
html[dir="rtl"] .bandeau { margin-inline-start: auto; margin-inline-end: 0; }
.bandeau__titre { max-inline-size: 14ch; font-size: var(--t-h2); animation: lever var(--d-long) var(--ease-entree) 120ms both; }
.bandeau__phrase { max-inline-size: 36ch; margin-block-start: var(--e2); text-wrap: pretty; }

@keyframes lever { from { opacity: 0; transform: translateY(12px); } }
@keyframes fondu { from { opacity: 0; } }

/* Bas du hero : la barre chevauche la photo ; en dessous, le badge de démonstration et WhatsApp */
.hero__bas { position: relative; z-index: 1; margin-block-start: calc(-1 * var(--recouvrement)); padding-block-end: var(--e4); }
.hero__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-block-start: var(--e3); }

/* Téléphone : photo en flux fondue en bas (hero 390 validé, inchangé), bloc titre remonté sur la photo, tout en pile */
@media (max-width: 759px) {
  .hero { --recouvrement: 0px; }
  .hero__scene { display: block; min-block-size: 0; }
  .hero__photo {
    position: relative;
    inset: auto;
    block-size: min(58svh, 500px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 6%, black 72%, transparent 100%);
  }
  .hero__photo img { object-position: 60% 50%; }
  .hero__scene-contenu { margin-block-start: calc(-1 * var(--e6)); padding-block: 0; }
  .bandeau { inline-size: auto; padding: var(--e4); }
  .bandeau__titre { max-inline-size: 11.5ch; font-size: var(--t-h1); }
  .bandeau__phrase { max-inline-size: 44ch; margin-block-start: var(--e3); }
  .hero__bas { margin-block-start: 0; padding-block: var(--e3) var(--e5); }
  .hero__pied { flex-direction: column; align-items: stretch; }
  .hero__pied .badge { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .bandeau__titre { animation: fondu var(--d-micro) linear both; }
}