/* Cross-document navigation keeps the shared header visually stable while physical routes remain SEO-safe. */
@view-transition{navigation:auto}
.site-header{view-transition-name:portfolio-header}
main{view-transition-name:portfolio-content}
::view-transition-old(portfolio-header),
::view-transition-new(portfolio-header){animation:none!important;mix-blend-mode:normal!important}
::view-transition-old(portfolio-content){animation:portfolio-fade-out .12s ease both}
::view-transition-new(portfolio-content){animation:portfolio-fade-in .18s ease both}
@keyframes portfolio-fade-out{to{opacity:.82}}
@keyframes portfolio-fade-in{from{opacity:.78}to{opacity:1}}
@media (min-width:901px){.site-header{position:sticky!important;top:0!important;z-index:1000!important}}

/* Hero composition — editorial portrait on the right, readable copy on the left. */
@media (min-width:901px){
  .hero,
  .page-hero{
    background:#02070d;
  }

  /* Homepage: preserve the portrait and blend it into the dark editorial field. */
  .hero-media{
    background:
      radial-gradient(circle at 82% 40%,rgba(35,76,106,.20),transparent 34%),
      linear-gradient(90deg,#02070d 0%,#02070d 48%,#06101a 100%);
  }
  .hero-media img{
    position:absolute;
    top:14px;
    right:0;
    bottom:0;
    left:auto;
    width:min(59vw,1120px);
    height:calc(100% - 14px);
    object-fit:contain;
    object-position:right bottom;
    transform:none!important;
    filter:saturate(.84) contrast(1.03) brightness(.90)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.20) 8%,#000 24%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.20) 8%,#000 24%,#000 100%);
  }
  .hero-media:after{
    background:
      linear-gradient(90deg,rgba(2,7,13,1) 0%,rgba(2,7,13,.97) 27%,rgba(2,7,13,.79) 43%,rgba(2,7,13,.28) 61%,rgba(2,7,13,.04) 82%,transparent 100%),
      linear-gradient(0deg,rgba(2,7,13,.50) 0%,rgba(2,7,13,.06) 44%,rgba(2,7,13,.05) 100%)!important;
  }
  .hero-content{
    max-width:min(760px,49vw)!important;
  }

  /* Internal pages: same portrait treatment, without the full-bleed crop that was cutting faces. */
  .page-hero{
    height:var(--internal-hero-height);
    min-height:var(--internal-hero-height);
  }
  .page-hero .page-hero-bg{
    top:8px;
    right:0;
    bottom:0;
    left:auto;
    width:min(55vw,980px);
    height:calc(100% - 8px);
    object-fit:contain;
    object-position:right bottom;
    transform:none!important;
    filter:saturate(.86) contrast(1.03) brightness(.88)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 8%,#000 23%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 8%,#000 23%,#000 100%);
  }
  .page-hero:after{
    background:
      linear-gradient(90deg,rgba(2,7,13,1) 0%,rgba(2,7,13,.97) 30%,rgba(2,7,13,.80) 47%,rgba(2,7,13,.26) 65%,rgba(2,7,13,.03) 86%,transparent 100%),
      linear-gradient(0deg,rgba(2,7,13,.34),transparent 54%)!important;
  }
  .page-hero-content{
    max-width:min(780px,51vw)!important;
  }

  /* The Master artwork contains its own typography. Keep that half visually black and let only the portrait read as imagery. */
  .route-parcours-academique .page-hero:after{
    background:
      linear-gradient(90deg,#02070d 0%,#02070d 56%,rgba(2,7,13,.99) 64%,rgba(2,7,13,.91) 72%,rgba(2,7,13,.46) 84%,rgba(2,7,13,.05) 100%),
      linear-gradient(0deg,rgba(2,7,13,.42),transparent 54%)!important;
  }
}

/* Master card image stays clean: no artificial fade over the artwork. */
body.route-home .premium-academic-card .academic-img img,
body.route-parcours-academique .premium-academic-card .academic-img img{
  object-position:right center!important;
  transform:scale(1.08)!important;
  transform-origin:right center!important;
}
body.route-home .premium-academic-card .academic-img:after,
body.route-parcours-academique .premium-academic-card .academic-img:after{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* Mobile keeps a separate compact composition. */
@media (max-width:900px){
  .hero{
    min-height:0!important;
    max-height:none!important;
    display:block!important;
    padding-top:104px;
    background:#02070d;
  }
  .hero-media{
    position:relative!important;
    inset:auto!important;
    height:clamp(235px,62vw,360px);
    overflow:hidden;
    background:#02070d;
  }
  .hero-media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:62% 42%;
    transform:none!important;
    filter:saturate(.78) contrast(1.04) brightness(.82)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .hero-media:after{
    background:
      linear-gradient(90deg,rgba(2,7,13,.80) 0%,rgba(2,7,13,.45) 34%,rgba(2,7,13,.08) 72%),
      linear-gradient(0deg,rgba(2,7,13,1) 0%,rgba(2,7,13,.22) 40%,rgba(2,7,13,.06) 100%)!important;
  }
  .hero-content{
    position:relative;
    padding:24px 0 34px!important;
    max-width:none!important;
  }
  .hero-kicker{
    font-size:.66rem!important;
    letter-spacing:.14em!important;
  }
  .hero h1{
    font-size:clamp(3.35rem,17vw,4.5rem)!important;
    line-height:.82!important;
    margin:18px 0 20px!important;
    max-width:100%!important;
  }
  .hero-copy{
    font-size:.96rem!important;
    line-height:1.58!important;
    max-width:100%!important;
    color:#cbd4dc!important;
  }
  .cta-row{margin-top:24px!important}
  .hero .btn{min-height:50px!important}
  .scroll-cue{display:none!important}

  .route-parcours-academique .page-hero:after{
    background:
      linear-gradient(90deg,#02070d 0%,rgba(2,7,13,.99) 54%,rgba(2,7,13,.94) 66%,rgba(2,7,13,.62) 78%,rgba(2,7,13,.12) 94%,transparent 100%),
      linear-gradient(0deg,rgba(2,7,13,.66) 0%,rgba(2,7,13,.12) 58%,transparent 100%)!important;
  }
}

@media (max-width:820px){
  body.route-home .premium-academic-card .academic-img,
  body.route-parcours-academique .premium-academic-card .academic-img{
    aspect-ratio:4/3!important;
    background:linear-gradient(145deg,#f7e5bd 0%,#fff8ea 58%,#f2dbab 100%)!important;
  }
  body.route-home .premium-academic-card .academic-img img,
  body.route-parcours-academique .premium-academic-card .academic-img img{
    object-position:right center!important;
    transform:scale(1.14)!important;
    transform-origin:right center!important;
  }
}

@media (max-width:520px){
  .hero{padding-top:104px}
  .hero-media{height:clamp(220px,60vw,285px)}
  .hero-media img{object-position:61% 42%}
  .hero-content{padding:22px 0 30px!important}
  .hero h1{font-size:clamp(3.2rem,16.5vw,4.25rem)!important}
  .hero-copy{font-size:.93rem!important}

  body.route-home .premium-academic-card .academic-img,
  body.route-parcours-academique .premium-academic-card .academic-img{
    aspect-ratio:1.35/1!important;
  }
  body.route-home .premium-academic-card .academic-img img,
  body.route-parcours-academique .premium-academic-card .academic-img img{
    object-position:right center!important;
    transform:scale(1.18)!important;
  }
}

/* Final academic hero cleanup: erase the poster's embedded copy and reveal only the portrait zone. */
.route-parcours-academique .page-hero .page-hero-bg{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 50%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.42) 69%,#000 82%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 50%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.42) 69%,#000 82%,#000 100%)!important;
}