/* Allonia — product pages (Modèles, NEO, NEXUS) and use cases. Every component comes from
   base.css; this file only places the live scenes in the hero visual slot and adds the
   few product-specific layouts. */

/* A scene as the hero visual: a bevelled instrument panel, full height of the text block */
.page-hero__visual--scene {
  display: flex; clip-path: var(--bevel); border: 1px solid var(--line-2);
  background: #090b16; overflow: hidden;
}
.page-hero__visual--scene .scene { --scene-h: 100%; height: 100%; width: 100%; border-bottom: 0; }
.page-hero__visual--scene .scene .rag, .page-hero__visual--scene .scene .agent { flex: 1; }
@media (max-width: 899px) { .page-hero__visual--scene { --visual-h: 17rem; } }

/* The same panel inside a section (beside a text column) */
.scene-frame { clip-path: var(--bevel); border: 1px solid var(--line-2); background: #090b16; overflow: hidden; min-width: 0; }
.scene-frame .scene { border-bottom: 0; }

/* Four spaces / feature tiles */
.tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { display: grid; align-content: start; gap: .6rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--bg); }
.tile__num { font-size: var(--step--1); font-weight: 600; color: var(--fg-3); letter-spacing: .04em; }
.tile__title { font-size: var(--step-2); line-height: 1.12; letter-spacing: -.02em; font-weight: 560; color: var(--fg); }
.tile__text { color: var(--fg-2); }
@media (min-width: 700px) { .tiles--2, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) { .tiles--3 { grid-template-columns: 1fr; } }

/* Infrastructure choices */
.infra { display: flex; flex-wrap: wrap; gap: .6rem; }
.infra li { padding: .6rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-pill); color: var(--fg); font-weight: 520; }
.infra li::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .6rem; border-radius: 50%; border: 1.5px solid var(--sky); vertical-align: .05em; }

/* Use-case cards: tags under the summary */
.case-card__tags { margin-top: .9rem; }
.usecases .case-card__body { gap: .55rem; }
.usecases .case-card { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.usecases .case-card__panel ul { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--fg-2); }

/* Contact page aside */
.contact-aside { display: grid; gap: var(--space-l); align-content: start; }
.contact-aside__block { display: grid; gap: .5rem; padding-top: var(--space-s); border-top: 1px solid var(--line); }
.contact-aside__label { font-size: var(--step--1); color: var(--fg-3); }

/* Text-only case cards: the odd last card of a 2-column row stays a plain card (no cover to lay down) */
@media (min-width: 640px) and (max-width: 1079px) {
  .usecases :is(.grid--3, .grid--4).grid--fixed > .case-card:last-child:nth-child(odd) { display: flex; }
}
.usecases .case-card__summary, .usecases .case-card__panel { max-width: 62ch; }

/* About: the group logo under the heading */
.about-group__logo { height: 32px; width: auto; margin-top: var(--space-s); opacity: .92; }