/* Apparition des tuiles des pages service : chaque tuile se dévoile dans son propre sens
   (gauche→droite, haut→bas, droite→gauche, bas→haut), l'une après l'autre. Une fois dévoilée, elle ne bouge plus. */
html.ap .grille>.t{opacity:1;transform:none;transition-property:background,color,border-color}
html.ap .grille>.t[data-ap="g"]{--cf:inset(0 100% 0 0)}
html.ap .grille>.t[data-ap="h"]{--cf:inset(0 0 100% 0)}
html.ap .grille>.t[data-ap="d"]{--cf:inset(0 0 0 100%)}
html.ap .grille>.t[data-ap="b"]{--cf:inset(100% 0 0 0)}
html.ap .grille>.t:not(.in){clip-path:var(--cf,inset(0 100% 0 0))}
html.ap .grille>.t.in{animation:ap-devoile 1.3s cubic-bezier(.65,0,.35,1) backwards;animation-delay:var(--ap-d,0ms)}
@keyframes ap-devoile{from{clip-path:var(--cf,inset(0 100% 0 0))}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){html.ap .grille>.t:not(.in){clip-path:none}html.ap .grille>.t.in{animation:none}}

/* ordinateur : tout défile, mais jamais au-delà du cadre de texte de droite. Bandes noires (haut = haut du cadre, bas = marge de 24 px) avec un fondu doux,
   pour que les tuiles s'effacent au lieu d'être coupées net. */
@media (min-width:821px){
  html.ap body::before,html.ap body::after{content:"";position:fixed;left:0;right:0;z-index:5;pointer-events:none}
  html.ap body::before{top:0;height:var(--haut,68px);background:#000}
  /* fondu sous la bande du haut : visible seulement une fois qu'on a défilé, pour ne pas assombrir les tuiles au repos */
  html.ap::before{content:"";position:fixed;left:0;right:0;top:var(--haut,68px);height:44px;z-index:5;pointer-events:none;background:linear-gradient(#000,rgba(0,0,0,0));opacity:0}
  @supports (animation-timeline:scroll()){html.ap::before{animation:ap-fondu-haut linear both;animation-timeline:scroll(root block);animation-range:0 90px}}
  html.ap body::after{bottom:0;height:calc(24px + 44px);background:linear-gradient(rgba(0,0,0,0),#000 44px)}
  /* la grille ne forme pas de contexte d'empilement propre : les bandes (z 5) passent sur les tuiles */
  html.ap .grille{z-index:auto}
}
@keyframes ap-fondu-haut{to{opacity:1}}

/* ordinateur : le cadre de texte apparaît collé aux tuiles, puis glisse vers la droite jusqu'à sa place.
   --glisse (px) = écart entre tuiles et cadre moins 3 px de filet ; posé par apparition.js. */
@keyframes cadre-glisse{
  0%{opacity:0;translate:calc(var(--glisse,0px) * -1) 0}
  22%{opacity:1;translate:calc(var(--glisse,0px) * -1) 0}
  100%{opacity:1;translate:0 0}
}
@media (min-width:821px){
  html.ap .fond-texte{animation:cadre-glisse 1.7s cubic-bezier(.65,0,.2,1) 1s backwards}
}
@media (prefers-reduced-motion:reduce){html.ap .fond-texte{animation:none}}