/* AGRANDISSEMENT DES CAPTURES — feuille partagee par le centre d'aide et la
   page d'accueil (point N.3 du backlog).

   Les captures d'ecran de la documentation sont larges : sur telephone, elles
   arrivent reduites a la largeur de l'ecran et deviennent illisibles. Cette
   feuille habille la vue plein ecran ouverte par assets/agrandir.js.

   Elle reprend les jetons du site vitrine (--night, --paper, --gold...) mais
   les REDECLARE en secours : chaque page porte sa propre copie de :root, et
   une page qui en manquerait un ne doit pas afficher un fond transparent. */
.agrandir-vue{
  --ag-nuit:var(--night,#14201c);
  --ag-papier:var(--paper,#f6f3ec);
  --ag-or:var(--gold,#c69a4c);
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--ag-nuit) 97%, transparent);
  /* Repli pour les navigateurs sans color-mix : applique avant, ecrase apres. */
  background:rgba(20,32,28,.97);
}
@supports (background:color-mix(in srgb, #000 50%, transparent)){
  .agrandir-vue{background:color-mix(in srgb, var(--ag-nuit) 97%, transparent);}
}

/* PLUS DE ZOOM (24/08, retour de Maxime). La vue avait deux niveaux : ajustee
   a l'ecran, puis taille reelle au clic. Le second ne servait a rien — sur
   grand ecran la vue ajustee montre deja la capture entiere et lisible, et sur
   telephone c'est la taille reelle qui s'ouvre d'emblee. Un niveau
   supplementaire qui ne change rien la ou on est n'est pas une option, c'est
   un geste de plus a deviner.

   Il reste donc UN comportement, decide par la largeur de l'ecran :
     - grand ecran : l'image tient dans la fenetre ;
     - telephone   : l'image est a sa taille reelle et la zone defile — c'est
                     tout l'objet de N.3, une capture d'application ramenee a
                     390 px etant illisible. */
.agrandir-zone{
  flex:1; min-height:0; overflow:auto;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  -webkit-overflow-scrolling:touch;
}
.agrandir-zone img{
  max-width:100%; max-height:100%;
  border-radius:9px; background:var(--ag-papier);
  box-shadow:0 8px 40px rgba(0,0,0,.45);
}

/* Le bas de la vue : legende puis mention d'aide, EMPILEES dans le flux.
   La mention etait d'abord posee en absolu au bas de la vue — elle se
   superposait a la legende, illisibles toutes les deux. Aucune assertion ne
   pouvait le voir : c'est la capture d'ecran qui l'a montre. */
.agrandir-bas{flex-shrink:0; padding:12px 16px 14px; text-align:center;}
.agrandir-legende{
  color:var(--ag-papier);
  font-size:13.5px; line-height:1.5; font-style:italic;
  text-wrap:balance;
}
.agrandir-legende:empty{display:none;}

.agrandir-fermer{
  position:absolute; top:10px; right:10px; z-index:2;
  /* 44 px : meme cible tactile que celle mesuree sur l'application. */
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.28); border-radius:50%;
  /* Fond OPAQUE : une capture d'ecran d'application est claire, et un bouton
     translucide blanc disparaissait dessus. */
  background:rgba(20,32,28,.86); color:var(--ag-papier);
  font-size:20px; line-height:1; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.agrandir-fermer:hover{background:rgba(20,32,28,.96);}
.agrandir-fermer:focus-visible{outline:2px solid var(--ag-or); outline-offset:2px;}

.agrandir-aide{
  margin-top:6px;
  color:var(--ag-papier); opacity:.55; font-size:11.5px; letter-spacing:.04em;
  pointer-events:none;
}

/* Le corps ne defile plus derriere la vue ouverte. */
body.agrandir-ouvert{overflow:hidden;}

/* Sur la page, une capture agrandissable l'annonce au survol. */
figure.shot img, figure.apercu-shot img{cursor:zoom-in;}

@media (max-width:640px){
  .agrandir-zone{padding:6px;}
  .agrandir-bas{padding:10px 14px 12px;}
  .agrandir-legende{font-size:12.5px;}
  /* Au doigt, « cliquez » ne veut rien dire et la place est comptee. */
  .agrandir-aide{display:none;}
  /* TELEPHONE : l'image est a sa TAILLE REELLE et la zone defile. C'est le
     point de N.3 — ajustee a l'ecran, elle rendrait exactement l'image de
     depart, illisible. Cale en haut a gauche, comme un document qu'on
     parcourt. */
  .agrandir-zone{align-items:flex-start; justify-content:flex-start;}
  .agrandir-zone img{max-width:none; max-height:none; width:auto;}
}