/* The photo covers the screen; the foreground keeps one stable composition. */
@media (max-width:700px){
  html.phone-edge{
    /* Leave Safari's edge background live: a full-viewport crossfade can
       expose a rectangular snapshot below the translucent address bar. */
    view-transition-name:none;
    --phone-safe-top:env(safe-area-inset-top,0px);
    --phone-safe-bottom:env(safe-area-inset-bottom,0px);
    /* Colour sampled from the shaded sky at the top of the cover. Use the
       same soft continuation inside the photo and in Safari's exposed canvas. */
    --phone-home-edge-color:#616974;
    --phone-sky-extension:linear-gradient(180deg,var(--phone-home-edge-color) 0px,var(--phone-home-edge-color) var(--phone-home-safe-top,0px),#61697400 calc(var(--phone-home-safe-top,0px) + 80px));
    --phone-cover-background:var(--phone-sky-extension),linear-gradient(180deg,#111b226e 0%,#111b220a 35%,#171d2166 68%,#131e22bd 100%),url('editorial/accueil-900.webp');
    scrollbar-gutter:auto;
  }
  html.phone-edge,.phone-edge body{
    /* Safari can sample either root or body for its system-area background. */
    background-color:var(--phone-home-edge-color);
    background-image:var(--phone-cover-background);
    background-position:49% top;background-repeat:no-repeat;
    background-size:auto var(--phone-cover-height,100lvh);
  }
  /* Match Safari's exposed page canvas to the final section, including
     rubber-banding below it. Keep the cover image at the top of the page. */
  html.phone-edge.phone-footer-edge,.phone-edge.phone-footer-edge body{
    background-color:var(--phone-footer-background,#e5e4da);
    background-image:none;
  }
  .phone-edge footer.closing-footer{padding-bottom:var(--phone-safe-bottom,0px)}
  .edition-three:not(.collection-page){--home-top-space:calc(var(--phone-home-safe-top,0px) + 16px)}
  .edition-three:not(.collection-page)>.header{padding-top:var(--home-top-space);padding-bottom:18px}
  .edition-three .hero-v3{
    height:100lvh;height:var(--phone-cover-height,100lvh);
    min-height:100lvh;min-height:var(--phone-cover-height,100lvh);max-height:none;
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;
    padding:calc(var(--home-top-space) + 125px) 6%
      calc(40px + max(0px,var(--phone-cover-height,100lvh) - var(--phone-home-height,100svh)));
  }
  .phone-edge .hero-v3::before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:var(--phone-sky-extension);
  }
  .edition-three .hero-overline{position:static;gap:32px;align-self:start}
  .edition-three .hero-title{position:static;align-self:center;text-align:center;padding:18px 0}
  .edition-three .hero-bottom{position:static;gap:20px;align-self:end}
  /* Only the translated foreground participates in the phone language fade. */
  .phone-edge .edition-three>.header{view-transition-name:phone-home-header}
  .phone-edge .hero-overline{view-transition-name:phone-home-overline}
  .phone-edge .hero-title{view-transition-name:phone-home-title}
  .phone-edge .hero-bottom{view-transition-name:phone-home-links}
  html.phone-edge::view-transition{background:transparent}
  html.phone-edge::view-transition-group(*),
  html.phone-edge::view-transition-old(*),
  html.phone-edge::view-transition-new(*){
    animation-duration:180ms;animation-timing-function:ease-out;
  }
  /* The viewport now includes the notch area. Keep existing modal controls safe. */
  .phone-edge #viewer{padding-top:calc(12px + var(--phone-safe-top));padding-bottom:calc(23px + var(--phone-safe-bottom))}
  .phone-edge .moment-player-header{padding-top:calc(18px + var(--phone-safe-top))}
  .phone-edge .moment-player-footer{padding-bottom:calc(13px + var(--phone-safe-bottom))}
  .phone-edge .immersive-dialog .rail-scene{
    padding-top:var(--phone-safe-top);padding-bottom:var(--phone-safe-bottom);
    --rail-height:calc(100dvh - 270px - var(--phone-safe-top) - var(--phone-safe-bottom));
  }
  .phone-edge .pocket-header{padding-top:var(--phone-safe-top)}
  .phone-edge .pocket-footer{padding-bottom:max(6px,var(--phone-safe-bottom))}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){
  html.phone-edge::view-transition-group(*),
  html.phone-edge::view-transition-old(*),
  html.phone-edge::view-transition-new(*){animation:none!important}
}
@media (max-width:700px){
  .phone-home-compact .hero-v3{padding-top:calc(var(--home-top-space) + 120px)}
  .phone-home-compact .hero-overline{font-size:10px}
  .phone-home-compact .hero-title{padding:12px 0}
  .phone-home-compact .hero-title>p{font-size:12px;line-height:1.5;margin-bottom:18px}
  .phone-home-compact .hero-title h1{font-size:15vw}
  .phone-home-compact .hero-bottom{padding-top:16px}
  .phone-home-compact .hero-bottom a{font-size:12px}
}