/* ==========================================================================
   PAGES INTÉRIEURES — FONDS DE PAGE (vidéo et images), 08/10/2026.
   Chargé par les 10 pages intérieures seulement (lien après la feuille de la
   page) : l'accueil, les pages légales et la 404 ne le chargent pas.
   Tout est limité à html.pbg, classe posée par assets/js/modules/pagebg.js :
   sans lui (éditeur du back-office, ?calage, JavaScript absent), les pages
   restent exactement comme avant.
   1. le calque vidéo fixe .page-bg (créé par pagebg.js), cadrage par section ;
   2. les sections laissent voir la vidéo (fonds unis rendus transparents) ;
   3. les fonds d'image .sfond (sections data-fond) et leur mouvement ;
   4. lisibilité du texte posé sur la vidéo et les décors ;
   5. animations réduites.
   ========================================================================== */
@property --pbg-hr{syntax:'<percentage>';inherits:true;initial-value:160%}

/* ---------- 1. calque vidéo ------------------------------------------------ */
html.pbg{--pbg-cam:1.8s;--pbg-io:cubic-bezier(.65,0,.35,1)}
/* hauteur fixe = le plus grand écran (100lvh) : au téléphone, quand la barre
   d'adresse se replie ou revient, le calque ne change pas de taille et la
   vidéo ne saute pas (avec inset:0, elle se recadrait d'un coup de 6 à 8 %) */
.page-bg{position:fixed;inset:0 0 auto 0;height:100vh;height:100lvh;z-index:0;overflow:hidden;pointer-events:none;background:#080203;opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease),visibility 0s linear .9s}
.page-bg.is-on{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
.page-bg__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  transform:scale(var(--vs,1.04)) translate(var(--vx,0%),var(--vy,0%));transition:transform var(--pbg-cam) var(--pbg-io)}
/* iPhone en économie d'énergie (lecture automatique refusée) : pas de bouton
   de lecture natif par-dessus l'affiche */
.page-bg__video::-webkit-media-controls,.page-bg__video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* voile : plus sombre sous les titres (à gauche), en haut sous la barre de
   navigation et en bas ; --vsh l'assombrit d'un cran selon la section */
.page-bg__shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,6,6,.6) 0,rgba(6,6,6,.34) 50%,rgba(6,6,6,.46) 100%),
  linear-gradient(180deg,rgba(6,6,6,.46) 0,rgba(6,6,6,0) 22%,rgba(6,6,6,0) 72%,rgba(6,6,6,.5) 100%)}
