/* Fenêtres (Z.modal) : section « Détails » repliée des formulaires de création, feuille collée en bas sur mobile.
   Jetons uniquement (var(--…)) : aucune couleur, taille, rayon ni ombre en dur. */
.modal-details { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-2); }
.modal-details > summary {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: calc(var(--s-7) + var(--s-2)); padding: 0 var(--s-1);
  color: var(--muted); font-weight: 600; cursor: pointer; list-style: none; user-select: none;
  border-radius: var(--r-sm);
}
.modal-details > summary::-webkit-details-marker { display: none; }
.modal-details > summary::before {
  content: ''; width: var(--s-2); height: var(--s-2); flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-fast);
}
.modal-details[open] > summary::before { transform: rotate(45deg); }
.modal-details > summary:hover { color: var(--fg); }
.modal-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-details-corps { margin-top: var(--s-2); }

/* Mobile : la fenêtre devient une feuille collée en bas, boutons larges sous le pouce */
@media (max-width: 640px) {
  #modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: none !important; max-height: 94dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation: feuilleIn var(--t-base) ease-out both; }
  .modal-hdr { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .modal-footer { border-radius: 0; padding-bottom: max(var(--s-3), env(safe-area-inset-bottom)); }
  .modal-footer .btn { flex: 1 1 auto; min-height: calc(var(--s-7) + var(--s-3)); }
  .modal-close-btn { width: calc(var(--s-7) + var(--s-2)); height: calc(var(--s-7) + var(--s-2)); }
}
@keyframes feuilleIn { from { transform: translateY(var(--s-6)); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal { animation: none !important; } .modal-details > summary::before { transition: none; } }

/* Fenêtres d'import de fichier (Z.importerFichier) : choix du fichier, puis aperçu (totaux, tableaux de lignes). Valeurs : variables seulement. */
:root { --imp-h: 55vh; --imp-note-t: 0.8rem; }
.imp-choix { display: flex; flex-direction: column; gap: var(--s-3); }
.imp-choix input[type="file"] { max-width: 100%; }
.imp-option { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.imp-apercu { display: flex; flex-direction: column; gap: var(--s-4); max-height: var(--imp-h); overflow-y: auto; }
.imp-totaux { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.imp-bloc { display: flex; flex-direction: column; gap: var(--s-2); }
.imp-bloc .table-scroll { max-height: 30vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.imp-note { color: var(--muted); font-size: var(--imp-note-t); }
.imp-liste { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.sv-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-4); }
.sv-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.sv-champ { display: flex; flex-direction: column; gap: var(--s-1); }