/* --------------------------------------------------------------------------
   Téléphone et tablette (< 900 px) : couche commune aux 11 fiches, chargée APRÈS la
   feuille de chaque page.

   LE DESKTOP EST VALIDÉ PAR LE CLIENT ET NE DOIT PAS BOUGER. Toutes les règles de ce
   fichier, variables comprises, sont enfermées dans @media screen and (max-width:899px).
   Rien ici ne peut atteindre l'écran large, l'impression ou les PDF.

   ------------------------------------------------------------------ retour client 20/09
   « les maquettes sont découpées sans logique et ne donne pas la vue d'ensemble »
   puis, le 21/09 : 2 fois le logo sur accueil / urbanisme / particuliers /
   domaines-skiables ; toutes commencent par une image sauf PVU ; hauteurs des images
   de tête incohérentes ; polices différentes d'une fiche à l'autre.

   Les quatre griefs sont fondés, mesurés, et traités ci-dessous. Précision importante :
   l'incohérence typographique vient de la composition desktop elle-même (à 1536 px :
   h1 de 32 à 85,7 px, h2 de 12,5 à 45,7 px, h1 en Antonio sur 5 fiches et en Barlow sur
   6). Comme le desktop est validé, on ne le corrige pas : on impose ici une échelle
   mobile unique, cette feuille chargeant après celle de chaque page.

   1. UNE SEULE PHOTO, ENTIÈRE, À HAUTEUR FIXE.
      Chaque fiche n'a qu'une image, assets/fond.png, dans laquelle toutes les tuiles
      découpent des fenêtres (--tx --ty --tw --th). Au-dessus de 900 px elles se recollent
      et reforment l'affiche ; en dessous ce recollement était abandonné et la même photo
      réapparaissait en fragments jusqu'à 16 fois (ferroviaire). La version précédente
      aggravait le défaut en re-rognant la tête sur une boîte --hx/--hy/--hw/--hh : il
      n'en restait que 19 à 39 % de la surface. Désormais : une bande 16/9, donc 219 px
      sur les 11 fiches, cadrage centré, et les tuiles secondaires ne remontrent plus
      la photo. Il faut neutraliser DEUX couches de recadrage : --mx/--my/--mw/--mh, lu
      par le bloc mobile de fiche.css, et l'ancien --hx/--hy, supprimé d'ici.
   2. UN SEUL LOGO EN HAUT. Le bandeau du site porte déjà le logo à y=16. Quatre fiches
      répétaient le logo mot dans leur entête juste en dessous : accueil, urbanisme,
      particuliers, domaines-skiables. On masque celui de l'entête sur les quatre, le
      client les ayant nommées toutes les quatre. Conséquence assumée : sur urbanisme et
      domaines-skiables c'était le seul logo de la fiche, la marque n'y est donc plus
      portée que par le bandeau du site. Les classes des conteneurs sont préfixées par
      fiche (.a-logo, .u-logo, .p-logo, .m-logo), d'où le ciblage par le nom du fichier.
      Le h2 des cartouches de marque (#marque-pvu, #scheier-pvi, 30 px) est un rôle
      distinct du titre d'encart : il garde sa taille, d'où le :not([id]) plus bas.
   3. LA PHOTO OUVRE LA PAGE SUR LES 11. PVU faisait exception parce que sa mosaïque est
      une grille : .tuile.principale{order:-1} ne pouvait réordonner qu'à l'intérieur de
      la mosaïque, jamais au-dessus de l'entête. display:contents lève ça.
   4. UNE SEULE ÉCHELLE TYPOGRAPHIQUE pour les rôles partagés.
   -------------------------------------------------------------------------- */

