/* =========================================================================
   v1-fin-2.css — FINITION haut de gamme (nsx-governance / nsx-elite /
   espace-employeur). Chargé APRÈS v1-theme.css.
   Ne cible que le <main> de ces 3 pages : hero photo « Yann » 16/9 encadrée,
   panneau pétales horizontal (couleur de pôle + filigrane blanc), présentation
   claire des 6 étapes Tessera™ / des 4 packs, grille de stats.
   S'appuie sur les utilitaires déjà posés par v1-theme.css et v1-fin-1.css
   (.v1-photoframe, .v1-petalpanel, .v1-statgrid, .pgm-suffix, .v1-abbr).
   Aucune animation en boucle — interactions au survol uniquement.
   ========================================================================= */

/* ---- 1) Hero : cadre photo 16/9 à la place de l'ancien aplat portrait ---- */
.v1-hero .v1-hero-grid{ align-items:center; }
.v1-hero .v1-photoframe{
  border-radius:26px;
  box-shadow:0 26px 62px -24px color-mix(in srgb, var(--c-pole) 55%, transparent);
}
.v1-hero .v1-photoframe img{ aspect-ratio:16/9; width:100%; }
@media (max-width:720px){
  .v1-hero .v1-photoframe{ max-width:600px; margin-inline:auto; }
}

/* ---- 2) Panneau pétales décoratif, horizontal et sobre (hero ou bandeau) ---- */
.v1-petalpanel.is-band{
  display:grid; gap:16px; align-content:center;
  padding:clamp(26px,3.4vw,40px);
}
.v1-petalpanel.is-band .v1-btn{ justify-self:start; }
/* fond navy garanti-AA pour les pôles clairs (Elite = jaune) : texte blanc lisible */
.v1-petalpanel.is-navy{ background:var(--c-navy); }
.v1-petalpanel.is-navy .v1-eyebrow{ color:var(--c-yellow); }
.v1-petalpanel.is-navy .v1-eyebrow::before{ background:var(--c-yellow) !important; }
/* bandeau promesse nsx-elite.html (is-band.is-navy avec CTA) : centré, contrairement
   aux bandeaux « chiffres-clés » (gov/employeur) qui restent alignés à gauche */
.v1-petalpanel.is-band.is-navy{ text-align:center; justify-items:center; }
.v1-petalpanel.is-band.is-navy .v1-eyebrow{ justify-content:center; }
.v1-petalpanel.is-band.is-navy .v1-btn{ justify-self:center; }
/* variante « chiffres-clés » posée dans le panneau pétales */
.v1-petalpanel .v1-statgrid > div{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-left:4px solid rgba(255,255,255,.55);
}
.v1-petalpanel .v1-statgrid b{ color:#fff; }
.v1-petalpanel .v1-statgrid span{ color:rgba(255,255,255,.85); }

/* ---- 3) Étapes Tessera™ / packs : hiérarchie nette, plus d'air ---- */
/* les 6 étapes gardent leur grille .v1-steps ; on renforce seulement le rythme */
main .v1-steps{ gap:clamp(14px,1.8vw,20px); }
main .v1-step{ transition:transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease); }
main .v1-step:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -20px color-mix(in srgb, var(--c-pole) 55%, transparent);
}
/* 4 packs : mini-cartes clarifiées, numéro de séquence discret */
main #packs .v1-grid4{ gap:clamp(14px,1.8vw,20px); }
main #packs .v1-mini{ position:relative; transition:transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease); }
main #packs .v1-mini:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -20px color-mix(in srgb, var(--c-pole) 55%, transparent);
}
main #packs .v1-mini .kick{
  display:inline-block; background:var(--tint-pole); color:var(--c-pole);
  font-weight:800; border-radius:999px; padding:.18em .7em; font-size:.78rem;
}
@media (prefers-reduced-motion:reduce){
  main .v1-step, main #packs .v1-mini{ transition:none; }
  main .v1-step:hover, main #packs .v1-mini:hover{ transform:none; }
}

/* ---- 4) Grille de stats (renfort ; base dans v1-theme + v1-fin-1) ---- */
main .v1-statgrid{ margin-top:22px; }

/* ---- 5) Homogénéité marques : suffixe programme + CECRL ---- */
/* .pgm-suffix (vert) et .v1-abbr sont déjà stylés dans v1-theme / v1.css /
   v1-fin-1 ; rien à redéclarer ici pour rester cohérent partout. */