/* ============================================================
   rs1/gnv-hero — mise en page propre
   Gabarit commun des bandeaux de tête des pages solution
   (.mp-gnvh, .mp-mnth, .mp-hv2 — mêmes règles, préfixes distincts).
   Le fond, le voile, le titre, le texte et les boutons viennent de
   .mp-bandeau, .mp-eyebrow et .mp-btn (assets/css/mp-tokens.css).
   ============================================================ */

/* Contenu calé en bas, comme une couverture (cf. .mp-hero--plein) */
.mp-gnvh{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mp-gnvh__in{ width: 100% }

/* Tailles (réglage « taille ») */
.mp-gnvh--moyen{ min-height: min(72vh, 46rem) }
.mp-gnvh--grand{ min-height: min(100svh, 56rem) }

/* Intensité du voile (réglage « overlay_opacity », 0 à .9).
   Plancher à .75 : le texte blanc reste lisible (AA) quelle que soit la photo. */
.mp-gnvh .mp-bandeau__media::after{
  opacity: clamp(.75, calc(.5 + var(--mp-gnvh-voile, .55) * .6), 1);
}

/* Atout sous le titre (réglage « atout ») : différenciant commercial,
   filet et pictogramme turquoise vif (signal sur fond sombre). */
.mp-gnvh__atout{
  display: flex;
  align-items: center;
  gap: .75rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.35rem 0 0;
  padding: .7rem 1.1rem .7rem .8rem;
  border: 1px solid var(--mp-trait-sombre);
  border-left: 3px solid var(--mp-turquoise-vif);
  border-radius: 0 var(--mp-r-sm) var(--mp-r-sm) 0;
  background: var(--mp-voile-sombre);
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-lg);
  font-weight: 700;
  line-height: 1.35;
  color: var(--mp-blanc);
}
.mp-gnvh__atout-ico{
  flex: none;
  display: grid;
  place-items: center;
  color: var(--mp-turquoise-vif);
}
.mp-gnvh__atout-ico svg{ display: block }
.mp-gnvh__atout + .mp-bandeau__texte{ margin-top: 1rem }
/* Le fragment /mot/ de l'atout n'est pas souligné : le seul soulignement
   du hero est celui du titre (21/09). Le mot garde son balisage d'exergue. */
/* Deux techniques selon la largeur (mp-tokens.css) : trait en ::after, et
   fond dégradé ligne par ligne sous 601 px. Les deux sont neutralisées. */
.mp-gnvh__atout .mp-exergue::after{ content: none }
.mp-gnvh__atout .mp-exergue{ background: none }

@media (max-width: 960px){
  .mp-gnvh--moyen{ min-height: min(62vh, 40rem) }
  .mp-gnvh--grand{ min-height: min(82svh, 48rem) }
}

@media (max-width: 600px){
  .mp-gnvh__atout{ font-size: var(--mp-t-base); align-items: flex-start }
  .mp-gnvh__atout-ico{ margin-top: .1rem }
  .mp-gnvh--moyen,
  .mp-gnvh--grand{ min-height: 0 }
}

/* ── Image : <picture> (WebP + repli), point focal ─────────────── */
.mp-gnvh .mp-bandeau__media picture{ display: contents }
.mp-gnvh--focal-droite .mp-bandeau__media img{ object-position: 100% 50% }
.mp-gnvh--focal-gauche .mp-bandeau__media img{ object-position: 0% 50% }

/* ── Format panoramique (réglage « format ») ──────────────────────
   Photo très allongée (page IRVE : 2060 × 763, 2,7:1). En couverture,
   le bandeau, haut de ~900 px à cause du contenu, n'en montrerait que
   la moitié (12 % sur mobile, agrandie 1,5 fois). Ici la photo garde ses
   proportions, calée sous l'en-tête, fondue en bas dans le fond bleu nuit :
   aucun recadrage jusqu'à 601 px.
   - dès 961 px : texte en colonne à gauche, sur la partie sombre de la photo ;
   - 601–960 px : la photo en bandeau entier, le texte commence sur son pied ;
   - jusqu'à 600 px : bandeau recadré (58vw de haut) sur le point focal.
   Voile : --mp-voile-panoramique (mp-tokens.css). */
