/* ==========================================================================
   Studio Aria — accueil (lot 2a), partie 1/2 : HÉROS. Chargé dans le <head> d’index.html, après site.css.
   Ne contient que ce qui sert au premier écran : c’est la seule feuille propre à l’accueil qui bloque le rendu.
   Les sections sous la ligne de flottaison sont dans home-sections.css, appelé dans <main> juste après le héros
   (lien « body-ok » : il ne retarde pas la première peinture du héros, donc ni le FCP ni le LCP).
   Tout est scopé sous body.home ou sous des classes propres à l’accueil (hh-, hm-, hx-, ha-, hs-, hr-, hp-, hc-).
   Motion : transform / opacity / clip-path uniquement ; le texte ne rebondit jamais ; reduced-motion = états finaux.
   ========================================================================== */

body.home{--cg:clamp(16px,2vw,28px);--rule:1.5px solid var(--encre)}

/* ==========================================================================
   1. HÉROS — « l'affiche qui déborde »
   ========================================================================== */
.home .hero.hh{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:100svh;text-align:left;
  padding:calc(var(--nav-h) + clamp(20px,4vh,48px)) 0 clamp(64px,9vh,96px);background:var(--brume);overflow:clip}
.hh-in{position:relative;z-index:2;pointer-events:none;
  /* corps du H1 piloté par la hauteur d'écran : les CTA restent au premier écran (1440×900, 1280×720) */
  --F:min(var(--fs-display),max(60px,27vh - 100px))}
.hh-in a,.hh-in button{pointer-events:auto}
.hh-eyebrow{margin:0 0 clamp(14px,2.4vh,26px);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.18em;line-height:1.35;text-transform:uppercase;color:var(--encre2)}
.home .hero .hh-h1{font-size:var(--F);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:none;margin:0;text-wrap:initial}
.hh-h1 .l{white-space:nowrap}
/* Ligne 3 calée à droite : elle sort de la grille et le bord de l'écran coupe la fin de « place » (0,2em de débord).
   Ancrage par la gauche (retrait calculé) plutôt que text-align:right : quand la serif remplace la police de repli,
   seule la fin de ligne bouge, « de la » reste en place (aucun décalage de mise en page, CLS 0).
   --W = largeur mesurée de « de la place. » en em du H1 (_audit/lot2a, mesure Playwright) */
.hh-l3{--W:5.82;margin-top:-.5em;padding-left:max(0px,calc(100vw - max(var(--gutter), (100vw - 1280px) / 2) - var(--W) * 1em + .2em))}
.hh-h1 em.hh-place{position:relative;display:inline-block;isolation:isolate;font-size:2.1em;line-height:.8;letter-spacing:-.02em;color:var(--perv-f);transform-origin:20% 80%}
/* soulignement pêche dessiné sous le mot */
.hh-ul{position:absolute;left:6%;width:96%;bottom:.06em;height:.15em;overflow:visible;z-index:-1;pointer-events:none}
.hh-ul path{fill:none;stroke:var(--peche);stroke-width:.075em;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Pied du héros : filet encre puis grille 12 colonnes */
.hh-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);row-gap:clamp(12px,1.8vh,20px);align-items:start;
  margin-top:calc(var(--F) * .34 + 24px);padding-top:clamp(18px,2.6vh,28px);border-top:var(--rule)}
.home .hero .hh-lede{grid-column:1 / span 5;margin:0;max-width:none;font-size:clamp(17px,15px + .45vw,21.5px)}
.hh-side{grid-column:7 / span 6;display:grid;gap:clamp(14px,2.2vh,22px)}
.hh-accroche{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,16px + 1.6vw,40px);line-height:1;letter-spacing:var(--ls-serif);color:var(--encre)}
.hh-accroche .l{padding-left:2.2em}
.hh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.hh-link{font-size:17px;color:var(--encre);display:inline-flex;align-items:center;min-height:var(--hit);padding-bottom:0;background-position:0 calc(100% - 9px)}
.hh-link:hover,.hh-link:focus-visible{background-position:100% calc(100% - 9px)}
.hh-mention{grid-column:1 / span 5;font-size:14px;font-weight:600;color:var(--encre2)}
.home .hh .hint{left:auto;right:var(--gutter);transform:none;bottom:18px}

/* Entrée « on pose la planche » (04 §3.1) : le H1 glisse (translation seule : LCP non retardé),
   « place » se pose en dernier (rotation + échelle, sans rebond : c'est du texte), puis le soulignement se dessine. */
html.js:not(.intro):not(.no-intro) .hh-place{transform:translateY(.08em) rotate(-4deg) scale(1.05)}
html.js:not(.intro):not(.no-intro) .hh-ul{clip-path:inset(-50% 100% -50% 0)}
html.intro:not(.intro-done) .hh-place{animation:hh-place var(--t-4) var(--ease-out) 380ms both}
html.intro:not(.intro-done) .hh-ul{animation:hh-draw 460ms var(--ease-inout) 760ms both}
@keyframes hh-place{from{transform:translateY(.08em) rotate(-4deg) scale(1.05)}}
@keyframes hh-draw{from{clip-path:inset(-50% 100% -50% 0)}to{clip-path:inset(-50% 0 -50% 0)}}

@media (min-width:701px) and (max-width:1080px){
  /* palier tablette : une bande libre sous le pied du héros accueille les stickers (hors texte) */
  .home .hero.hh{padding-bottom:clamp(150px,22vh,200px)}
}
@media (max-width:1080px){
  .home .hero .hh-lede{grid-column:1 / span 6}
  .hh-side{grid-column:7 / span 6}
  .hh-mention{grid-column:1 / span 6}
}
@media (max-width:700px){
  .home .hero.hh{min-height:0;justify-content:flex-start;padding:calc(var(--nav-h) + 14px) 0 196px}
  .hh-in{--F:clamp(40px,13vw,60px)}
  .hh-h1 .l:first-child{white-space:normal}
  .hh-h1 em.hh-place{font-size:2.55em}
  .hh-l3{--W:6.6;margin-top:-.08em}
  .hh-foot{grid-template-columns:minmax(0,1fr);margin-top:calc(var(--F) * .5 + 6px)}
  .home .hero .hh-lede,.hh-side,.hh-mention{grid-column:1}
  .hh-side{display:flex;flex-direction:column-reverse;gap:22px}
  .hh-cta{gap:6px 24px}
  .hh-cta .btn{width:100%}
  .hh-accroche .l{padding-left:1.4em}
}

@media (prefers-reduced-motion:reduce){
  .hh-place{transition-property:opacity,color!important;transform:none!important}
  .hh-ul{clip-path:none!important}
}
@media print{.hh-l3{padding-left:0}}