/* ERP Déménagement — styles communs (lot 1). Palette proche SAFARI, modernisée. */
:root {
  --bleu: #1d4e89; --bleu-fonce: #143a68; --bleu-clair: #eaf1f8;
  --rouge: #c8102e; --gris: #5a6472; --fond: #f2f4f7; --blanc: #fff;
  --vert: #1c7c43; --ambre: #b57700;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: #1c2430; font: 15px/1.5 "Segoe UI", system-ui, sans-serif; }
header.appli {
  background: linear-gradient(90deg, var(--bleu-fonce), var(--bleu)); color: var(--blanc);
  padding: 10px 22px; display: flex; align-items: center; gap: 16px;
}
header.appli h1 { margin: 0; font-size: 18px; flex: 1; }
header.appli .badge-role { background: rgba(255,255,255,.15); border-radius: 4px; padding: 2px 10px; font-size: 13px; }
header.appli button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: var(--blanc); border-radius: 4px; padding: 4px 12px; cursor: pointer; }
/* Cloche des notifications (14/09/2026) : rouge dès qu'une notification est à traiter — par classe, jamais par style en ligne */
header.appli #mesNotifications.non-lues { background: var(--rouge) !important; color: #fff !important; border-color: var(--rouge) !important; }
/* En-tête complet (14/09/2026) : logo et initiales, ajoutés par notifications.js sur toutes les pages */
header.appli .logo-entete { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--blanc); color: var(--bleu); font-weight: 800; font-size: 13px; letter-spacing: .5px; text-decoration: none; flex: 0 0 auto; }
header.appli .initiales-utilisateur { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.22); color: var(--blanc); font-weight: 700; font-size: 13px; flex: 0 0 auto; cursor: default; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.carte { background: var(--blanc); border: 1px solid #dde3ea; border-radius: 8px; padding: 20px 22px; }
h2 { margin: 0 0 14px; font-size: 16px; color: var(--bleu); border-bottom: 2px solid var(--bleu-clair); padding-bottom: 6px; }
label { display: block; font-size: 13px; color: var(--gris); margin-top: 10px; }
input, select { width: 100%; padding: 8px 10px; margin-top: 3px; border: 1px solid #c4ccd6; border-radius: 4px; font: inherit; background: var(--blanc); }
/* MAJUSCULES (règle SAFARI, 29/08/2026) : la saisie s'affiche en capitales et
   l'API stocke en capitales. Exceptions : emails, mots de passe, URL, et les
   champs marqués .minuscules (identifiants, adresses email libres, modèles). */
input[type="text"]:not(.minuscules), input[type="search"]:not(.minuscules),
input:not([type]):not(.minuscules), textarea:not(.minuscules) { text-transform: uppercase; }
button.principal { background: var(--bleu); color: var(--blanc); border: 0; border-radius: 4px; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer; margin-top: 16px; }
button.principal:hover { background: var(--bleu-fonce); }
.erreur { background: #fdecec; border-left: 4px solid var(--rouge); color: #7a1020; padding: 8px 12px; margin-top: 12px; font-size: 14px; border-radius: 0 4px 4px 0; }
.info { color: var(--gris); font-size: 13px; }
table.liste { width: 100%; border-collapse: collapse; background: var(--blanc); }
table.liste th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); border-bottom: 2px solid var(--bleu); padding: 8px 10px; }
table.liste td { padding: 8px 10px; border-bottom: 1px solid #eef1f5; font-size: 14px; }
table.liste tr.clic { cursor: pointer; }
table.liste tr.clic:hover { background: var(--bleu-clair); }
.etiquette { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.etiquette.prospect { background: #fff3d6; color: var(--ambre); }
.etiquette.client { background: #e3f4e9; color: var(--vert); }
.etiquette.entreprise { background: var(--bleu-clair); color: var(--bleu); }
.barre-outils { display: flex; gap: 10px; align-items: end; margin-bottom: 14px; flex-wrap: wrap; }
.barre-outils label { margin-top: 0; }
.deux-colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }
dialog { border: 1px solid #c4ccd6; border-radius: 8px; padding: 20px 24px; width: min(480px, 92vw); }
dialog::backdrop { background: rgba(20, 30, 45, .45); }
.detail dt { font-size: 12px; color: var(--gris); margin-top: 8px; }
.detail dd { margin: 0; font-size: 14px; }

/* RESPONSIVE (09/09/2026) — téléphone et Surface sur les écrans courants (listes, fiches, relances) : en-tête qui se replie,
   colonnes empilées, tableaux qui défilent horizontalement, boutons à la taille du doigt. */
@media (max-width: 900px) {
  header.appli { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  header.appli h1 { flex-basis: 100%; font-size: 16px; }
  header.appli a, header.appli button { font-size: 13px; padding: 6px 10px; }
  main { padding: 10px; }
  .carte { padding: 12px 12px; }
  .grille2, .l2, .l3, .l4 { grid-template-columns: 1fr !important; }
  table.liste { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  table.liste th, table.liste td { padding: 8px 8px; }
  dialog { width: 96vw; max-height: 94vh; overflow: auto; padding: 14px; }
  button, .principal { min-height: 40px; }
  input, select, textarea { font-size: 16px; } /* évite le zoom automatique sur iPhone */
  .barre-outils { gap: 8px; }
}
@media (max-width: 600px) {
  header.appli .badge-role { display: none; }
  .deux-colonnes { grid-template-columns: 1fr; }
}
/* Tableaux à défilement horizontal (14/09/2026, AH) : posés par notifications.js autour de chaque tableau — la page ne déborde jamais */
.defile { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; contain: inline-size; min-width: 0; } /* contain : le tableau ne dicte plus la largeur minimale de la page */
.deux-colonnes > *, .grille2 > *, .grille3 > *, .l2 > *, .l3 > *, .l4 > * { min-width: 0; }
.defile > table { min-width: 100%; }
/* Liens d'appel et d'email posés automatiquement sur les numéros et adresses affichés (AH) */
a.lien-auto { color: inherit; text-decoration: underline dotted; white-space: nowrap; }
/* TÉLÉPHONE (14/09/2026, AH — parcours de relance) : une colonne, champs et boutons pleine largeur, fenêtres qui tiennent
   dans l'écran, zones tactiles d'au moins 44 px, tableaux « cartes » (class="cartes") lisibles sans zoom. */
@media (max-width: 480px) {
  html { -webkit-text-size-adjust: 100%; }
  main { padding: 8px; }
  .carte { padding: 10px; }
  header.appli { padding: 6px 8px; gap: 6px 8px; }
  header.appli h1 { font-size: 15px; }
  header.appli .logo-entete { width: 30px; height: 30px; }
  .l2, .l3, .l4, .grille2, .grille3, .deux-colonnes, .trois-colonnes { grid-template-columns: 1fr !important; }
  label { display: block; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; }
  button, .principal, a.gps, a.tel, .fiche-lien, .btn-large { min-height: 44px; }
  .boutons, .barre-actions, .barre-outils, .actions-rdv { display: flex; flex-wrap: wrap; gap: 8px; }
  .boutons > button, .barre-actions > button, .barre-actions > a { flex: 1 1 100%; }
  dialog { width: 96vw !important; max-width: 96vw !important; max-height: 92vh; overflow-y: auto; padding: 12px 12px; box-sizing: border-box; margin: auto; }
  img, svg, video, canvas { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  .onglets, .tetes, .filtres, .synthese, .barre-outils { flex-wrap: wrap !important; }
  /* grilles et lignes posées en style en ligne dans les écrans (formulaires du dossier, de la visite…) : une colonne, retour à la ligne */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="white-space:nowrap"], [style*="white-space: nowrap"] { white-space: normal !important; }
  .tetes > *, .filtres > * { max-width: 100%; }
  main, .carte { min-width: 0; max-width: 100%; box-sizing: border-box; }
  table.cartes thead { display: none; }
  table.cartes, table.cartes tbody { display: block; width: 100%; }
  table.cartes tr { display: block; border: 1px solid #dde3ea; border-radius: 8px; padding: 6px 8px; margin: 0 0 8px; background: #fff; }
  table.cartes tr.historique { border-style: dashed; }
  table.cartes td { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border: 0; white-space: normal; text-align: left; }
  table.cartes td[data-label]::before { content: attr(data-label); flex: 0 0 88px; color: var(--gris); font-size: 12px; }
  table.cartes td:empty { display: none; }
}