/* retours.css -- LES RETOURS (sprint r2, R2-10) : le bouton « Retour » de la bande et son panneau (chaque page
 * connectee, base.html), et la page Retours de l'admin (/outils/admin/retours). Chargee par base.html, apres statuts.css.
 *
 * AUCUNE couleur litterale : que des var() de tokens.css et tokens-outils.css. Aucune URL. Au telephone : le mot du
 * bouton s'efface (son nom accessible le porte), le panneau prend la largeur de l'ecran, des cibles de 44 px au moins.
 */

/* ---- le bouton de la bande ---------------------------------------------------------------- */
.retour { display: flex; flex: none; }
.retour [hidden] { display: none; }
.retour__bouton { width: auto; min-width: var(--m-cible); gap: var(--dv-px-6); padding: 0 var(--dv-px-8); }
.retour__bouton .ic { width: var(--m-px-22); height: var(--m-px-22); }
.retour__mot { font-size: var(--dv-pt-13); font-weight: var(--dv-graisse-600); }

/* ---- le panneau ----------------------------------------------------------------------------- */
.retour__panneau { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; padding: var(--dv-px-16);
  border: 1px solid var(--bordure); border-radius: var(--m-rayon); background: var(--fond); color: var(--texte); overflow: auto; }
.retour__panneau::backdrop { background: var(--bande); opacity: .55; }
.retour__form { margin: 0; display: flex; flex-direction: column; gap: var(--dv-px-10); }
.retour__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--dv-px-8); }
.retour__titre { font-size: var(--dv-pt-14); font-weight: var(--dv-graisse-700); }
.retour__icone { flex: none; width: var(--m-cible); height: var(--m-cible); display: inline-flex; align-items: center;
  justify-content: center; padding: 0; border: 1px solid var(--bordure); border-radius: var(--dv-px-8); background: var(--fond);
  color: var(--texte-moyen); cursor: pointer; font: inherit; }
.retour__icone:hover { background: var(--fond-survol); color: var(--texte); }
.retour__icone .ic { width: var(--dv-px-20); height: var(--dv-px-20); }
.retour__texte { width: 100%; min-height: 7.5rem; resize: vertical; font: inherit; }
.retour__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-px-8); min-width: 0; }
.retour__choisir { position: relative; display: inline-flex; align-items: center; gap: var(--dv-px-8); min-height: var(--m-cible);
  padding: 0 var(--dv-px-12); border: 1px dashed var(--bordure-forte); border-radius: var(--m-rayon); color: var(--texte-moyen);
  cursor: pointer; }
.retour__choisir .ic { width: var(--dv-px-20); height: var(--dv-px-20); }
.retour__choisir input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.retour__choisir:focus-within { outline: 2px solid var(--primaire); outline-offset: 2px; }
.retour__apercu { margin: 0; display: inline-flex; align-items: flex-start; gap: var(--dv-px-6); min-width: 0; }
.retour__miniature { display: block; max-width: 10rem; max-height: 6rem; border: 1px solid var(--bordure); border-radius: var(--dv-px-8); }

@media (max-width: 599px) {
  .retour__mot { display: none; }
  .retour__panneau { width: calc(100vw - 1rem); padding: var(--dv-px-12); }
}

/* ---- la page de l'admin ----------------------------------------------------------------------- */
.retours-barre { justify-content: space-between; }
.retours-filtres { display: flex; flex-wrap: wrap; gap: var(--dv-px-4); }
.retours-filtres__lien { min-height: var(--m-cible); display: inline-flex; align-items: center; gap: var(--dv-px-6);
  padding: 0 var(--dv-px-12); border-radius: var(--dv-px-8); font-weight: var(--dv-graisse-600); color: var(--texte-moyen);
  text-decoration: none; }
.retours-filtres__lien:hover { background: var(--fond-survol); color: var(--texte); }
.retours-filtres__lien[aria-current="page"] { background: var(--fond-inactif); color: var(--primaire-fonce); }
.retours-export { width: auto; }
.retours { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--dv-px-8); }
.retours__item { display: flex; flex-direction: column; gap: var(--dv-px-8); }
.retours__tete { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-px-4) var(--dv-px-10);
  overflow-wrap: anywhere; }
.retours__tete span { color: var(--texte-moyen); }
.retours__page { color: var(--primaire-fonce); overflow-wrap: anywhere; }
.retours__texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.retours__capture { display: block; }
.retours__capture img { display: block; max-width: 100%; height: auto; border: 1px solid var(--bordure); border-radius: var(--dv-px-8); }
.retours__geste { margin: 0; }
.retours__geste .btn { width: auto; }