/* LPE 2.45 — Hero : titre latéral écrit en direct + header desktop toujours sticky. */

/* Le header doré reste réellement présent pendant toute la lecture sur ordinateur. */
@media (min-width: 781px){
  .lpe-site-header{
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    transform:none!important;
    will-change:auto!important;
  }
}

/* Desktop large : le titre quitte complètement l'axe du portrait. */
@media (min-width: 1181px){
  .lpe-v244-hero{
    --v245-title-left:clamp(24px,3vw,58px);
    --v245-title-width:clamp(510px,38vw,600px);
  }
  .lpe-v244-hero__inner{
    grid-template-rows:1fr auto;
    padding-top:clamp(220px,25vh,285px);
  }
  .lpe-v245-hero__cap{
    position:absolute;
    z-index:5;
    top:clamp(32px,4.2vh,54px);
    left:var(--v245-title-left);
    width:var(--v245-title-width);
    max-width:none;
    margin:0;
    text-align:left;
    opacity:1;
    transform:none;
    pointer-events:none;
  }
  .lpe-v244-hero.is-ready .lpe-v245-hero__cap{opacity:1;transform:none}
  .lpe-v245-hero__cap .lpe-kicker{
    justify-content:flex-start;
    margin:0 0 10px;
    color:#657184;
  }
  .lpe-v245-hero__cap h1{
    width:100%;
    max-width:none;
    margin:0;
    font-size:clamp(3.05rem,3.48vw,3.72rem);
    line-height:.91;
    letter-spacing:-.058em;
    text-align:left;
    font-weight:830;
    color:#07192f;
  }
  .lpe-v245-title-block{display:block;width:max-content;max-width:100%}
  .lpe-v245-title-block--blue{
    margin-top:7px;
    margin-left:clamp(24px,2.3vw,42px);
    color:#1d5aa5;
  }
  .lpe-v245-title-line{
    display:block;
    width:max-content;
    max-width:100%;
    white-space:nowrap;
    min-height:.92em;
  }
  .lpe-v245-hero__cap>p:last-child{
    margin:13px 0 0 clamp(24px,2.3vw,42px);
    max-width:420px;
    text-align:left;
    color:#667282;
    font-size:.75rem;
    letter-spacing:.01em;
  }
  /* Le titre n'occupe plus une ligne de la grille. */
  .lpe-v244-hero__side{grid-row:1}
  .lpe-v244-hero__ctas{grid-row:2}
}

/* Curseur discret uniquement pendant l'écriture. */
.lpe-v245-title-line.is-current::after{
  content:"";
  display:inline-block;
  width:.055em;
  height:.78em;
  margin-left:.06em;
  vertical-align:.02em;
  border-radius:2px;
  background:currentColor;
  opacity:.7;
  animation:lpe245Caret .72s steps(1,end) infinite;
}
@keyframes lpe245Caret{0%,48%{opacity:.72}49%,100%{opacity:.08}}

/* Zone intermédiaire : on garde les quatre lignes imposées, sans tasser le portrait. */
@media (min-width: 781px) and (max-width: 1180px){
  .lpe-v245-hero__cap{text-align:left;max-width:680px;margin:0 auto 0 0}
  .lpe-v245-hero__cap .lpe-kicker{justify-content:flex-start}
  .lpe-v245-hero__cap h1{font-size:clamp(3rem,5.5vw,4.25rem);line-height:.91;text-align:left}
  .lpe-v245-title-block{display:block;width:max-content;max-width:100%}
  .lpe-v245-title-block--blue{margin-top:6px;margin-left:clamp(20px,4vw,38px);color:#1d5aa5}
  .lpe-v245-title-line{display:block;white-space:nowrap;width:max-content;max-width:100%}
  .lpe-v245-hero__cap>p:last-child{margin-left:clamp(20px,4vw,38px);text-align:left}
}

/* Mobile : même intention, mais taille calculée pour qu'aucune des quatre lignes ne casse. */
@media (max-width: 780px){
  .lpe-v245-hero__cap h1{font-size:clamp(2.45rem,10.7vw,3.75rem)!important;line-height:.92!important}
  .lpe-v245-title-block{display:block;width:max-content;max-width:100%}
  .lpe-v245-title-block--blue{margin-top:5px;margin-left:clamp(14px,5vw,26px);color:#1d5aa5}
  .lpe-v245-title-line{display:block;white-space:nowrap;width:max-content;max-width:100%;min-height:.92em}
  .lpe-v245-hero__cap>p:last-child{margin-left:clamp(14px,5vw,26px)!important}
}

@media (prefers-reduced-motion: reduce){
  .lpe-v245-title-line.is-current::after{animation:none}
}