/* ============================================================================
   v3b — bannière d'entrée « affiche en escalier »
   Direction : luxe sobre, avec un seul emprunt à la grille suisse (l'escalier tombe sur les colonnes).
   Remplace l'entrée de v3 : plus de trame, plus d'étiquette, plus de « texte à gauche / logo à droite ».
   Se charge APRÈS v3.css et ne touche que l'accueil.
   ============================================================================ */

/* ---------- Empilé (mobile, tablette, mouvement réduit) ---------- */
.hero-grid{row-gap:var(--sp-4);align-content:center}
.mono{display:none}
.h1{
  font-size:clamp(32px,10vw,84px);line-height:1.02;letter-spacing:-.03em;
}
.h1 .ln:nth-child(3) .li{font-size:.5em;margin-top:.7em;line-height:1.2}
.h1 .em::after{height:.055em;bottom:.04em;right:.06em}

.hero-act{display:grid;gap:var(--sp-2);max-width:540px}
.act-form{margin:0}
.act-label{
  display:block;margin:0 0 10px;
  font:500 12px/1.4 'Hanken Grotesk',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);
}
.act-label span{letter-spacing:.04em;text-transform:none;font-weight:400}
.act-row{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:flex-end}
.act-input{
  flex:1 1 220px;min-width:0;box-sizing:border-box;min-height:52px;margin:0;padding:0 2px 6px;
  font:300 22px/1.2 var(--font-d);letter-spacing:-.01em;color:var(--fg);
  background:transparent;border:0;border-bottom:1.5px solid var(--ink-900);border-radius:0;
}
.act-input::placeholder{color:var(--muted);opacity:1}
.act-input:focus-visible{border-bottom-color:var(--orange)}
.act-note{margin:0;font:400 var(--fs-s)/1.5 'Hanken Grotesk',system-ui,sans-serif;color:var(--fg-2)}

/* ---------- Grand écran : l'affiche, sur les 12 colonnes ---------- */
@media (min-width:1024px){
  .hero-grid{
    grid-template-rows:minmax(0,1fr) auto;align-items:end;align-content:stretch;
  }
  .h1{
    grid-column:1/-1;grid-row:1;align-self:end;margin-bottom:var(--sp-4);
    font-size:clamp(40px,min(8.6vw,17vh),132px);line-height:1;
  }
  .h1 .li{white-space:nowrap}
  /* Le retrait tombe exactement sur le bord d'une colonne : 2e rangée sur la colonne 3, 3e sur la colonne 6. */
  .h1 .ln:nth-child(2){margin-left:calc((100% + var(--col-gap)) / 12 * 2)}
  .h1 .ln:nth-child(3){margin-left:calc((100% + var(--col-gap)) / 12 * 5)}
  .h1 .ln:nth-child(3) .li{font-size:.34em;margin-top:.7em;line-height:1.25}
  .mono{display:block;grid-column:1/5;grid-row:2;align-self:end;justify-self:start;width:min(100%,21vh)}
  .hero-act{grid-column:6/-1;grid-row:2;align-self:end}
}

/* ---------- États de départ de l'entrée (js/v3b.js pose ensuite les valeurs image par image) ---------- */
html.v3-anim .hero-act{opacity:0}

/* Finalisation 14-10 : accueil — étiquettes orange sur champagne à 4,1:1 → 4,8:1 (AA) ; « Voir ce service » 18 px → cible 26 px au doigt, sans bouger la mise en page */
#methode .sec-label,#methode .tp-lbl{color:#8F4A08}
.proj-link{padding-block:4px;margin-block:-4px}