/* ============================================================
   SKEION — aiXplore page: what belongs to this page only.
   Loaded after /assets/site/site.css. Everything shared (page head, cards, CTA band) comes from the system:
   see docs/build/13-design-system.md. Rewrite of 5 October 2026: docs/build/29-other-pages-rewrite.md
   (head, then the capture with what the tool does beside it, see also, pilot project).
   ============================================================ */

/* ---------- 01 Head: the product mark ----------
   Below 1024 px it sits above the eyebrow (DOM order: mark, copy);
   from 1024 px it moves to the right-hand column, level with the title. No section number (audit A16). */
.ax-logo { display: block; height: 64px; margin: 0 0 20px; }
.ax-logo img { width: auto; height: 100%; }
@media (min-width: 1024px) {
  .ax-head .page-head-grid { grid-template-columns: var(--idx) minmax(0, 1fr) auto; column-gap: 0; }
  .ax-head .page-head-copy { grid-column: 2; grid-row: 1; }
  .ax-logo { grid-column: 3; grid-row: 1; align-self: start; height: 124px; margin: 14px 0 0 56px; }
}
@media (max-width: 767px) { .ax-logo { height: 56px; margin-bottom: 16px; } }

/* ---------- The real interface, then what the tool does (three short cards) ----------
   From 1024 px the cards stand in a column beside the capture; from 600 to 1023 px they sit side by side under it;
   below 600 px they follow each other. */
.ax-show {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px;
  padding-left: var(--idx); margin-top: clamp(32px, 4vw, 56px);
}
.ax-show > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .ax-fig { grid-column: 1 / span 8; }
  .ax-what { grid-column: 9 / -1; align-self: start; padding-top: 6px; }
}
/* the home darkens the edges of its crop; here the left panel and the Save / Load row must stay legible */
.ax-fig .ax-frame::after { display: none; }
.ax-fig .fig-cap { margin-top: 14px; }
.ax-fig .fig-cap > .fig-n, .ax-fig .fig-cap > .fig-d { display: inline; }   /* one line: what you see, then its nature */
.ax-feats { display: grid; gap: 26px; margin-top: 18px; }
.ax-feats .card { gap: 8px; }
.ax-feats .card .rule { margin-bottom: 4px; }
.ax-feats .card-t { font-size: clamp(18px, calc(0.3vw + 15px), 20px); }
.ax-feats .card-b { font-size: 0.97rem; line-height: 1.5; }
html[lang="fr"] .ax-feats .card-t, html[lang="fr"] .ax-feats .card-b { hyphens: manual; -webkit-hyphens: manual; }   /* short sentences: no word cut in two */
@media (min-width: 600px) and (max-width: 1023px) {
  .ax-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) { .ax-feats { gap: 20px; } }