/* Vignettes d'usages : le thème les fige à var(--lm-space-xl), soit 64 px, ce qui
   en fait des icônes. Sur l'accueil seulement, elles prennent la largeur de la
   carte pour redevenir des photos. */
.lm-home .lm-landing-situations figure {
  width: 100%;
  aspect-ratio: 10 / 10;
  margin: 0 0 var(--lm-space-4);
}

.lm-home .lm-landing-situations figure img {
  width: 100%;
  height: 100%;
  border-radius: var(--lm-radius-card);
}

/* Homepage-only composition. Shared type, colors and controls stay in theme tokens.
   Gutenberg enveloppe le contenu du groupe racine dans .wp-block-group__inner-container :
   les sélecteurs `>` d'origine ne ciblaient plus rien et le rythme retombait sur .lm-section. */
.lm-home > *,
.lm-home > .wp-block-group__inner-container > * { margin-block: 0; }

/* Hiérarchie verticale : base (valeur identique à .lm-section, rendue explicite ici),
   plus d'air pour les trois temps forts (ouverture, offre, commande), moins pour les
   sections de texte seul. Aucune section .lm-home n'en contient une autre. */
.lm-home .lm-section { padding-block: clamp(40px, 4.5vw, 64px); }

.lm-home .lm-home-moments,
.lm-home .lm-home-product,
.lm-home .lm-home-order { padding-block: clamp(56px, 6vw, 96px); }

.lm-home .lm-home-technology,
.lm-home .lm-home-precautions { padding-block: clamp(32px, 3.5vw, 48px); }

.lm-home .lm-hero-lead,
.lm-home .lm-hero-tagline,
.lm-home .lm-hero-actions { margin-top: var(--lm-space-6) !important; }

.lm-home .lm-hero-tagline { font-size: 1.125rem; }
.lm-home .lm-hero-tagline strong { font-variant-numeric: tabular-nums; }

/* Chapô sur photo : le blanc du thème est correct (mesuré rgba(255,255,255,.92)),
   mais le corps hérite du 300 global. Sur une image, 400 redresse les fûts fins. */
.lm-home .lm-hero-lead { font-weight: 400; }

/* Fond sombre : l'anneau de focus global (#0f6fb5) ne ressort pas sur la photo. */
.lm-home .lm-hero-actions .wp-block-button__link:focus-visible { outline-color: #fff; }

/* Contour du CTA secondaire : 60 % de blanc est trop faible sur l'image. */
.lm-home .lm-hero-button-secondary .wp-block-button__link { border-color: rgba(255, 255, 255, .8); }

.lm-home-moments .lm-container,
.lm-home-technology .lm-container,
.lm-home-precautions .lm-container { max-width: 760px; }

.lm-home-moments { background: var(--lm-surface); }
.lm-home-situations { background: var(--lm-bg); }
.lm-home-technology,
.lm-home-faq { background: var(--lm-tint); }
.lm-home-steps,
.lm-home-product,
.lm-home-precautions { background: var(--lm-surface); }
.lm-home-video { background: var(--lm-tint); }

.lm-home-steps__grid,
.lm-home-product__grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--lm-space-8);
  margin-block: 0;
}

.lm-home-steps__grid > .wp-block-column,
.lm-home-product__grid > .wp-block-column { min-width: 0; margin: 0; }

.lm-home-steps .lm-step-list > * + *,
.lm-home-product__copy > * + * { margin-top: var(--lm-space-4); }

.lm-home-steps__media img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.lm-home-product__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--lm-radius-card);
}

.lm-home-price {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* --lm-space-5 n'existe pas dans les jetons : la déclaration était invalide, donc sans
   effet. L'échelle du thème saute de 4 à 6 : on prend 6 (24 px). */
.lm-home-concentration { margin-top: var(--lm-space-6); }

/* CTA accent du bloc produit. Le style porte sur le lien natif : la classe composant
   lm-btn--accent posée sur le wrapper Gutenberg peignait un fond carré (radius 0). */
.lm-home-product .wp-block-buttons .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lm-space-2);
  min-height: 48px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: var(--lm-radius);
  font-family: var(--lm-font-sans);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--lm-on-dark);
  background: var(--lm-accent);
  transition: transform 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.lm-home-product .wp-block-buttons .wp-block-button__link:hover {
  background: var(--lm-accent-hover);
}

.lm-home-product .wp-block-buttons .wp-block-button__link:active {
  transform: scale(.98);
}

.lm-home-product .wp-block-buttons .wp-block-button__link:focus-visible {
  outline: 2px solid var(--lm-accent);
  outline-offset: 2px;
}

.lm-home-product__copy ul { padding-left: 1.2em; }
.lm-home-product__copy li + li { margin-top: var(--lm-space-2); }

.lm-home-video .lm-prod-video__figure { margin-top: var(--lm-space-6); }
.lm-home-video .lm-prod-video__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--lm-line);
  border-radius: var(--lm-radius-card);
}
.lm-home-video .lm-prod-video__thumb img { aspect-ratio: 16 / 9; object-fit: cover; }
.lm-home-video .lm-prod-video__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  background: var(--lm-surface);
  border: 1px solid var(--lm-line);
  border-radius: 50%;
}
.lm-home-video .lm-prod-video__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-40%, -50%);
  border-block: 9px solid transparent;
  border-left: 15px solid var(--lm-ink);
}
.lm-home-video .lm-prod-video__open {
  position: absolute;
  inset: auto auto var(--lm-space-4) 50%;
  transform: translateX(-50%);
  padding: var(--lm-space-1) var(--lm-space-3);
  color: var(--lm-ink);
  background: var(--lm-surface);
  border-radius: var(--lm-radius);
}
.lm-home-video .lm-prod-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: var(--lm-space-4);
  overflow: hidden;
  border-radius: var(--lm-radius-card);
}
.lm-home-video .lm-prod-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lm-home-video .lm-prod-video__caption { margin-top: var(--lm-space-3); color: var(--lm-muted); }

/* Mesure du corps : le plafond de 68ch ne visait que deux sections texte (et le sélecteur
   du chapô vidéo était mort), d'où des paragraphes à 1100 px de large. Généralisé à
   l'accueil ; les colonnes étroites (cartes, usages, offre, commande) ne bougent pas. */
.lm-home .lm-section p { max-width: 68ch; }

.lm-home-faq .lm-faq-list { max-width: 72ch; margin-top: var(--lm-space-6); }

/* Le H2 de la liste d'étapes suivait une échelle héritée (2.6vw → 37,4 px à 1440)
   au lieu de l'échelle h2 du thème (3vw → 41,6 px à 1440). */
.lm-home-steps .lm-step-list h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }

.lm-home-order { scroll-margin-top: 88px; }

/* .lm-order-block porte son propre padding-block (components.css:491) : sans cette remise
   à zéro, la section commande cumulait 2 × 64 px au lieu de son palier. */
.lm-home-order .lm-order-block { padding-block: 0; }

@media (max-width: 767px) {
  .lm-home-steps__grid,
  .lm-home-product__grid { grid-template-columns: minmax(0, 1fr); }

  .lm-home-steps__media { order: -1; }
  .lm-home-product__media { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-home { scroll-behavior: auto; }
}