/* ============================================================
   ET VOYAJ — PAGE HERO, LA CARTE (all sub-pages)
   Photograph-led hero + full-bleed navy plinth, ported from the
   homepage La Carte v2 system (spec §13.4):
   1. full-bleed photograph at full colour, slow drift, no wash
   2. corner scrim + nav shade + soft-light grain
   3. copy anchored to the bottom of the open picture area
   4. the meta-row becomes the navy plinth (existing text only)
   5. one simultaneous entrance + reduced-motion escape
   Load LAST in every sub-page head, after the skin sheets.
   The page's emblem moves to the .cta-block, like the homepage seal.
   Layout, type and COPY untouched.
   ============================================================ */

.page-hero{ --hpad:clamp(24px,7vw,112px); min-height:76svh; height:auto; }

.page-hero .hero-shot{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-hero .hero-shot .img{
 position:absolute; inset:0; background-size:cover; background-position:50% 50%;
 filter:saturate(1.06) brightness(1.07) contrast(1.02);
 animation:plc-drift 70s ease-in-out infinite alternate;
}
@keyframes plc-drift{ from{ transform:scale(1.01); } to{ transform:scale(1.045); } }

.page-hero .hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
 background:linear-gradient(100deg,rgba(9,14,26,.6) 0%,rgba(9,14,26,.3) 38%,rgba(9,14,26,0) 66%),
            radial-gradient(80% 58% at 0% 74%,rgba(9,14,26,.66) 0%,rgba(9,14,26,0) 72%),
            linear-gradient(180deg,rgba(11,17,32,0) 40%,rgba(11,17,32,.3) 70%,rgba(9,15,28,.62) 100%); }
.page-hero .hero-navshade{ position:absolute; left:0; right:0; top:0; height:190px; z-index:2; pointer-events:none;
 background:linear-gradient(180deg,rgba(9,15,28,.78) 0%,rgba(9,15,28,.46) 36%,rgba(9,15,28,.16) 68%,rgba(9,15,28,0) 100%); }
.page-hero .grain-overlay{ z-index:3; opacity:.08; mix-blend-mode:soft-light; }
.page-hero .bg{ z-index:-2; }
.page-hero .photo{ display:none; }

.page-hero .frame{
 position:relative; z-index:5; box-sizing:border-box;
 min-height:76svh; height:auto;
 display:flex; flex-direction:column; justify-content:flex-end !important;
 padding:clamp(88px,10vh,132px) var(--hpad) 0;
}
.page-hero .crumbs{ margin-bottom:26px; text-shadow:0 1px 18px rgba(9,14,26,.8); }
.page-hero h1{ margin:0 0 28px; line-height:.88; text-shadow:0 2px 48px rgba(9,14,26,.5); }
.page-hero h1 .it{ color:var(--gold-2); }
.page-hero .lede{
 color:rgba(253,251,246,.92);
 text-shadow:0 1px 24px rgba(9,14,26,.7);
 border-top-color:rgba(253,251,246,.28);
 max-width:min(48ch,52vw);
 margin-bottom:clamp(28px,5vh,54px);
}

/* the plinth — meta-row goes full bleed on solid navy, homepage grammar */
.page-hero .meta-row{
 margin:0 calc(-1 * var(--hpad)); max-width:none;
 padding:clamp(20px,2.9vh,34px) var(--hpad);
 background:var(--navy);
 display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:0;
 font-family:var(--serif); font-size:clamp(15px,1.62vw,22px);
 letter-spacing:0; text-transform:none; line-height:1.28;
 color:var(--warm);
}
.page-hero .meta-row > div{ padding:0 clamp(18px,2.2vw,40px); border-left:1px solid rgba(253,251,246,.17); max-width:30ch; }
.page-hero .meta-row > div:first-child{ padding-left:0; border-left:0; }
.page-hero .meta-row > div:last-child{ padding-right:0; }
.page-hero .meta-row strong{
 display:block; margin-bottom:clamp(6px,1vh,11px);
 font-family:var(--ui); font-size:9.5px; font-weight:500;
 letter-spacing:.22em; text-transform:uppercase;
 color:rgba(215,187,133,.9);
}
:lang(fr) .page-hero .meta-row{ letter-spacing:0; }

