/* En-tête de page commun (11/11/2026) : même bord gauche, même départ sous le menu, même échelle.
   Un seul motif, deux variantes : texte seul (la plupart des pages) ou texte + visuel (pages métiers, contact).
   Les pages gardent leurs classes ; ces règles passent après leur feuille et s'imposent par la classe doublée (préfixe html). */

:root {
  --hero-top: var(--size-96);
  --hero-gap: var(--size-24);
  --hero-bottom: var(--size-64);
  --hero-title-measure: 20ch;
}
@media screen and (max-width: 61.9375em) {
  :root {
    --hero-top: var(--size-64);
    --hero-bottom: var(--size-48);
  }
}
@media screen and (max-width: 29.9375em) {
  :root {
    --hero-top: var(--size-48);
    --hero-gap: var(--size-16);
  }
}

/* Cadre : la grille officielle du site (1440 px, marges du conteneur). */
html .yam-hero-frame.yam-hero-frame {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-margin);
}

/* Départ sous le menu, identique partout. */
html .yam-hero.yam-hero {
  padding-top: var(--hero-top);
}

/* Surtitre */
html .yam-hero-kicker.yam-hero-kicker {
  margin: 0 0 var(--hero-gap);
  padding: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-weight: var(--weight-regular);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Titre */
html .yam-hero-title.yam-hero-title {
  max-inline-size: var(--hero-title-measure);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--type-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* Chapeau */
html .yam-hero-lead.yam-hero-lead {
  max-inline-size: var(--measure-lead);
  margin: var(--hero-gap) 0 0;
  font-size: var(--type-lead);
  line-height: var(--leading-lead);
  text-wrap: pretty;
}

/* Ajustements par page : ce qui, dans la mise en page d'origine, décalait l'en-tête. */

/* Pages métiers : le texte part en haut (et non centré sur la hauteur de la scène 3D). */
html .ed-hero-wrap.yam-hero,
html .ed-hero-wrap.yam-hero .ed-hero-grid {
  align-items: start;
}
html .ed-hero-copy .yam-hero-title {
  margin-top: 0;
}
html .ed-hero-copy {
  row-gap: var(--hero-gap);
}
html .ed-hero-copy > .yam-hero-kicker {
  margin-bottom: 0;
}
html .ed-hero-copy > .yam-hero-lead {
  margin-top: 0;
}

/* Réalisations : le cadre porte les marges, plus la page. */
html .work-section {
  padding-top: 0;
  padding-inline: 0;
}

/* Guides : l'en-tête part de la première colonne, comme les autres pages ; le texte garde sa colonne. */
html .yam-article-head.yam-hero {
  grid-column: 1 / -1;
}
html .yam-crumbs.yam-hero-kicker ol,
html .yam-crumbs.yam-hero-kicker li {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Contact et merci : la colonne de texte espace déjà ses éléments. */
html .contact-copy,
html .merci-copy {
  row-gap: var(--hero-gap);
}
html .contact-copy > .yam-hero-kicker,
html .merci-copy > .yam-hero-kicker {
  margin-bottom: 0;
}
html .merci {
  width: 100%;
  margin-inline: 0;
}
/* Le cadre de l'en-tête de Contact avait une hauteur fixe de 100 px, plus haute que le menu sur mobile. */
html .contact-header-frame {
  height: auto;
}

/* Petit écran : le fil d'Ariane ne répète pas le titre du guide, déjà affiché juste dessous. */
@media screen and (max-width: 29.9375em) {
  html .yam-crumbs.yam-hero-kicker li[aria-current] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}