/* --------------------------------------------------------------------------
   Téléphone et tablette (< 900 px) : couche commune aux 11 fiches, chargée APRÈS la
   feuille de chaque page. Demande de Réda, 16/09 : « toujours l'image centrale en premier,
   en pleine largeur ; améliorer l'immersion ».

   1. La photo centrale ouvre la page, bord à bord, cadrée sur son sujet (camion, opérateur,
      projection). Le cadrage est une boîte en pixels d'affiche : --hx --hy --hw --hh,
      choisie page par page hors des bandes peintes et des raccords de nettoyage.
   2. Le titre vient dans une feuille blanche qui remonte sur le bas de la photo.
   3. Les autres photos passent bord à bord, chacune avec son encart.
   4. Le bas de la fiche suit, inchangé.

   Rien ici ne s'applique à l'écran large ni à l'impression.
   -------------------------------------------------------------------------- */

/* cadrages : calculés par tools/cadrage_mobile.py (sujet entier, marges égales, tiers bas) */
.fiche                    {--hx:0;--hy:107;--hw:555;--hh:638}
.fiche.accueil            {--hx:8;--hy:33;--hw:299;--hh:344}
.fiche.infra              {--hx:0;--hy:29;--hw:495;--hh:569}
.fiche.urba               {--hx:338;--hy:0;--hw:604;--hh:672}
.fiche.riv                {--hx:254;--hy:222;--hw:662;--hh:378}
.fiche.parti              {--hx:371;--hy:65;--hw:423;--hh:486}
.fiche.mont               {--hx:0;--hy:15;--hw:392;--hh:451}
.fiche.aero               {--hx:300;--hy:0;--hw:635;--hh:640}
.fiche.pv                 {--hx:230;--hy:205;--hw:797;--hh:443}
.fiche.zi                 {--hx:230;--hy:225;--hw:737;--hh:465}
.fiche.fer                {--hx:598;--hy:47;--hw:604;--hh:695}

@media screen and (max-width:899px){
  .fiche.fiche{display:flex;flex-direction:column;overflow:hidden}
  .fiche.fiche > .mosaique{display:contents}

  /* 1. la photo centrale, bord à bord */
  .fiche.fiche .tuile.principale{display:contents}
  .fiche.fiche .tuile.principale > .cadre{order:-2;position:relative;inset:auto;overflow:hidden;
    aspect-ratio:calc(var(--hw) / var(--hh))}
  .fiche.fiche .tuile.principale > .cadre img{position:absolute;max-width:none;height:auto;
    width:calc(var(--W,1024) / var(--hw) * 100%);
    left:calc(-1 * var(--hx) / var(--hw) * 100%);
    top:calc(-1 * var(--hy) / var(--hh) * 100%)}
  /* un encart porté par la photo centrale (PVU 2000) passe dessous, sans la masquer */
  .fiche.fiche .tuile.principale > .carte{order:0;position:relative;left:auto;top:auto;width:auto;margin:14px 16px 0}

  /* 2. le titre dans une feuille qui remonte sur la photo */
  .fiche.fiche > .entete{order:-1;position:relative;z-index:3;margin-top:-24px;
    background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -10px 24px -14px rgba(0,0,0,.45)}

  /* 3. les autres photos, bord à bord, chacune avec son encart */
  .fiche.fiche > .mosaique > .tuile:not(.principale){margin:3px 0 0;border-radius:0}
}