@media screen and (max-width:899px){

  /* ---- échelle mobile unique, valable pour les 11 fiches ---- */
  .fiche.fiche{
    --m-titre:32px;      /* h1 */
    --m-chapeau:16.5px;  /* .lede */
    --m-encart:17px;     /* h2 d'un encart ordinaire */
    --m-marque:22px;     /* h2 d'un cartouche SCHEIER PVU / PVI */
    --m-liste:13.5px;    /* li d'encart */
    --m-logo:180px;      /* largeur du logo mot dans la fiche */
    --m-tete:16 / 9;     /* bande photo de tête */
  }

  .fiche.fiche{display:flex;flex-direction:column;overflow:hidden}
  .fiche.fiche > .mosaique{display:contents}

  /* ---- 1 + 3. le fond, une fois, à hauteur fixe, en tête de page ---- */
  .fiche.fiche .tuile.principale{display:contents}
  .fiche.fiche .tuile.principale > .cadre{order:-2;position:relative;inset:auto;
    width:auto;overflow:hidden;aspect-ratio:var(--m-tete)}
  .fiche.fiche .tuile.principale > .cadre img{position:absolute;inset:0;max-width:none;
    width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center}
  /* un encart porté par la photo de tête (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}

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

  /* les tuiles secondaires : l'encart seul, la photo ne se répète pas */
  .fiche.fiche > .mosaique > .tuile:not(.principale){
    display:block;aspect-ratio:auto;min-height:0;padding:0;
    margin:10px 16px 0;border-radius:10px;overflow:visible}
  .fiche.fiche > .mosaique > .tuile:not(.principale) > .cadre{display:none}
  .fiche.fiche > .mosaique > .tuile:not(.principale) > .carte{
    position:relative;inset:auto;left:auto;top:auto;width:auto}

  /* ---- 2. un seul logo en haut : le bandeau du site suffit ---- */
  /* « contient » et non « se termine par » : le build ajoute une empreinte de cache
     (?v=ea46b49e) a la fin de l'attribut src, ce qui casserait un selecteur en $=.
     Regression attrapee par tools/mesure/verif_build.js sur 5 pages du build. */
  .fiche.fiche > .entete img[src*="logo-scheier-mot.png"],
  .fiche.fiche > .entete > div:has(> img[src*="logo-scheier-mot.png"])
    {display:none!important}

  /* ---- 4. une seule échelle typographique ---- */
  .fiche.fiche > .entete h1,
  .fiche.fiche > .entete h1 span{
    font-family:var(--display);font-weight:700;text-transform:uppercase;
    font-size:var(--m-titre);line-height:1.05;letter-spacing:0}
  .fiche.fiche > .entete .lede,
  .fiche.fiche > .entete .lede span{
    font-family:var(--texte);font-size:var(--m-chapeau);line-height:1.35;letter-spacing:0}
  /* Titre d'encart ordinaire. !important est nécessaire : les 11 feuilles de page
     stylent leurs h2 par sélecteur d'id (.accueil #pourquoi h2, .pvu #marque-pvu h2...),
     et un id bat n'importe quel empilement de classes. Confiné au bloc mobile. */
  .fiche.fiche .carte h2{
    font-family:var(--texte)!important;font-weight:700!important;
    font-size:var(--m-encart)!important;line-height:1.2!important;letter-spacing:0!important}

  /* Cartouche de marque (« SCHEIER PVU », « SCHEIER PVI 2000 »...) : rôle distinct, donc
     sa propre taille, unique elle aussi. Mesuré avant correction : le même #scheier-pvi
     valait 30 px sur infrastructures, 24 sur aeroports et 16 sur photovoltaique, et
     #pvi-1000 valait 22 sur infrastructures contre 16 sur zones-industrielles.
     Plus spécifique que la règle ci-dessus et placée après, donc elle gagne. */
  .fiche.fiche .carte[id*="pvu"] h2,
  .fiche.fiche .carte[id*="pvi"] h2,
  .fiche.fiche .carte[id*="marque"] h2,
  .fiche.fiche .carte[id="cartouche"] h2{
    font-size:var(--m-marque)!important}

  /* le b de tête d'une puce portait sa propre taille, d'où un résidu de 1 px */
  .fiche.fiche .carte li,
  .fiche.fiche .carte li b,
  .fiche.fiche .carte li span{
    font-size:var(--m-liste)!important;line-height:1.3!important;letter-spacing:0!important}

  /* largeur du logo mot : mesurée entre 150 et 250 px selon la fiche, uniformisée */
  .fiche.fiche img[src*="logo-scheier-mot.png"]{width:var(--m-logo)!important;height:auto!important}
}