/* =====================================================================
   Refonte 2.9 — hero « Architecture » (inc/blocs.php, lcb_render_hero_archi ; js/hero-archi.js).
   Couches, de l'arrière vers l'avant : ciel (dégradé CSS mesuré sur le visuel), mot géant (vrai texte),
   bâtiment détouré qui le recouvre, voile de lisibilité, titre + accroche + recherche.
   La section mesure 175 % de l'écran : la scène reste collée en haut (position: sticky) pendant que la
   caméra avance ; aucun défilement n'est bloqué.
   ===================================================================== */

.harchi { position: relative; height: 175vh; height: 175svh; background: var(--lc-sand); }
.harchi__stage {
  /* Sous la barre d'administration de WordPress quand elle est affichée (variable fournie par WordPress). */
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px);
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  overflow: hidden; isolation: isolate; color: #fff;
  background: #6ba1de;
}

/* Ciel : couleurs relevées sur le visuel (haut, 20 %, 40 %, 60 %), plus clair vers la droite comme sur la photo. */
.harchi__sky {
  position: absolute; inset: -8% 0 0; z-index: 0; transform-origin: 50% 100%;
  background:
    radial-gradient(ellipse 60% 50% at 92% 64%, rgba(184, 210, 238, 0.9), rgba(184, 210, 238, 0) 72%),
    linear-gradient(180deg, #3a75ba 0%, #4685ca 20%, #6ba1de 40%, #9bbde2 60%, #b4cde6 100%);
}

/* Scène : même proportion que le visuel, calée en bas et centrée ; elle couvre toujours l'écran. */
.harchi__scene {
  --ar: 1.7914; /* 2560 × 1429 */
  position: absolute; z-index: 1; left: 50%; bottom: 0; height: max(100%, 100vw / var(--ar)); aspect-ratio: var(--ar);
  translate: -50% 0; container-type: size;
}

/* Mot géant : posé sur la ligne du toit (38,5 % de la hauteur du visuel), son bas passe derrière le bâtiment. */
.harchi__word {
  position: absolute; left: 50%; top: 38.5%; z-index: 1; margin: 0; translate: -50% calc(-100% + 0.3em);
  font-family: var(--lc-font); font-weight: 700; font-size: min(20vw, 36cqh); line-height: 0.74; letter-spacing: -0.025em;
  white-space: nowrap; color: #fff; text-transform: uppercase; pointer-events: none; user-select: none;
}
/* Le centrage (translate) reste sur le paragraphe ; le script anime seulement l'intérieur et les lettres. */
.harchi__word-in { display: inline-block; transform-origin: 50% 100%; }
.harchi__word-in span { display: inline-block; }

.harchi__bldg { position: absolute; inset: 0; z-index: 2; display: block; }
.harchi__bldg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%; }

/* Voile bas : lisibilité du titre et de la recherche sur le jardin. */
.harchi__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 18% 82%, rgba(4, 31, 58, 0.42), rgba(4, 31, 58, 0) 70%),
    linear-gradient(0deg, rgba(4, 31, 58, 0.86) 0%, rgba(4, 31, 58, 0.58) 28%, rgba(4, 31, 58, 0.2) 50%, rgba(4, 31, 58, 0) 66%);
}

.harchi__content {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(24px, 4.5vh, 52px);
  display: grid; justify-items: start; gap: 0;
}
.harchi__eyebrow { margin-bottom: 14px; }
.harchi__title {
  margin: 0; max-width: none; font-size: clamp(2.7rem, 6vw, 6.6rem); line-height: 0.98; letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 2px 30px rgba(4, 31, 58, 0.35);
}
.harchi__title em { color: var(--lc-blue-soft); }
.harchi__sub { margin-top: 10px; color: #fff; text-shadow: 0 1px 18px rgba(4, 31, 58, 0.4); }
.harchi__lead { max-width: 56ch; margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); }