/* one entrance, everything together */
.page-hero .crumbs,.page-hero h1,.page-hero .lede,.page-hero .meta-row{
 opacity:0; animation:plc-in 1.5s .28s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes plc-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
 .page-hero .crumbs,.page-hero h1,.page-hero .lede,.page-hero .meta-row{ animation:none; opacity:1; transform:none; }
 .page-hero .hero-shot .img{ animation:none; }
}

/* ============ THE EMBLEM — moved to the closing CTA block ============
   Same treatment as the homepage seal: centred, 30% opacity, behind
   the copy. HUD labels are hidden in this context (markup retained). */
.cta-block{ overflow:hidden; }
.cta-block .hero-emblem{
 position:absolute; top:50% !important; left:50% !important; right:auto !important;
 transform:translate(-50%,-50%) !important;
 width:min(74vh,720px); aspect-ratio:1;
 display:grid; place-items:center;
 opacity:.3; animation:none;
 z-index:0; pointer-events:none;
}
.cta-block .hero-emblem .fwrap{ width:min(64vh,620px); }
.cta-block .hero-emblem .f-hud{ display:none; }
.cta-block > *:not(.hero-emblem){ position:relative; z-index:1; }

/* about page: the emblem sits behind the contact form — whisper level,
   no labels, so the form and the contact details stay fully readable */
section.contact{ position:relative; overflow:hidden; }
section.contact .hero-emblem{
 position:absolute; top:50% !important; left:50% !important; right:auto !important;
 transform:translate(-50%,-50%) !important;
 width:min(74vh,720px); aspect-ratio:1;
 display:grid; place-items:center;
 opacity:.1; animation:none;
 z-index:0; pointer-events:none;
}
section.contact .hero-emblem .fwrap{ width:min(64vh,620px); }
section.contact .hero-emblem .f-hud,
section.contact .hero-emblem .f-center{ display:none; }
section.contact > *:not(.hero-emblem){ position:relative; z-index:1; }

/* ============ RESPONSIVE ============ */

/* hero-emblem.css re-orders the hero and re-pads the frame ≤1024 for the
   emblem-in-hero era (selectors at .page-hero .frame > X specificity).
   The emblem now lives in the CTA — restore the La Carte geometry here
   with the same specificity. */
@media (max-width:1024px){
 .page-hero .frame{ min-height:calc(88svh - 66px); justify-content:flex-end; align-items:stretch; padding:clamp(88px,11vh,116px) var(--hpad) 0; }
 .page-hero .frame > .crumbs{ order:0; margin-bottom:24px; }
 .page-hero .frame > h1{ order:1; margin:0 0 24px; }
 .page-hero .frame > .lede{ order:2; margin:0 0 clamp(28px,5vh,54px); max-width:58ch; border-top:0; padding-top:0; }
 .page-hero .frame > .meta-row{ order:3; margin:0 calc(-1 * var(--hpad)); max-width:none; }
}
@media (max-height:760px){
 .page-hero .frame{ padding-top:clamp(84px,10vh,108px); }
 .page-hero .meta-row{ padding-top:clamp(14px,2.2vh,22px); padding-bottom:clamp(14px,2.2vh,22px); }
 .page-hero .meta-row strong{ margin-bottom:5px; font-size:9px; }
 .page-hero .meta-row{ font-size:clamp(14px,1.5vw,18px); }
}
@media (max-width:880px){
 .page-hero{ min-height:calc(88svh - 66px); --hpad:6vw; }
 .page-hero .frame{ min-height:calc(88svh - 66px); padding:clamp(88px,11vh,116px) var(--hpad) 0; }
 .page-hero .lede{ max-width:100%; }
 .page-hero .meta-row{ grid-template-columns:1fr; padding:22px var(--hpad); font-size:19px; }
 .page-hero .meta-row > div{ padding:14px 0; border-left:0; border-top:1px solid rgba(253,251,246,.17); max-width:none; }
 .page-hero .meta-row > div:first-child{ padding-top:0; border-top:0; }
 .page-hero .meta-row > div:last-child{ padding-bottom:0; }
 .page-hero .hero-scrim{ background:linear-gradient(180deg,rgba(11,17,32,.16) 0%,rgba(11,17,32,0) 26%,rgba(9,15,28,.58) 64%,rgba(9,15,28,.86) 100%); }
 .page-hero .hero-navshade{ height:150px; }
 .cta-block .hero-emblem{ width:min(90vw,420px); opacity:.22; }
 .cta-block .hero-emblem .fwrap{ width:min(84vw,400px); }
}