/* Le panneau où l'on cadre une photo dans sa case (`affiche-cadrage.mjs`) : « Pêle-mêle photos », « Photos dans les lettres »,
 * l'arbre généalogique. Elle ne charge que sur ces fiches. **Il n'est pas modal et ne recouvre pas l'affiche** : on y règle
 * la photo en la voyant bouger à sa place sur l'affiche. Sur un grand écran il est posé à droite, sur la colonne du
 * formulaire, l'affiche collante restant à gauche ; sur un téléphone c'est un volet en bas, et l'affiche est remontée
 * dans la moitié du haut. Cibles de 44 px, champs à 16 px (Safari zoomerait en dessous). */
.cadrage {
  position: fixed; z-index: 60; box-sizing: border-box; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 54dvh; margin: 0; padding: 1.2rem 1.6rem 1.4rem;
  border: 0; border-radius: 1.2rem 1.2rem 0 0; background: rgb(var(--color-background)); color: rgb(var(--color-foreground));
  box-shadow: 0 -.4rem 2.4rem rgba(0, 0, 0, .28); overflow: auto; overscroll-behavior: contain;
}
.cadrage[open] { display: grid; gap: .8rem 1.2rem; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titre titre" "vue fleches" "zoom zoom" "pied pied"; align-items: center; }
.cadrage__titre { grid-area: titre; margin: 0; font-size: 1.6rem; line-height: 1.25; }
.cadrage__aide { display: none; margin: 0; font-size: 1.4rem; color: rgba(var(--color-foreground), .75); }
@media (min-width: 990px) {
  .cadrage { left: auto; right: 2rem; bottom: 2rem; width: 38rem; max-height: calc(100dvh - 4rem); padding: 1.6rem; border-radius: 1.2rem; box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, .3); }
  .cadrage[open] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "aide" "vue" "fleches" "zoom" "pied"; }
  .cadrage__titre { font-size: 1.8rem; }
  .cadrage__aide { display: block; grid-area: aide; }
  .cadrage__vue { width: min(100%, calc(40dvh * var(--cadrage-ratio, 1))); }
}

/* La vue : au rapport de la case, aussi grande que la hauteur de l'écran le permet. */
.cadrage__vue {
  grid-area: vue; justify-self: center; width: min(100%, calc(22dvh * var(--cadrage-ratio, 1))); aspect-ratio: var(--cadrage-ratio, 1);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  background: rgba(var(--color-foreground), .08); border-radius: .6rem;
}
.cadrage__vue--prise { cursor: grabbing; }
.cadrage__vue:focus-visible { outline: .3rem solid rgb(var(--bleu-focus)); outline-offset: .3rem; }
.cadrage__cadre { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cadrage__cadre--rond { border-radius: 50%; }
.cadrage__cadre img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none;
  object-fit: cover; object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}

/* Les quatre flèches, en croix. */
.cadrage__fleches { grid-area: fleches; justify-self: center; display: grid; grid-template-columns: repeat(3, 4.4rem); grid-template-rows: repeat(2, 4.4rem); gap: .4rem; }
.cadrage__fleche {
  display: flex; align-items: center; justify-content: center; min-width: 4.4rem; min-height: 4.4rem; padding: 0;
  border: .1rem solid rgba(var(--color-foreground), .3); border-radius: .8rem; background: transparent; color: inherit; font-size: 2rem; cursor: pointer;
}
.cadrage__fleche:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cadrage__fleche--haut { grid-column: 2; grid-row: 1; }
.cadrage__fleche--gauche { grid-column: 1; grid-row: 2; }
.cadrage__fleche--bas { grid-column: 2; grid-row: 2; }
.cadrage__fleche--droite { grid-column: 3; grid-row: 2; }

.cadrage__zoom { grid-area: zoom; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2rem; font-size: 1.4rem; font-weight: 600; }
.cadrage__zoom input { width: 100%; min-height: 4.4rem; margin: 0; }
.cadrage__pied { grid-area: pied; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.cadrage__bouton { width: 100%; min-height: 4.8rem; margin: 0; padding: 0 1.2rem; cursor: pointer; box-sizing: border-box; }

/* Le bouton « Cadrer » posé sur la vignette d'une photo déposée (`.pm-vignette__cadrer`, `.lt-vignette__cadrer`). */
.cadrage-bouton {
  display: flex; align-items: center; justify-content: center; min-width: 4.4rem; min-height: 4.4rem; padding: 0 .8rem;
  border: .1rem solid rgba(var(--color-foreground), .3); border-radius: .8rem; background: rgb(var(--color-background)); color: inherit;
  font-size: 1.3rem; font-weight: 700; cursor: pointer; box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .25);
}
.cadrage-bouton:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cadrage-bouton[hidden] { display: none; }
/* Une vignette dont la photo est cadrée le montre : un point sur le bouton. */
.cadrage-bouton[data-cadree]::after { content: ""; width: .8rem; height: .8rem; margin-left: .6rem; border-radius: 50%; background: rgb(var(--ocre-fonce)); }
@media (prefers-reduced-motion: no-preference) { .cadrage-bouton { transition: transform .1s; } .cadrage-bouton:active { transform: scale(.96); } }