.page-bg__shade::before{content:"";position:absolute;inset:0;background:#060606;opacity:var(--vsh,0);transition:opacity var(--pbg-cam) var(--pbg-io)}
@media (orientation:portrait){
  .page-bg__shade{background:
    linear-gradient(180deg,rgba(6,6,6,.5) 0,rgba(6,6,6,.3) 26%,rgba(6,6,6,.3) 70%,rgba(6,6,6,.55) 100%)}
}

/* « caméra » : un cadrage par rang de section (data-cam posé par pagebg.js),
   le bloc Page suivante (np) et le bloc de fin (cta) ont le leur. Chaque
   décalage reste dans la marge que donne l'agrandissement (|x| < (s-1)/2s). */
.page-bg[data-cam="0"]{--vs:1.04}
.page-bg[data-cam="1"]{--vs:1.16;--vx:-3%;--vy:2%}
.page-bg[data-cam="2"]{--vs:1.09;--vx:3%;--vy:-2.5%}
.page-bg[data-cam="3"]{--vs:1.2;--vx:1.5%;--vy:4%;--vsh:.06}
.page-bg[data-cam="4"]{--vs:1.11;--vx:-3.5%;--vy:-1.5%}
.page-bg[data-cam="np"]{--vs:1.13;--vx:3%;--vy:2.5%}
.page-bg[data-cam="cta"]{--vs:1.22;--vx:-1.5%;--vy:5%;--vsh:.1}

/* en quittant l'en-tête vers le bas (avec une souris : voir pagebg.js) : la
   vidéo s'ouvre depuis l'horizon, un anneau rouge monte avec le bord du
   masque (une fois par passage) */
.page-bg.is-horizon{transition:none;
  -webkit-mask-image:radial-gradient(circle at 50% 112%,#000 var(--pbg-hr),transparent calc(var(--pbg-hr) + 18%));
  mask-image:radial-gradient(circle at 50% 112%,#000 var(--pbg-hr),transparent calc(var(--pbg-hr) + 18%));
  animation:pbgHorizon 1.4s var(--pbg-io) both}
.page-bg::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 112%,transparent calc(var(--pbg-hr) + 4%),rgba(255,64,82,.55) calc(var(--pbg-hr) + 9%),rgba(246,43,62,.16) calc(var(--pbg-hr) + 12%),transparent calc(var(--pbg-hr) + 18%))}
.page-bg.is-horizon::after{opacity:1}
@keyframes pbgHorizon{from{--pbg-hr:0%}to{--pbg-hr:160%}}

/* ---------- 2. les sections laissent voir la vidéo --------------------------- */
html.pbg main:not(.home) > .sec{background:transparent}
/* la section 01 sort du noir de l'en-tête au lieu d'une coupure nette */
html.pbg main:not(.home) > .phero + .sec{background:linear-gradient(180deg,#060606 0,rgba(6,6,6,.6) min(14vh,120px),rgba(6,6,6,0) min(34vh,300px))}
/* bloc de fin : la bande noire opaque de gauche devient un voile (comme à l'accueil) */
@media (min-width:1024px){
  html.pbg main:not(.home) .cta__haze{background:radial-gradient(calc(380 * var(--m)) calc(160 * var(--m)) at calc(820 * var(--m)) 72%,rgba(246,43,62,.16),transparent 70%),linear-gradient(90deg,rgba(5,5,5,.55) calc(380 * var(--m)),transparent calc(600 * var(--m)))}
}

/* ---------- 3. fonds d'image (sections data-fond) ---------------------------
   .sfond couvre la section (sous son contenu : z-index -1 dans la section
   isolée) et fond ses bords haut et bas dans la vidéo ; .sfond__win est une
   fenêtre de la taille de l'écran, collée en haut pendant la traversée (la
   section défile devant un décor qui ne fuit pas). overflow:clip au lieu de
   hidden : même découpe, mais la section ne devient pas un conteneur de
   défilement (sinon la fenêtre ne collerait pas). La section nomme sa
   traversée de l'écran (view-timeline --sfond) : l'image y accroche son
   mouvement. */
html.pbg main:not(.home) > .sec.has-sfond{isolation:isolate;overflow:clip;view-timeline:--sfond block}
.sfond{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 min(24vh,220px),#000 calc(100% - min(24vh,220px)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 min(24vh,220px),#000 calc(100% - min(24vh,220px)),transparent 100%)}
.sfond__win{position:sticky;top:0;height:100vh;overflow:hidden;
  animation:sfDrift 13s ease-in-out infinite alternate paused}
@supports not (overflow:clip){.sfond__win{position:absolute;inset:0;height:auto}}
/* dérive lente et continue tant que la section est à l'écran (is-vis, posé
   par pagebg.js) : le décor vit même quand on lit sans défiler */
.sfond.is-vis .sfond__win{animation-play-state:running}
@keyframes sfDrift{from{transform:none}to{transform:scale(1.07) translate3d(-2.2%,-1%,0)}}
.sfond__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--pos,70% 50%);
  filter:brightness(.55) saturate(1.26) contrast(1.06);opacity:0;transform:scale(1.1);transform-origin:50% 50%;will-change:transform;
  transition:opacity 1.4s var(--ease)}
.sfond.is-in .sfond__img{opacity:1}
/* mouvement pendant la lecture, lié au défilement de la section (du moment
   où son haut passe aux trois quarts de l'écran à celui où son bas passe au
   quart) ; --ax/--ay : amplitude en % mesurée par pagebg.js, --fx : -1 si
   l'image est retournée. Sans cette prise en charge, pagebg.js écrit les
   mêmes poses (repli). */
.sfond.is-sd .sfond__img{animation-name:sfIn;animation-duration:1ms;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;
  animation-timeline:--sfond;animation-range:cover 25vh cover calc(100% - 25vh)}
.sfond--m-out.is-sd .sfond__img{animation-name:sfOut}
.sfond--m-pan-l.is-sd .sfond__img{animation-name:sfPanL}
.sfond--m-pan-r.is-sd .sfond__img{animation-name:sfPanR}
.sfond--m-rise.is-sd .sfond__img{animation-name:sfRise}
@keyframes sfIn{from{transform:translate3d(0,0,0) scale(var(--fx,1),1)}to{transform:translate3d(0,0,0) scale(calc(var(--fx,1) * 1.28),1.28)}}
@keyframes sfOut{from{transform:translate3d(0,0,0) scale(calc(var(--fx,1) * 1.28),1.28)}to{transform:translate3d(0,0,0) scale(var(--fx,1),1)}}
@keyframes sfPanL{from{transform:translate3d(calc(var(--ax,8) * 1%),0,0) scale(calc(var(--fx,1) * 1.2),1.2)}to{transform:translate3d(calc(var(--ax,8) * -1%),0,0) scale(calc(var(--fx,1) * 1.2),1.2)}}
@keyframes sfPanR{from{transform:translate3d(calc(var(--ax,8) * -1%),0,0) scale(calc(var(--fx,1) * 1.2),1.2)}to{transform:translate3d(calc(var(--ax,8) * 1%),0,0) scale(calc(var(--fx,1) * 1.2),1.2)}}
@keyframes sfRise{from{transform:translate3d(0,calc(var(--ay,6) * 1%),0) scale(calc(var(--fx,1) * 1.16),1.16)}to{transform:translate3d(0,calc(var(--ay,6) * -1%),0) scale(calc(var(--fx,1) * 1.16),1.16)}}
/* image d'un côté : elle s'efface vers le texte */
.sfond--droite .sfond__img{-webkit-mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.35) 34%,#000 62%);mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.35) 34%,#000 62%)}
.sfond--gauche .sfond__img,.sfond--droite.sfond--flip .sfond__img{-webkit-mask-image:linear-gradient(270deg,transparent 6%,rgba(0,0,0,.35) 34%,#000 62%);mask-image:linear-gradient(270deg,transparent 6%,rgba(0,0,0,.35) 34%,#000 62%)}
.sfond--gauche.sfond--flip .sfond__img{-webkit-mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.35) 34%,#000 62%);mask-image:linear-gradient(90deg,transparent 6%,rgba(0,0,0,.35) 34%,#000 62%)}
/* (image retournée par pagebg.js : son masque l'est aussi, d'où le masque inverse) */
/* voile : haut (barre de navigation, titre), bas, et le côté du texte */
.sfond__shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,6,6,.5) 0,rgba(6,6,6,0) 30%,rgba(6,6,6,0) 66%,rgba(6,6,6,.5) 100%),
  radial-gradient(70% 60% at 78% 50%,rgba(246,43,62,.1),transparent 70%)}
.sfond--droite .sfond__shade::before,.sfond--gauche .sfond__shade::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,6,.5) 0,rgba(6,6,6,.18) 44%,rgba(6,6,6,0) 64%)}
.sfond--gauche .sfond__shade::before{transform:scaleX(-1)}
/* data-fond-voile="droite" | "gauche" : un voile de plus sur ce bord (texte
   posé sur le côté de l'image, ex. la légende des pistes en Identité, ou ciel
   clair du fond01 près des textes) */
