/* Outil · Recadrer pour les réseaux (Crop for social) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : rx-
   À gauche : les six formats en grille (cases de taille fixe, le cadre centré dedans), la ligne d'info, Tout exporter.
   À droite : l'image source (zone fixe) avec son point focal, le zoom, Remplir (recadrer / fond flouté), une autre image. */
.rx .outil-fixe { align-items: stretch; }
.rx-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rx-case { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; border: 0; border-radius: 14px; background: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--filet-doux); transition: background .2s var(--courbe); }
.rx-case:hover:not(:disabled) { background: rgba(242, 240, 235, .04); }
.rx-case:disabled { cursor: default; }
.rx-cadre { width: 100%; height: 170px; display: grid; place-items: center; }
.rx-cadre canvas { display: block; border-radius: 3px; background: rgba(242, 240, 235, .05); box-shadow: 0 0 0 1px var(--filet-doux); }
.rx-case b { font: 600 13px/1.2 var(--corps); color: var(--papier); }
.rx-case span { max-width: 100%; font: 500 10px/1.2 var(--mono); letter-spacing: .03em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-info { flex: none; height: 1lh; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rx-actions, .rx-ligne { display: flex; justify-content: center; }
.rx-ligne { justify-content: flex-start; }
.rx .pastille { cursor: pointer; }
.rx .pastille:hover { translate: none; }
.rx .pastille:disabled { opacity: .3; cursor: default; }
.rx-source-bloc { display: flex; flex-direction: column; }
.rx-source { position: relative; height: 320px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); background: rgba(0, 0, 0, .18); display: grid; place-items: center; touch-action: none; overflow: hidden; }
.rx-source.survol { box-shadow: inset 0 0 0 1.5px var(--orange); }
.rx-source canvas { display: block; cursor: crosshair; }
.rx-foyer { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px rgba(0, 0, 0, .45), inset 0 0 0 9px rgba(var(--orange-rgb), .0); pointer-events: none; }
.rx-foyer::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--orange); }
.rx-foyer[hidden] { display: none; }
.rx-vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; }
.rx-vide[hidden] { display: none; }
.rx-vide p { margin: 0; font: 600 16px/1.3 var(--corps); color: var(--papier); }
.rx-aide { margin: 8px 0 0; height: 1.4em; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--texte2); text-align: center; }
@media (max-width: 959px) {
  .rx-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-cadre { height: 150px; }
  .rx-source-bloc { order: -1; }
  .rx-source { height: 260px; }
}