/*
  Home V4 EN, passe v3 (PRODUIT, HOME-INTÉGRATION, 10/11/2026) — raccords de la Home seulement.
  Les sections ② How it works (etapes.css), ③ Outils (zigzag.css) et ④ Vitals (vitals-etats.css) gardent leur dessin ;
  ce fichier retire ce que les anciennes feuilles de la Home posaient encore sur #how-it-works et #tools
  (hauteur d'écran, grille, fond, marges), et donne au hero sa démo (la boucle « complete ») en grand.
*/

/* ---------- ① Hero : la boucle « complete », en grand ---------- */
main#top .hero.container > .hv3-hero-demo { display: block; inline-size: 100%; max-inline-size: none; min-inline-size: 0; margin: 0; }
main#top .hero.container > .hv3-hero-demo > .hb { inline-size: 100%; }
@media (min-width: 1101px) {
  .s18-opening .hero.container { grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr); gap: 56px; }
}
@media (min-width: 1360px) {
  .s18-opening .hero.container { width: min(1320px, calc(100% - 96px)); }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .s18-opening .hero.container { display: flex; flex-direction: column; align-items: stretch; gap: 40px; padding-block: 32px 48px; }
  main#top .hero.container > .hv3-hero-demo { max-inline-size: 760px; margin-inline: auto; }
}

/* T3-A (Kevin, 10/11 16:3x, via LEAD) : la démo du hero était trop large et le H1 à l'étroit. La démo devient une
   scène presque carrée (10/11), plus étroite et plus haute ; le H1 prend la place rendue. Sous 1101 px, inchangé
   (tablette : démo sous le texte ; 390 : empilé). Entre 1101 et 1359 px la scène passe sous 520 px de large :
   la boucle prend sa mise en page portrait, dans la même proportion. */
@media (min-width: 1101px) {
  .s18-opening .hero.container { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 41%, 540px)); gap: clamp(48px, 5vw, 80px); }
  main#top .hero.container > .hv3-hero-demo .hb-stage { aspect-ratio: 10 / 11; }
  main#top .hero.container #hero-title { max-inline-size: 680px; }
  main#top .hero.container .hero-support { max-inline-size: 560px; }
}

/* ---------- ② ③ ④ : ce que les anciennes feuilles posaient sur #how-it-works et #tools ----------
   (home-review-kevin-0811.css : grille et 100svh ; home-review2-0811.css : marges et fond de #how-it-works ;
   ux-2013.css : 100svh et marges de #how-it-works et #tools). Les sections gardent leur propre dessin. */
html[data-home-review-kevin] main#top > #how-it-works.hs,
html[data-home-review-kevin] main#top > #tools.zz,
html[data-home-review-kevin] main#top > #vitals.vx {
  display: block; min-height: 0; height: auto; overflow: hidden;
}
html[data-home-review-kevin] main#top > #how-it-works.hs { padding: 0; background: none; }
html[data-home-review-kevin] main#top > #tools.zz { padding: 120px 0 136px; }
@media (max-width: 900px) {
  html[data-home-review-kevin] main#top > #tools.zz { padding: 80px 0 96px; }
}
@media (max-width: 760px) {
  .s18-opening .hero.container { padding-bottom: 40px; }
}