.mp-gnvh--panoramique{
  --mp-gnvh-col: 40rem;
  --mp-gnvh-bord: calc(max(0px, (100% - var(--mp-max)) / 2) + var(--mp-gouttiere) + var(--mp-gnvh-col));
  background: var(--mp-bleu-nuit);
}
.mp-gnvh--panoramique .mp-bandeau__media{
  top: var(--header-height, 76px);
  bottom: auto;
  aspect-ratio: 2060 / 763;
}
/* Le voile déborde de 2 px : pas de filet clair au raccord avec le fond */
.mp-gnvh--panoramique .mp-bandeau__media::after{
  inset: 0 0 -2px;
  opacity: 1;
  background: var(--mp-voile-panoramique);
}

/* Colonne de texte dès 961 px (ajustement du 21/09, soir) : le décalage
   gauche du conteneur centré (jusqu'à 376 px à 1920) laissait un grand vide
   sombre et cassait le titre en 4 lignes. La colonne vise 50rem, gagnée
   vers la gauche (jamais sous la gouttière) ; son bord droit ne recule
   jamais par rapport à l'ancien (--mp-gnvh-bord, qui règle le voile, reste
   inchangé) et ne dépasse pas 60 % de l'écran : le camion de tête commence
   à 65 %. Accroche : largeur de lecture de 60 caractères conservée.
   Repères et boutons, sous la photo, prennent toute la largeur. */
@media (min-width: 961px){
  .mp-gnvh--panoramique{ container-type: inline-size; --mp-gnvh-col-max: 50rem }
  .mp-gnvh--panoramique .mp-gnvh__in{
    --mp-gnvh-fin: calc(max(0px, (100cqw - var(--mp-max)) / 2) + var(--mp-gouttiere) + var(--mp-gnvh-col));
    --mp-gnvh-gauche: max(var(--mp-gouttiere), calc(var(--mp-gnvh-fin) - var(--mp-gnvh-col-max)));
    --mp-gnvh-droite: max(var(--mp-gnvh-fin), min(calc(var(--mp-gnvh-gauche) + var(--mp-gnvh-col-max)), 60cqw));
    max-width: none;
    margin: 0;
    padding-left: var(--mp-gnvh-gauche);
    padding-right: var(--mp-gouttiere);
  }
  .mp-gnvh--panoramique .mp-gnvh__in > *{ max-width: calc(var(--mp-gnvh-droite) - var(--mp-gnvh-gauche)) }
  .mp-gnvh--panoramique .mp-gnvh__in > .mp-bandeau__texte{ max-width: min(60ch, calc(var(--mp-gnvh-droite) - var(--mp-gnvh-gauche))) }
  .mp-gnvh--panoramique .mp-gnvh__in > .mp-bandeau__actions,
  .mp-gnvh--panoramique .mp-gnvh__in > .mp-bandeau__preuves{ max-width: none }
}
/* Repères : une ligne quand les cinq tiennent (dès 1280 px) ; sinon grille
   à 3 colonnes alignées (pas de repère isolé en fin de ligne) ; un par
   ligne sur mobile étroit. */
@media (max-width: 1279px){
  .mp-gnvh--panoramique .mp-bandeau__preuves{
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: .6rem 1.5rem;
  }
}
@media (max-width: 600px){
  .mp-gnvh--panoramique .mp-bandeau__preuves{ grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 960px){
  .mp-gnvh--panoramique{ --mp-gnvh-bande: calc(100vw * 763 / 2060) }
  .mp-gnvh--panoramique .mp-gnvh__in{ padding-top: calc(var(--mp-gnvh-bande) - 2.75rem) }
}
@media (max-width: 600px){
  .mp-gnvh--panoramique{ --mp-gnvh-bande: 58vw }
  .mp-gnvh--panoramique .mp-bandeau__media{ aspect-ratio: auto; height: var(--mp-gnvh-bande) }
}