/* Page « Formations Qualiopi » : compléments à style.css. */

.filtres { padding: 16px 20px; }
#f-recherche { min-width: 320px; }

tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: var(--accent-doux); }
td.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.qs-demande { background: #fdecec; color: #a3312a; }
.qs-documents-envoyes { background: #fff4e0; color: var(--alerte); }
.qs-convention-signee { background: var(--accent-doux); color: var(--accent); }
.qs-realisee { background: #e6f4ec; color: var(--ok); }
.qs-cloturee { background: #eceff3; color: var(--texte-doux); }
.qs-annulee { background: #eceff3; color: var(--texte-doux); text-decoration: line-through; }

.avancement { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texte-doux); white-space: nowrap; }
.avancement-barre { width: 70px; height: 6px; border-radius: 3px; background: var(--bord); overflow: hidden; }
.avancement-barre span { display: block; height: 100%; background: var(--ok); }

.bloc { border: 1px solid var(--bord); border-radius: 8px; padding: 12px 14px 2px; margin: 0 0 14px; }
.bloc legend { font-size: 13px; font-weight: 600; color: var(--texte); padding: 0 5px; }
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.aide { font-size: 12px; font-weight: 400; color: var(--texte-doux); }
.modale-boite label .aide { margin-left: 4px; }

.programmes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 2px 14px; margin: -6px 0 12px; max-height: 210px; overflow-y: auto;
  border: 1px solid var(--bord); border-radius: 6px; padding: 8px 10px;
}
.programmes label.case { margin: 0; font-size: 13px; }

.documents { border-top: 1px solid var(--bord); margin-top: 18px; padding-top: 14px; }
.documents h3 { margin: 0 0 10px; font-size: 15px; }
.documents h4 { margin: 16px 0 6px; font-size: 13px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }
.generation { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
table.pieces { box-shadow: none; border: 1px solid var(--bord); }
table.pieces td { padding: 6px 10px; font-size: 13px; vertical-align: middle; }
table.pieces td:first-child a:first-child { color: var(--texte); }
table.pieces td .lien-discret { margin-left: 8px; }
table.pieces select { padding: 3px 6px; font-size: 12px; }
tr.piece-recue td:first-child a:first-child { color: var(--ok); }
tr.piece-envoyee td:first-child a:first-child { color: var(--accent); }
.a-renvoyer { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: #fff4e0; color: var(--alerte); white-space: nowrap; }
.annexe { margin-top: 14px; }
/* Le style générique des labels de modale (block + champ en block) ferait
   apparaître le sélecteur de fichier, normalement caché derrière son lien. */
.documents label { display: inline; margin: 0; cursor: pointer; font-size: 13px; }
.documents input[type="file"] { display: none; }
#annexes { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

/* Collante plutôt qu'absolue : la fiche session est longue, la croix doit
   rester visible quand on fait défiler la fenêtre. */
.fermer-modale {
  position: sticky; top: 0; float: right; z-index: 2; margin: -10px -10px 0 8px;
  width: 32px; height: 32px; padding: 0;
  background: var(--surface); border: 0; border-radius: 6px; color: var(--texte-doux);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.fermer-modale:hover { background: var(--fond); color: var(--texte); filter: none; }

.heures-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; }
.heures-grille input { max-width: 110px; }

.liste-rapport { margin: 4px 0 12px; padding-left: 20px; font-size: 13px; }
.liste-rapport ul { padding-left: 18px; color: var(--danger); }
#modeles-rapport h4 { margin: 14px 0 4px; font-size: 13px; }

.sous-titre { margin: 22px 0 6px !important; }
.documents select { padding: 4px 6px; font-size: 13px; }
#rattachement { margin: 10px 0; padding: 10px; border: 1px dashed var(--bord); border-radius: 8px; }
#rattachement input { flex: 1; }
th.case-selection, td.case-selection { width: 28px; padding-right: 0; }
td.case-selection input, th.case-selection input { width: auto; margin: 0; }

@media (max-width: 720px) {
  .trio { grid-template-columns: 1fr; }
  #f-recherche { min-width: 0; width: 100%; }
}