/* Harmonisation Paramètres — en-tête de modale/drawer = dégradé accent (charte modales) */
.param-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-800) 100%);
  color: #fff;
  flex: 0 0 auto;
}
.param-modal-head * { color: inherit !important; }
.param-modal-head h1, .param-modal-head h2, .param-modal-head h3 { margin: 0; font-weight: 500; }
.param-modal-head button {
  background: transparent !important;
  border: 0.5px solid rgba(255, 255, 255, .4) !important;
  color: rgba(255, 255, 255, .9) !important;
  border-radius: 8px;
  cursor: pointer;
}
.param-modal-head button:hover { background: rgba(255, 255, 255, .15) !important; }

/* Pages Paramètres hors .kid-page : marge haute sous l'en-tête */
.param-page-top { padding-top: var(--page-y); }

/* Traçabilité réseau (délai / conservation) : empilement sous 640 px, rien ne dépasse du conteneur */
.tpr-page, .tpr-page > * { min-width: 0; }
@media (max-width: 639px) {
  .tpr-ligne { flex-direction: column; align-items: stretch !important; }
  .tpr-champs { width: 100%; }
  .tpr-select { width: 100% !important; min-width: 0 !important; }
}

/* Paramètres globaux : menu des rubriques au-dessus du contenu sous 768 px (plus de moitié d'écran perdue) */
@media (max-width: 768px) {
  .os-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .os-nav { position: static !important; max-height: 40vh; overflow-y: auto; }
}