/* ======================================================================
   Illustrations de la maison — mission wolf-illustrations-integration.
   Trois emplois : visuel d'en-tete de l'accueil, visuels des six cartes
   produit, schemas collés en ligne (variables --sch-* de schemas-themes.css,
   a charger AVANT cette feuille). Aucune couleur en dur : jetons du site.
   Proprietes logiques : compatible RTL.
   ====================================================================== */

/* --- Schema en ligne ---------------------------------------------------
   Le fond de bloc est celui du schema (--sch-nuit : nuit en sombre, creme en
   clair) : c'est sur lui que les contrastes de schemas-themes.css sont mesures.
   Sous 1024 px, 1200 px de schema reduits a 350-670 px rendraient le texte a 5-10 px :
   le schema garde une largeur minimale (900 px = texte >= 12,7 px) et defile DANS son
   cadre (cadre focalisable au clavier), jamais dans la page. */
.wolf-schema {
  margin: var(--wolf-space-8) 0 0;
  background: var(--sch-nuit, #0f1115);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
  overflow: hidden;
}
.wolf-schema__scroll { overflow-x: auto; }
.wolf-schema__scroll:focus-visible { outline: var(--wolf-border-thick) solid var(--wolf-color-focus); outline-offset: -3px; }
.wolf-schema svg { display: block; width: 100%; height: auto; }
@media (max-width: 1023px) {
  .wolf-schema svg { min-width: 900px; }
}

/* --- Visuel d'en-tete de l'accueil --------------------------------------
   Colonne de droite a partir de 1024 px (les anneaux decoratifs lui cedent la
   place), sous le texte en dessous. 1168 px de large natifs : jamais etire
   au-dela (max-width), cadre en 3:2 par recadrage. */
.wolf-home .hv-hero__visual {
  margin: var(--wolf-space-8) 0 0;
  max-width: 584px;
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-lg);
  overflow: hidden;
}
.wolf-home .hv-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 40% 50%;
}
@media (min-width: 1024px) {
  .wolf-home .hv-hero--visuel .hv-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--wolf-space-12);
    align-items: center;
  }
  .wolf-home .hv-hero--visuel .hv-hero__inner > .hv-hero__visual { margin: 0; grid-column: 2; grid-row: 1 / span 6; justify-self: end; width: 100%; }
  .wolf-home .hv-hero--visuel .hv-hero__inner > :not(.hv-hero__visual) { grid-column: 1; }
  .wolf-home .hv-hero--visuel .hv-hero__rings { display: none; }
}

/* --- Visuel de carte produit --------------------------------------------
   Images en portrait 784x1168 : recadrage CSS en 16:10, sujet centre, jamais
   deforme. Pleine largeur de la carte (compense le padding de la carte). */
.wolf-product-card__visual {
  margin: calc(-1 * var(--wolf-space-8)) calc(-1 * var(--wolf-space-8)) var(--wolf-space-6);
  border-radius: var(--wolf-radius-lg) var(--wolf-radius-lg) 0 0;
  overflow: hidden;
  border-block-end: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-product-card__visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 20%;
}
.wolf-product-card__visual + .wolf-product-card__head + .wolf-product-card__title { margin-block-start: var(--wolf-space-5); }