/* v22 « craft » — company-hero. Loaded after every existing sheet.
   Scope: .hero-v22 (= section.section.hero.company-hero#hero of company.html).
   Rien ici ne touche au header, au footer ni au style partagé de .btn-primary. */

.hero-v22 {
  --hero-ease: cubic-bezier(.2, .7, .2, 1);
  --hero-shift: 0px;   /* parallaxe, pilotée par section.js, plafonnée à 10px */
  --hero-cue-op: 1;    /* opacité de l'indice de scroll, pilotée par section.js */
}

/* Le reveal générique est neutralisé : la chorégraphie d'entrée du hero est
   entièrement en CSS (elle marche donc aussi sans JS, et sans double animation). */
.js .hero-v22 .reveal { opacity: 1; transform: none; transition: none; }

/* ---------- Titre ---------- */
/* L'interlignage (1,06) et l'interlettrage (-,055em) de company-v16 sont conservés :
   le titre n'est pas retypographié, il est seulement mis en mouvement ligne à ligne. */
/* Chaque ligne est une fenêtre : le texte monte depuis le bas au chargement.
   Les paddings/marges compensées évitent que jambages et lettres finales
   (interlettrage négatif) soient rognés par l'overflow. */
.hero-v22 .hero-line {
  display: block;
  overflow: hidden;
  padding: .13em .12em .25em 0;
  /* Toute la compensation est portée par la marge basse : deux marges négatives
     adjacentes fusionnent (la plus négative gagne), donc la mettre des deux côtés
     desserrait l'interligne de .13em. */
  margin: 0 -.12em -.38em 0;
}
.hero-v22 .hero-line:first-child { margin-top: -.13em; }
.hero-v22 .hero-line-in { display: inline-block; }

/* ---------- Ligne de support ---------- */
.hero-v22 .hero-support {
  margin: 24px 0 0;
  max-width: 30em;
  color: #687581;          /* 4,7:1 sur blanc */
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.008em;
  text-wrap: balance;
}

/* ---------- Rythme vertical (grille de 8) ---------- */
.company-page .hero-v22 .hero-actions { margin-top: 32px; }
.hero-v22 .availability {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .012em;
  color: #687581;          /* remonte le contraste : #71808e était à 4,05:1 */
}

/* ---------- Aquarelle : fondu des bords dans le blanc ---------- */
.hero-v22 .hero-art {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .30) 5%, rgba(0, 0, 0, .82) 11%,
      #000 17%, #000 88%, rgba(0, 0, 0, .55) 96%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .30) 5%, rgba(0, 0, 0, .82) 11%,
      #000 17%, #000 88%, rgba(0, 0, 0, .55) 96%, rgba(0, 0, 0, 0) 100%);
}
.hero-v22 .hero-art img { transform: translate3d(0, var(--hero-shift), 0); }

/* ---------- Indice de scroll : un trait fin, aligné sur la colonne de texte ---------- */
.hero-v22 .hero-cue {
  position: absolute;
  left: 0; right: 0; bottom: 48px;
  width: min(100%, 1320px);
  margin-inline: auto;
  padding-inline: var(--gutter);
  pointer-events: none;
  opacity: var(--hero-cue-op);
  transition: opacity .3s linear;
}
.hero-v22 .hero-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 38px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(11, 18, 32, .22), rgba(11, 18, 32, .03));
}
.hero-v22 .hero-cue-line::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 13px;
  background: var(--blue);
}

/* ---------- Chorégraphie : titre → support → bouton → mention → aquarelle ---------- */
@keyframes heroLineUp   { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes heroRise     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes heroArtIn    { from { opacity: 0; transform: translateY(14px) scale(1.014); } to { opacity: 1; transform: none; } }
@keyframes heroCueIn    { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes heroCueTravel{ 0% { transform: translateY(-15px); opacity: 0; }
                          22% { opacity: .55; }
                          72% { opacity: 0; }
                          100% { transform: translateY(38px); opacity: 0; } }

.hero-v22 .hero-line:nth-of-type(1) .hero-line-in { animation: heroLineUp 700ms var(--hero-ease)  60ms both; }
.hero-v22 .hero-line:nth-of-type(2) .hero-line-in { animation: heroLineUp 700ms var(--hero-ease) 150ms both; }
.hero-v22 .hero-support   { animation: heroRise  600ms var(--hero-ease) 300ms both; }
.hero-v22 .hero-actions   { animation: heroRise  600ms var(--hero-ease) 380ms both; }
.hero-v22 .availability   { animation: heroRise  600ms var(--hero-ease) 460ms both; }
.hero-v22 .hero-art       { animation: heroArtIn 1000ms var(--hero-ease) 200ms both; }
.hero-v22 .hero-cue-line  { animation: heroCueIn 600ms var(--hero-ease) 1200ms both; }
.hero-v22 .hero-cue-line::after { animation: heroCueTravel 2.8s cubic-bezier(.45, 0, .25, 1) 1900ms infinite; }

/* ---------- ≤ 1100 px : la colonne de texte reprend de l'air ---------- */
@media (max-width: 1100px) {
  .hero-v22 .hero-support { font-size: 15px; }
  .hero-v22 .hero-cue { bottom: 36px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .hero-v22 .hero-line { padding-bottom: .22em; margin-bottom: -.35em; }
  .hero-v22 .hero-support {
    margin: 18px auto 0;
    max-width: 22em;
    font-size: 15px;
  }
  .company-page .hero-v22 .hero-actions { margin-top: 26px; }
  .hero-v22 .availability { margin-top: 12px; font-size: 11px; }
  /* Le trait vertical n'a pas de place propre au-dessus de l'aquarelle recadrée. */
  .hero-v22 .hero-cue { display: none; }
  /* Recadrage mobile : fondu plus court en haut, plus tardif en bas pour ne pas
     effacer les chaussures et l'ombre au sol. */
  .hero-v22 .hero-art {
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 4%, #000 12%,
        #000 93%, rgba(0, 0, 0, .5) 98%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 4%, #000 12%,
        #000 93%, rgba(0, 0, 0, .5) 98%, rgba(0, 0, 0, 0) 100%);
  }
}

/* Très petits écrans (≤ 380 px) : le plancher du clamp d'origine (2.05rem) ne
   descend jamais, et « Make your company » passait sur deux lignes — donc un
   titre sur trois lignes. Spécificité alignée sur company-v16 pour l'emporter. */
@media (max-width: 380px) {
  .company-page .hero-v22 h1 { font-size: clamp(1.72rem, 7.9vw, 2.05rem); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-v22 .hero-line-in,
  .hero-v22 .hero-support,
  .hero-v22 .hero-actions,
  .hero-v22 .availability,
  .hero-v22 .hero-art,
  .hero-v22 .hero-cue-line,
  .hero-v22 .hero-cue-line::after { animation: none; }
  .hero-v22 .hero-cue-line::after { opacity: .4; transform: translateY(12px); }
  .hero-v22 .hero-art img { transform: none; }
}