/* =============================================================================
   STELNEO — socle des pages secondaires

   Chargé APRÈS new_home_stelneo.css (tokens, base, primitives, en-tête, pied
   de page, FAQ, CTA finale, apparitions) et AVANT la feuille propre à chaque
   page (nos-produits.css, notre-methode.css, …).

   Contient tout ce qu'une page autre que l'accueil partage :
   en-tête opaque, hero « masthead », index tabulaire, bouton secondaire clair.

   Sommaire
   01. Compléments au socle de la home
   02. Hero de page
   03. Index tabulaire
   04. Responsive
   05. Préférences système
   ============================================================================= */

/* ------------------------------------------- 01. Compléments au socle */

/* Page courante dans la navigation : un filet ambre, pas une couleur de plus. */
.primary-nav > a:not(.nav-cta)[aria-current="page"] {
  color: var(--white);
  box-shadow: inset 0 -1px 0 var(--amber);
}

/* Bouton secondaire sur fond clair (pendant de .button--ghost-light). */
.button--ghost-dark {
  border-color: rgba(0, 47, 75, .28);
  color: var(--navy);
  --button-fill: rgba(0, 47, 75, .07);
}
.button--ghost-dark:hover,
.button--ghost-dark:focus-visible { border-color: var(--navy); }

/* ----------------------------------------------------- 02. Hero de page */
/* Masthead de catalogue. L'accueil s'ouvre sur une photographie plein écran ;
   une page secondaire s'ouvre sur son contenu : fond clair, titre éditorial et
   index tabulaire du contenu, qui sert aussi de navigation.
   Conséquence : l'en-tête ne peut plus être transparent sur cette page, il est
   marine dès le chargement. */
.site-header { background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .12); }

.page-hero {
  padding-top: calc(var(--header-height) + clamp(56px, 7vw, 96px));
  padding-bottom: clamp(12px, 2vw, 26px);
  background: var(--beige-l);
  border-bottom: var(--rule);
}
.page-hero__top {
  padding-bottom: clamp(46px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.page-hero h1 {
  max-width: 940px;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 92px);
  letter-spacing: -.05em;
  line-height: .96;
}
.page-hero__aside > p { max-width: 470px; margin: 0 0 26px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.7; }

/* ------------------------------------------------- 03. Index tabulaire */
/* Une table, pas des cartes : chaque ligne porte une référence, un libellé,
   une description courte et la donnée qui permet de trancher. Sert d'index
   de page autant que de navigation. */
.page-index { border-top: 1px solid rgba(0, 47, 75, .22); }
.page-index__head,
.page-index__row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1.15fr) minmax(0, 1.7fr) minmax(0, 1.15fr) 26px;
  gap: clamp(16px, 2vw, 28px);
  border-bottom: 1px solid rgba(0, 47, 75, .22);
}
.page-index__head {
  margin: 0;
  padding: 11px 0;
  color: var(--body);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-index__row {
  position: relative;
  min-height: 104px;
  padding: 22px 0;
  align-items: center;
  transition: background-color .25s ease, padding .34s var(--ease-sleek);
}
.page-index__row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 78px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s var(--ease-sleek);
}
.page-index__row:hover,
.page-index__row:focus-visible { background: var(--white); padding-inline: 18px; }
.page-index__row:hover::before,
.page-index__row:focus-visible::before { transform: scaleX(1); }

.pi-ref { color: var(--navy); font-family: var(--font-mono); font-size: 11px; }
.pi-name {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
}
.pi-use { font-size: 13.5px; line-height: 1.5; }
.pi-spec { color: var(--navy); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.page-index__row b { justify-self: end; color: var(--amber-d); font-weight: 500; transition: transform .22s var(--ease-out); }
.page-index__row:hover b { transform: translate(3px, -3px); }

/* Dernière ligne : renvoi latéral (sur-mesure, contact…), en retrait. */
.page-index__row--aside { border-bottom: 0; }
.page-index__row--aside .pi-name { color: var(--body); font-size: clamp(21px, 2vw, 27px); }

/* ------------------------------------------------------ 04. Responsive */

@media (max-width: 1120px) {
  .page-hero__top { grid-template-columns: minmax(0, 6fr) minmax(280px, 5fr); gap: 54px; }

  .page-index__head,
  .page-index__row { grid-template-columns: 68px minmax(0, 1.15fr) minmax(0, 1.6fr) minmax(0, 1.2fr) 24px; }
  .page-index__row::before { width: 68px; }
}

@media (max-width: 920px) {
  .page-hero { padding-top: calc(var(--header-height) + 62px); }
  .page-hero__top { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .page-hero h1 { font-size: clamp(44px, 8.6vw, 66px); }
  .page-hero__aside > p { max-width: none; }

  /* L'index devient une liste : la référence tient la colonne de gauche, le
     reste s'empile. Les en-têtes de colonnes n'ont plus d'objet. */
  .page-index__head { display: none; }
  .page-index__row {
    min-height: 0;
    padding: 22px 0;
    align-items: start;
    column-gap: 16px;
    row-gap: 7px;
    grid-template-columns: 58px minmax(0, 1fr) 24px;
    grid-template-areas:
      "ref name arrow"
      "ref use  use"
      "ref spec spec";
  }
  .pi-ref { grid-area: ref; padding-top: 7px; }
  .pi-name { grid-area: name; }
  .pi-use { grid-area: use; }
  .pi-spec { grid-area: spec; }
  .page-index__row b { grid-area: arrow; padding-top: 4px; }
  .page-index__row::before { width: 58px; }
}

@media (max-width: 680px) {
  .page-hero { padding-top: calc(var(--header-height) + 46px); }
  .page-hero__top { padding-bottom: 38px; }
  .page-hero__aside > p { margin-bottom: 22px; font-size: 16px; line-height: 1.62; }
  .page-hero__aside .button { width: 100%; }

  .page-index__row { grid-template-columns: 50px minmax(0, 1fr) 22px; column-gap: 12px; padding: 20px 0; }
  .page-index__row:hover { padding-inline: 0; }
  .page-index__row::before { width: 50px; }
  .pi-name { font-size: clamp(24px, 6.4vw, 30px); }
  .pi-use,
  .pi-spec { font-size: 12.5px; }
}

/* Appareils tactiles : pas d'état de survol persistant après un appui. */
@media (hover: none) and (pointer: coarse) {
  .page-index__row:hover { background: transparent; padding-inline: 0; }
  .page-index__row:hover::before { transform: scaleX(0); }
  .page-index__row:hover b { transform: none; }
}

/* -------------------------------------------- 05. Préférences système */
@media (prefers-reduced-motion: reduce) {
  .page-index__row:hover { padding-inline: 0; }
}