/* ════════════════════════════════════════════════════════════════════
   pages.css — éléments communs aux pages « nouveau style » :
   en-tête à grand titre, bloc d'appel sur photo, barre d'actions mobile.
   Amélioration progressive : tout fonctionne sans JS ni animations avancées.
   ════════════════════════════════════════════════════════════════════ */

:root{--pg-pad:3rem}
@media(max-width:1100px){:root{--pg-pad:2rem}}
@media(max-width:700px){:root{--pg-pad:1.2rem}}

/* Transition douce entre pages (navigateurs compatibles) */
@view-transition{navigation:auto}
.pg-filters{view-transition-name:pg-filters}
:where(nav[role="navigation"]){view-transition-name:site-nav}
/* un seul fondu (la nouvelle page apparaît par-dessus l'ancienne) : moins coûteux qu'un fondu croisé sur toute la page, surtout sombre → clair */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-in .18s ease-out both}
@keyframes vt-in{from{opacity:0}to{opacity:1}}

/* EN-TÊTE */
.pg-head{padding:10.5rem var(--pg-pad) 2.6rem}
.pg-head-in{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem 3rem}
.pg-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(3rem,8.6vw,7.4rem);line-height:.92;letter-spacing:-.03em;color:#fff;overflow:hidden;padding:.14em 0;margin:-.14em 0}
.pg-title span{display:inline-block;animation:pg-title-in .95s cubic-bezier(.2,.7,.2,1) both}
.pg-title--long{font-size:clamp(2.2rem,5.4vw,4.7rem);line-height:1;letter-spacing:-.022em}
.pg-meta{text-align:right;max-width:30ch;padding-bottom:.6rem}
.pg-sub{font-size:1rem;font-weight:300;color:var(--gray-soft);line-height:1.5;animation:pg-fade .8s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes pg-title-in{from{transform:translateY(105%)}to{transform:none}}
@keyframes pg-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pg-title span,.pg-sub{animation:none}}

/* BLOC D'APPEL : une photo assombrie (profondeur), le teal réservé au bouton */
.pg-cta{position:relative;isolation:isolate;overflow:hidden;background:var(--marine);color:#fff;padding:clamp(4.5rem,9vw,7.5rem) var(--pg-pad)}
.pg-cta-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}
.pg-cta::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(30,35,64,.97) 0%,rgba(30,35,64,.88) 40%,rgba(30,35,64,.52) 100%)}
.pg-cta-in{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2.2rem 4rem}
.pg-cta-big{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:1.02;letter-spacing:-.022em;max-width:16ch;color:#fff}
.pg-cta-btn{display:inline-block;background:var(--teal);color:var(--marine-deep);padding:1.1rem 2.2rem;font-family:'DM Mono',monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;font-weight:500;transition:background .25s,transform .25s}
.pg-cta-btn:hover{background:#fff;transform:translateY(-2px)}
.pg-cta-btns{display:flex;flex-wrap:wrap;gap:1rem}
.pg-cta-btn--alt{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.pg-cta-btn--alt:hover{background:#fff;color:var(--marine-deep)}
.pg-cta-note{margin-top:1.2rem;font-size:.95rem;font-weight:300;color:var(--gray-soft);max-width:44ch}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .pg-cta-bg{animation:pg-zoom linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes pg-zoom{from{transform:scale(1.16)}to{transform:scale(1)}}
  }
}
@media(max-width:700px){.pg-cta::before{background:linear-gradient(180deg,rgba(30,35,64,.93) 0%,rgba(30,35,64,.58) 100%)}}

/* BARRE D'ACTIONS FIXE (mobile) */
.action-bar{display:none}
@media(max-width:700px){
  .action-bar{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:1px;background:rgba(126,202,195,.28);border-top:1px solid rgba(126,202,195,.28);padding-bottom:env(safe-area-inset-bottom)}
  .ab-btn{display:flex;align-items:center;justify-content:center;min-height:52px;background:rgba(30,35,64,.97);color:#fff;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
  .ab-primary{background:var(--teal);color:var(--marine-deep);font-weight:500}
  body.pg-page{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  body.pg-page #back-top{bottom:calc(52px + 1rem + env(safe-area-inset-bottom))}
  .pg-head{padding-top:7.5rem}
  .pg-head-in{grid-template-columns:1fr}
  .pg-meta{text-align:left;max-width:none;padding-bottom:0}
}