.sfond--voile-droite .sfond__shade::after,.sfond--voile-gauche .sfond__shade::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(6,6,6,.78) 0,rgba(6,6,6,.58) 20%,rgba(6,6,6,0) 40%)}
.sfond--voile-gauche .sfond__shade::after{transform:scaleX(-1)}
/* data-fond-sombre : décor un cran plus sombre (texte posé sur l'image elle-même,
   ex. les légendes des téléphones de Studio « Pour qui » sur les lumières de la ville) */
@media (min-width:1024px) and (orientation:landscape){
  html.pbg main:not(.home) > .sec[data-fond-sombre] .sfond__img{filter:brightness(.47) saturate(1.26) contrast(1.06)}
}
/* écran debout (téléphone, tablette en portrait) : recadrage vertical
   (-portrait.webp) affiché sur toute la hauteur, plus large que l'écran au
   téléphone (de quoi glisser sans agrandir), centré par translate (le
   mouvement passe par transform) */
@media (orientation:portrait){
  .sfond__img{inset:auto;left:50%;top:50%;width:max(100%,calc(100vh * 640 / 941));height:auto;aspect-ratio:640/941;translate:-50% -50%;object-position:var(--pos-m,50% 50%)}
}
/* écran debout ou étroit (une seule colonne : le texte prend toute la
   largeur, et passe donc sur l'image) : décor plein cadre, plus sombre */
