/* =====================================================================================
   Charte commune Gestion Proximmo — inspirée de www.proximmo.ca
   Une seule source : proximmo-intranet/app/static/proximmo-charte.css. Copies identiques :
   proximmo-travaux/frontend/src/proximmo-charte.css et proximmo-travaux/backend/app/static/.
   Modifier ici, puis recopier (voir docs/charte.md de chaque projet).

   Fond #1C1C1C, texte #FAFAFA, or #CCA463, police Poppins (titres : Acumin Pro si présent).
   En-tête identique partout : .px-entete > .px-entete-int > .px-marque (logo | nom de l'application),
   .px-nav (liens ; .actif = page courante), .px-moi (personne connectée).
   ===================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

:root {
  --px-fond: #1c1c1c;
  --px-entete: #121212;
  --px-carte: #242424;
  --px-carte-2: #2d2d2d;
  --px-creux: #181818;
  --px-champ: #161616;
  --px-ligne: #383838;
  --px-ligne-forte: #4a4a4a;
  --px-texte: #fafafa;
  --px-doux: #b5afa5;
  --px-pale: #8a857c;
  --px-or: #cca463;
  --px-or-clair: #e0c28d;
  --px-or-fonce: #a8834a;
  --px-or-voile: rgba(204, 164, 99, .14);
  --px-ok: #74c69d;
  --px-avert: #e6b85c;
  --px-alerte: #ef6f66;
  --px-info: #8fb8de;
  --px-police: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --px-police-titres: "acumin-pro", "Acumin Pro", "Poppins", "Segoe UI", system-ui, sans-serif;
  --px-rayon: 8px;
  --px-hauteur-entete: 68px;
  color-scheme: dark;
}

/* --- En-tête commun -------------------------------------------------------------------- */
.px-entete {
  background: var(--px-entete); border-bottom: 2px solid var(--px-or);
  color: var(--px-texte); font-family: var(--px-police); position: relative; z-index: 50;
}
.px-entete-int {
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 32px);
  display: flex; align-items: center; gap: clamp(12px, 2.5vw, 32px); min-height: var(--px-hauteur-entete);
}
.px-entete.large .px-entete-int { max-width: none; }
.px-marque { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--px-texte); flex: none; }
.px-marque img { display: block; height: 34px; width: auto; }
.px-marque .px-sep { width: 1px; height: 30px; background: var(--px-ligne-forte); }
.px-marque .px-appli {
  font: 500 12px/1.2 var(--px-police); letter-spacing: .16em; text-transform: uppercase; color: var(--px-or);
}
.px-nav { display: flex; align-items: stretch; gap: 4px; flex: 1; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.px-nav a, .px-nav button {
  display: flex; align-items: center; padding: 0 12px; text-decoration: none; white-space: nowrap;
  font: 400 14px/1 var(--px-police); color: var(--px-doux); background: none; border: 0; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.px-nav a:hover, .px-nav button:hover { color: var(--px-texte); }
.px-nav a.actif, .px-nav a[aria-current="page"] { color: var(--px-or); border-bottom-color: var(--px-or); }
.px-nav .px-compte {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 99px; background: var(--px-or); color: #1c1c1c; font-size: 11px; font-weight: 600;
}
.px-moi { display: flex; align-items: center; gap: 10px; flex: none; font: 400 13px/1.25 var(--px-police); }
.px-moi .px-qui { display: flex; flex-direction: column; text-align: right; }
.px-moi .px-qui b { font-weight: 500; color: var(--px-texte); }
.px-moi .px-qui small { color: var(--px-pale); font-size: 11.5px; }
.px-pastille {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid var(--px-or); color: var(--px-or); font: 500 13px/1 var(--px-police); letter-spacing: .03em;
}
.px-bouton-entete {
  font: 500 12.5px/1 var(--px-police); color: var(--px-or); background: none; cursor: pointer; text-decoration: none;
  border: 1px solid var(--px-or); border-radius: 99px; padding: 8px 14px; white-space: nowrap;
}
.px-bouton-entete:hover { background: var(--px-or); color: #1c1c1c; }
@media (max-width: 760px) {
  .px-marque img { height: 26px; }
  .px-marque .px-sep, .px-moi .px-qui { display: none; }
  .px-entete-int { flex-wrap: wrap; padding-top: 8px; }
  .px-nav { order: 3; flex-basis: 100%; min-height: 40px; }
}
@media print { .px-entete { background: #fff; color: #000; border-bottom-color: #000; } .px-nav, .px-moi { display: none; } }