/* Hero alignment only. Linked from transformRefonteHtml on every public page.
   Ports the staging hero title cap, column, and button alignment.
   Does not restyle headers, footers, section headings, rails, or page bodies.
   /culture already matches staging through culture.css; these selectors lose
   to that page's more specific column and keep the same 72px title. */

:root{
  --nk-hero-top:calc(72px + clamp(40px, 5vw, 64px));
}

:is(.hero, .chero, .ar-h, .lg-h) h1,
.col-v6 :is(.intro, .ah, .wk) h1{
  font-size:clamp(40px, 5vw, 72px)!important;
  font-weight:300!important;
}

:is(.hero, .chero){
  --nk-hero-gutter:clamp(22px, 5vw, 160px);
  --nk-hero-max:1760px;
}
:is(.hero, .chero) > .wrap,
:is(.ar-h, .lg-h) > .wrap{
  --nk-hero-gutter:clamp(22px, 5vw, 160px);
  --nk-hero-max:1760px;
  max-width:calc(var(--nk-hero-max) + 2 * var(--nk-hero-gutter));
  padding-left:var(--nk-hero-gutter);
  padding-right:var(--nk-hero-gutter);
}
:is(.hero, .chero) .hero-ln{
  left:max(var(--nk-hero-gutter), calc((100% - var(--nk-hero-max)) / 2));
  right:max(var(--nk-hero-gutter), calc((100% - var(--nk-hero-max)) / 2));
}

/* Heroes that slide under the menu. Agencies stays on the chero padding. */
body:is([data-page="accueil"],[data-page="services"],[data-page="a-propos"],[data-page="carrieres"],[data-page="blogue"],[data-page="collection"]) .hero{
  padding-top:var(--nk-hero-top);
  align-items:flex-start;
}
body[data-page="groupe"] .chero{
  padding-top:calc(var(--nk-hero-top) - 72px);
}
body[data-page="accueil"] .hero .wrap > .lab,
body[data-page="groupe"] .chero .wrap > .lab{
  display:block;
}

body[data-page="blogue"] .bl-h .wrap{padding-bottom:40px}
body[data-page="blogue"] .bl-h .hero-b{margin-top:24px}
body[data-page="blogue"] .bl-h .hero-ln{bottom:16px}

/* Home: title, text, and buttons share the left edge. Two nowrap lines from 1024. */
body[data-page="accueil"] .hero .wrap{text-align:left}
body[data-page="accueil"] .hero .hero-b{
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  width:100%;
  margin-left:0;
  margin-right:0;
}
body[data-page="accueil"] .hero .hero-b p,
body[data-page="accueil"] .hero-ct{
  margin-left:0;
  margin-right:0;
  text-align:left;
}
body[data-page="accueil"] .hero-ct{justify-content:flex-start}

@media (min-width:1024px){
  body[data-page="accueil"] .hero h1.h1s{
    width:100%;
    max-width:none!important;
    margin:0;
    text-align:left;
    text-wrap:wrap;
    font-size:clamp(40px, 8cqi, 72px)!important;
  }
  body[data-page="accueil"] .hero h1.h1s .hero-br{
    display:block;
    height:0;
    line-height:0;
    font-size:0;
    overflow:hidden;
  }
  body[data-page="accueil"] .hero h1.h1s .hero-l{
    white-space:nowrap;
    text-wrap:nowrap;
  }
  body[data-page="services"] .hero h1.h1s{
    max-width:100%!important;
    font-size:clamp(40px, 5vw, 72px)!important;
    text-wrap:wrap;
  }
  /* Contact keeps the production form. Widen the title; the 6cqi size belongs
     to staging's single-column .ct2, which is not part of this change. */
  body[data-page="contact"] .hero h1.h1s{
    max-width:100%!important;
    text-wrap:wrap;
  }
  .ar-hg{grid-template-columns:minmax(0, 1fr);gap:24px}
  .ar-by{min-width:0;justify-self:start}
  body .ar-h h1{max-width:none;line-height:1.05;text-wrap:wrap}
}

/* Projects keeps the production chero. Drop the 14ch cap so the title can use the column. */
body[data-page="projets"] .chero h1{max-width:none!important}

/* Collection heroes only. Index lists, artwork grids, and pagers stay on the 1360 column. */
.col-v6 :is(.intro.wrap, .ah.wrap, .wk.wrap){
  --mx:clamp(22px, 5vw, 160px);
  max-width:calc(1760px + 2 * var(--mx));
  padding-left:var(--mx);
  padding-right:var(--mx);
}
.col-v6 .intro{padding-top:calc(var(--nk-hero-top) - 72px)}