@media (orientation:portrait),(max-width:1023px){
  html.pbg .sfond__img,html.pbg .sfond--droite .sfond__img,html.pbg .sfond--gauche .sfond__img,html.pbg .sfond--flip .sfond__img,html.pbg .sfond--gauche.sfond--flip .sfond__img{-webkit-mask-image:none;mask-image:none;filter:brightness(.46) saturate(1.26) contrast(1.06)}
  html.pbg .sfond__shade{background:linear-gradient(180deg,rgba(6,6,6,.72) 0,rgba(6,6,6,.52) 22%,rgba(6,6,6,.4) 42%,rgba(6,6,6,.4) 64%,rgba(6,6,6,.6) 100%)}
  html.pbg .sfond--droite .sfond__shade::before,html.pbg .sfond--gauche .sfond__shade::before,html.pbg .sfond__shade::after{content:none!important}
}

/* ---------- 4. lisibilité (mesurée AA sur les zones les plus claires) --------
   - sur un décor, les mentions secondaires (--ink-3, --ink-4) gagnent un cran,
     comme les petites mentions de l'accueil posées sur la vidéo, et un léger
     halo sombre détache le texte de l'image (les titres n'en ont pas) ;
   - les cartes, maquettes, écrans et icônes qui ont leur propre fond gardent
     leurs valeurs d'origine ;
   - les petits repères rouges posés sur la vidéo ou un décor (numéros de
     section, types de projet, numéros d'étape, « Vous : ») passent au rouge
     vif --red-hi (#ff4052), comme les types de projet de l'accueil ; tout le
     reste (titres, boutons, dessins, icônes, maquettes) garde le rouge YNEL. */
html.pbg main:not(.home) > .sec.has-sfond{--ink-3:rgba(245,243,238,.8);--ink-4:rgba(245,243,238,.64);
  text-shadow:0 0 12px rgba(6,6,6,.85),0 1px 2px rgba(6,6,6,.7)}
html.pbg main:not(.home) > .sec.has-sfond :is(.h2,.bigline){text-shadow:none}
html.pbg main:not(.home) > .sec.has-sfond :is(.signcard,.relay__ring,.bo__ico,.frame,.player,.mt-mail,.ccard,.ico){--ink-3:rgba(245,243,238,.54);--ink-4:rgba(245,243,238,.34);text-shadow:none}
html.pbg main:not(.home) > .sec :is(.sec__num,.proj__type,.xfil__tag b,.mt-step__you strong,.xc-steps small,.xc-anno__keys span){--red:var(--red-hi)}
/* numéros d'étape de 11 px posés sur le décor (exemple, « Le point de départ ») :
   rouge clair, ils passent devant les lumières rouges de la ville */
html.pbg main:not(.home) > .sec.has-sfond .xc-steps small{color:#ff7383}

/* ---------- 5. animations réduites : rien ne glisse ni ne s'ouvre -------------- */
@media (prefers-reduced-motion:reduce){
  .page-bg,.page-bg.is-on,.page-bg__video,.page-bg__shade::before,.sfond__img{transition:none!important}
  .page-bg.is-horizon{animation:none;-webkit-mask-image:none;mask-image:none}
  .page-bg.is-horizon::after{opacity:0}
  .sfond__win,.sfond.is-sd .sfond__img{animation:none!important}
}