/* =====================================================================
   Téléphone et tablette (≤ 860 px) — 2.12.
   Chargé avec media="(max-width: 860px)" : l'ordinateur ne lit jamais ces règles.
   Principe : rien n'est lié au défilement (GSAP n'est pas chargé, voir main.js › lcMotion), pas de scène
   épinglée, pas de flou d'arrière-plan pendant le défilement, contenu visible tout de suite.
   ===================================================================== */

/* Flou d'arrière-plan (backdrop-filter) : coûteux à chaque image du défilement sur téléphone. On le retire
   et on rend les fonds de verre un peu plus couvrants pour garder la lisibilité. Sur toutes les pages : la
   barre d'actions des fiches et la pastille du catalogue, fixes, floutaient tout ce qui défilait dessous. */
body {
  --lc-glass-blur: none;
  --xp-blur: none;
  --lc-glass-bg: rgba(4, 31, 58, 0.5);
  --lc-glass-bg-strong: rgba(4, 31, 58, 0.62);
  --lc-glass-light-bg: rgba(255, 255, 255, 0.95);
  --xp-glass-dark: rgba(4, 31, 58, 0.58);
  --xp-glass-light: rgba(255, 255, 255, 0.96);
  --xp-section: clamp(64px, 14vw, 96px);
}
body *, body *::before, body *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Très petits écrans (< 375 px) : logo, « Nous écrire » et menu ne tiennent pas sur une ligne (le bouton du
   menu sortait de l'écran). « Nous écrire » garde son enveloppe, en bouton de 44 px. */
@media (max-width: 374px) {
  .nav__mail span { display: none; }
  .nav__mail { min-width: 44px; min-height: 44px; justify-content: center; }
}
.nav.is-glass { background: rgba(4, 31, 58, 0.72); }
.nav.is-solid { background: rgba(255, 255, 255, 0.97); }

/* ---------- Hero « Architecture » statique ----------
   Visuel en haut (ciel + bâtiment, recadrage carré), puis titre, accroche et recherche dans le flux, sur le
   bleu nuit : tout est lisible et utilisable dès l'affichage, sans recouvrement ni hauteur en « vh ». */
.harchi { height: auto; background: var(--lc-night); }
.harchi__stage {
  --vis: min(92vw, 58svh);
  position: relative; top: auto; height: auto; overflow: hidden;
  display: flex; flex-direction: column; background: var(--lc-night);
}
.harchi__sky { inset: 0 0 auto; height: var(--vis); transform: none; }
.harchi__scene {
  --ar: 1.0033;
  position: relative; left: auto; bottom: auto; translate: none; z-index: 1;
  width: 100%; height: var(--vis); aspect-ratio: auto; container-type: normal; flex: none;
}
.harchi__bldg img { object-fit: cover; object-position: 50% 100%; transform: none !important; }
.harchi__word { display: none; } /* mot géant derrière le bâtiment : effet réservé à l'ordinateur */
.harchi__shade {
  inset: 0 0 auto; height: calc(var(--vis) + 2px);
  background: linear-gradient(180deg, rgba(4, 31, 58, 0) 52%, rgba(4, 31, 58, 0.55) 78%, var(--lc-night) 100%);
}
.harchi__content {
  position: relative; z-index: 4; left: auto; right: auto; bottom: auto;
  margin-top: calc(-1 * clamp(56px, 16vw, 96px));
  padding-bottom: 34px; opacity: 1 !important; visibility: visible !important; transform: none !important;
}
.harchi__eyebrow { display: none; }
.harchi__title { font-size: clamp(2.15rem, 9.6vw, 3.3rem); line-height: 1.02; text-shadow: none; }
.harchi__sub { margin-top: 8px; font-size: 0.95rem; letter-spacing: 0.04em; text-shadow: none; }
.harchi__lead { display: block; margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.harchi__lead .hide-phone { display: none; }
.harchi__note { top: calc(max(10px, env(safe-area-inset-top)) + 66px); bottom: auto; right: var(--lc-gutter); font-size: 10.5px; z-index: 4; text-shadow: 0 1px 6px rgba(4, 31, 58, 0.5); }
.harchi__cue, .harchi__fade { display: none; }
.harchi__after { display: none; }
.harchi + .harchi__after + .xp-persp { padding-top: clamp(40px, 10vw, 64px); }

/* Recherche : une colonne, champs de 56 px (cible tactile), fond opaque, suggestions sous le champ. */
.harchi .hero-dock__search.search--q {
  width: 100%; margin-top: 20px; padding: 6px; border-radius: 22px; grid-template-columns: minmax(0, 1fr);
  background: #fff; border: 0; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
.harchi .hero-dock__search :is(.search__q, .search__budget) { min-height: 56px; }
/* Toute la case est la zone tactile : le champ couvre la case, le libellé reste dessiné au-dessus
   (il laisse passer le doigt). Avant, seule la ligne de texte (28 px) réagissait au toucher. */
.harchi .hero-dock__search :is(.search__q, .search__budget) { align-content: start; min-height: 66px; padding-top: 12px; }
.harchi .hero-dock__search :is(.search__q input, .search__budget select) {
  position: absolute; inset: 0; height: 100%; padding: 30px 28px 8px 58px; border-radius: inherit;
}
.harchi .hero-dock__search .search__budget select { padding-left: 22px; }
.harchi .hero-dock__search .search__label { position: relative; z-index: 1; }
.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 { grid-column: auto; margin: 6px 0 0; min-height: 54px; justify-content: center; }
.harchi .hero-dock__search .suggest { top: calc(100% + 8px); bottom: auto; left: 0; right: 0; max-height: min(50svh, 380px); }
.search input, .search select { font-size: 16px; } /* pas de zoom automatique d'iOS au focus */

/* Paysage sur téléphone : visuel plus bas pour garder le titre et la recherche à portée. */
@media (orientation: landscape) and (max-height: 520px) {
  .harchi__stage { --vis: 46svh; }
  .harchi__lead { display: none; }
}

/* ---------- Sections de l'accueil ---------- */
/* Hauteurs « plein écran » remplacées par des hauteurs de contenu (la barre d'adresse ne les fait plus varier). */
.xp-final, .xp-immersion__stage { min-height: 0; }
.xp-final { padding-block: clamp(72px, 18vw, 110px); }
.xp-art__hero { min-height: min(72svh, 560px); }
/* Présentation immersive : suite de photos et de chapitres, sans épinglage ni effet de caméra. */
.xp-immersion__stage { position: relative !important; height: auto !important; }
/* Rails horizontaux : glissés au doigt, avec un aperçu de la carte suivante. */
[data-rail].is-native { height: auto !important; }
/* Pas de transformation résiduelle sur les photos (parallaxes de l'ordinateur). */
[data-parallax], [data-bg-parallax], [data-xp-parallax], [data-xp-drift] { transform: none !important; }
/* Apparitions : plus courtes, sans décalage vertical important. */
[data-reveal] { transition-duration: 0.45s !important; }

/* Exclusivités (« vitrine ») : carrousel horizontal glissé au doigt, une carte et l'aperçu de la suivante. */
.home .xp-vitrine__grid {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; grid-auto-rows: auto;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--lc-gutter)); padding: 0 var(--lc-gutter) 6px; scroll-padding-inline: var(--lc-gutter);
}
.home .xp-vitrine__grid::-webkit-scrollbar { display: none; }
.home .xp-vitrine__grid > * { grid-column: auto !important; grid-row: auto !important; min-height: 420px; scroll-snap-align: start; }
.home .xp-card--feature .xp-card__name { font-size: 2rem; }

/* Promoteurs partenaires : logos plus compacts (3 par ligne). */
.home .partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home .partner { min-height: 88px; padding: 14px 10px; }
.home .partner span, .home .partner p { display: none; }