/* Recherche : barre de verre claire, mêmes réglages que la recherche du hero 2.7. */
.harchi .hero-dock__search.search--q {
  width: min(100%, 1000px); margin-top: clamp(18px, 3vh, 30px);
  grid-template-columns: minmax(0, 1fr) minmax(200px, 270px) auto; gap: 0; align-items: stretch; padding: 8px; border-radius: 28px;
  background: var(--xp-glass-light); border: 1px solid var(--xp-glass-light-edge); color: var(--lc-ink);
  box-shadow: inset 0 1px 0 #fff, 0 40px 90px -40px rgba(4, 31, 58, 0.7), 0 2px 8px rgba(4, 31, 58, 0.1);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
}
.harchi .hero-dock__search .btn { background: var(--lc-blue); color: #fff; }
/* Suggestions : la recherche est en bas d'une scène qui ne déborde pas, la liste s'ouvre donc vers le haut. */
.harchi .hero-dock__search .suggest { top: auto; bottom: calc(100% + 12px); max-height: min(56vh, 460px); overflow-y: auto; overscroll-behavior: contain; }

.harchi__note {
  position: absolute; z-index: 4; right: var(--lc-gutter); bottom: 8px; margin: 0;
  font-size: 11.5px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72);
}
.harchi__cue {
  position: absolute; z-index: 4; right: var(--lc-gutter); bottom: clamp(56px, 9vh, 96px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; writing-mode: vertical-rl;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: #fff; opacity: 0.85;
}
.harchi__cue i { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.5); position: relative; overflow: hidden; }
.harchi__cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: cue 2.2s var(--lc-ease-io) infinite; }

/* Fin du parcours : le fond de la section suivante monte et prend le relais. */
.harchi__fade {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 60%; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 245, 240, 0) 0%, var(--lc-sand) 78%);
}
.harchi.is-typing .harchi__fade { opacity: 0 !important; }
.harchi__after { height: 0; }
.harchi + .harchi__after + .xp-persp { padding-top: clamp(40px, 5vw, 80px); }

/* Écrans bas (portables 13 pouces) : la phrase d'accroche laisse la place au bâtiment. */
@media (max-height: 780px) and (min-width: 701px) {
  .harchi__lead { display: none; }
  .harchi__title { font-size: clamp(2.6rem, 5.2vw, 5.4rem); }
}

/* Tablette : recherche sur deux lignes. */
@media (max-width: 1024px) {
  .harchi .hero-dock__search.search--q { grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); }
  .harchi .hero-dock__search.search--q .btn { grid-column: 1 / -1; margin: 8px 0 0; justify-content: center; min-height: 58px; }
  .harchi__cue { display: none; }
}

/* Écrans en hauteur (téléphone, tablette) : recadrage carré du visuel, scène plus haute que l'écran pour
   remonter le toit et éviter un grand ciel vide. */
@media (max-width: 1024px) and (orientation: portrait) {
  .harchi__scene { --ar: 1.0033; height: 120%; } /* 1200 × 1196 */
  .harchi__word { font-size: min(21.5vw, 30cqh); translate: -50% calc(-100% + 0.22em); }
}

/* Téléphone (portrait) : recadrage carré du même visuel, scène un peu plus haute que l'écran pour
   remonter le toit ; mot ajusté à la largeur, recherche en colonne. */
@media (max-width: 700px) and (orientation: portrait) {
  .harchi { height: 150vh; height: 150svh; }
  .harchi__word { font-size: min(21.5vw, 30cqh); translate: -50% calc(-100% + 0.2em); }
  .harchi__sub { font-size: 0.95rem; letter-spacing: 0.04em; }
  .harchi__eyebrow, .harchi__lead { display: none; }
  .harchi__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .harchi__shade { background: linear-gradient(0deg, rgba(4, 31, 58, 0.86) 0%, rgba(4, 31, 58, 0.55) 34%, rgba(4, 31, 58, 0.1) 56%, rgba(4, 31, 58, 0) 64%); }
  .harchi .hero-dock__search.search--q { grid-template-columns: minmax(0, 1fr); padding: 6px; border-radius: 24px; margin-top: 16px; }
  .harchi .hero-dock__search :is(.search__q, .search__budget) { min-height: 58px; }
  .harchi .hero-dock__search .search__budget::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .harchi .hero-dock__search.search--q .btn { margin: 6px 0 0; min-height: 54px; justify-content: center; }
  .harchi .hero-dock__search .suggest { left: 0; right: 0; }
  .harchi__content { bottom: 26px; }
  .harchi__note { bottom: 6px; font-size: 10.5px; }
}

/* Animations réduites : composition immobile, sans parcours de défilement. */
@media (prefers-reduced-motion: reduce) {
  .harchi { height: auto; }
  .harchi__stage { position: relative; }
  .harchi__cue i::after { animation: none; }
}