/* ==========================================================================
   SAJER — PUB / VITRINE : composant "carte dossier de cargaison"
   Utilisé par pub.html (rendu public) ET admin/dashboard.html (aperçu live).
   Toutes les couleurs passent par var(--token, fallback) pour hériter du
   theme reel du site (assets/css/style.css) sans jamais l'ecraser.
   ========================================================================== */

.pubx-hero{
  position:relative; padding:150px 0 70px; overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(199,154,61,.10), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(224,122,95,.08), transparent 40%),
    var(--blanc,#faf9f5);
}
.pubx-hero .pubx-stamp-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--or-fonce,#a97e28);
  border:1px dashed rgba(199,154,61,.55); padding:6px 14px; border-radius:999px;
}
.pubx-hero h1{
  font-family:var(--font-display,'Manrope',sans-serif); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(30px,4.2vw,48px); color:var(--noir,#0b0b0a); margin:20px 0 14px; max-width:820px;
}
.pubx-hero p.lead{ max-width:620px; font-size:16.5px; color:var(--gris-fonce,#4a463c); line-height:1.65; }

.pubx-route{
  display:flex; align-items:center; gap:14px; margin-top:34px; font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11.5px; color:var(--gris,#8a8578); letter-spacing:.05em;
}
.pubx-route .pubx-route-track{ flex:1; max-width:220px; height:1px; background:repeating-linear-gradient(90deg, var(--or,#c79a3d) 0 6px, transparent 6px 12px); position:relative; }

/* ---- barre de filtres ---- */
.pubx-toolbar{
  position:sticky; top:0; z-index:40; display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  justify-content:space-between; padding:16px 0; background:rgba(250,249,245,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ligne-noire,rgba(10,8,4,.1));
}
.pubx-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.pubx-chip{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:12px; letter-spacing:.04em;
  padding:8px 16px; border-radius:999px; border:1px solid var(--ligne-noire,rgba(10,8,4,.16));
  background:transparent; color:var(--gris-fonce,#4a463c); cursor:pointer; transition:all .18s;
}
.pubx-chip:hover{ border-color:var(--or,#c79a3d); color:var(--or-fonce,#a97e28); }
.pubx-chip.active{ background:var(--noir,#0b0b0a); border-color:var(--noir,#0b0b0a); color:var(--blanc,#faf9f5); }
.pubx-search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--ligne-noire,rgba(10,8,4,.16));
  border-radius:999px; padding:8px 16px; min-width:230px; background:var(--blanc,#faf9f5);
}
.pubx-search input{ border:none; outline:none; background:transparent; font-size:13.5px; width:100%; color:var(--noir,#0b0b0a); }
.pubx-search svg{ flex:0 0 auto; color:var(--gris,#8a8578); }

/* ---- grille ---- */
.pubx-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:26px; padding:44px 0 30px;
}

/* ---- carte "dossier de cargaison" ---- */
.pubx-card{
  position:relative; background:
    radial-gradient(circle, rgba(10,8,4,.05) 1px, transparent 1.4px) 0 0/14px 14px,
    var(--blanc,#faf9f5);
  border:1px solid var(--ligne-noire,rgba(10,8,4,.14)); border-radius:3px;
  padding:26px 22px 20px; text-align:center; cursor:pointer; overflow:visible;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  scroll-margin-top:100px;
}
.pubx-card:hover{ transform:translateY(-7px); box-shadow:0 18px 34px -14px rgba(10,8,4,.28); }
.pubx-card.pubx-highlight{ animation:pubxHighlight 2.4s ease; }
@keyframes pubxHighlight{
  0%{ box-shadow:0 0 0 0 rgba(199,154,61,.9), 0 18px 34px -14px rgba(10,8,4,.28); }
  60%{ box-shadow:0 0 0 10px rgba(199,154,61,0), 0 18px 34px -14px rgba(10,8,4,.28); }
  100%{ box-shadow:0 18px 34px -14px rgba(10,8,4,.14); }
}

.pubx-ref{
  position:absolute; top:12px; left:14px; font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:9.5px; letter-spacing:.08em; color:var(--gris,#8a8578); text-transform:uppercase;
}
.pubx-stamp{
  position:absolute; top:16px; right:-34px; width:150px; transform:rotate(8deg);
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; padding:3px 0; pointer-events:none;
  border-top:1px dashed currentColor; border-bottom:1px dashed currentColor;
}
.pubx-stamp.partenaire{ color:var(--or-fonce,#a97e28); }
.pubx-stamp.client{ color:#c14f36; }

.pubx-porthole{
  width:96px; height:96px; margin:14px auto 16px; border-radius:50%; position:relative;
  background:#1c1911 center/cover no-repeat; border:3px solid var(--blanc,#faf9f5);
  box-shadow:0 0 0 1.5px var(--or,#c79a3d), 0 0 0 6px rgba(199,154,61,.12), inset 0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.pubx-porthole .pubx-mono{
  font-family:var(--font-display,'Manrope',sans-serif); font-weight:800; font-size:26px; color:var(--or-clair,#e8c874);
}
.pubx-porthole::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(120deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%);
  transform:translateX(-120%); transition:transform .6s;
}
.pubx-card:hover .pubx-porthole::after{ transform:translateX(30%); }

.pubx-name{ font-family:var(--font-display,'Manrope',sans-serif); font-weight:800; font-size:17px; color:var(--noir,#0b0b0a); }
.pubx-tagline{ font-size:13px; color:var(--gris-fonce,#4a463c); margin-top:5px; min-height:18px; line-height:1.4; }

.pubx-perf{ position:relative; height:1px; margin:18px -22px 14px; border-top:1.5px dashed var(--ligne-noire,rgba(10,8,4,.22)); }
.pubx-perf::before, .pubx-perf::after{
  content:""; position:absolute; top:-7px; width:14px; height:14px; border-radius:50%;
  background:var(--blanc,#faf9f5); border:1px solid var(--ligne-noire,rgba(10,8,4,.14));
}
.pubx-perf::before{ left:-7px; } .pubx-perf::after{ right:-7px; }

.pubx-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; min-height:22px; }
.pubx-tag{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:10px; letter-spacing:.04em;
  color:var(--gris-fonce,#4a463c); background:rgba(10,8,4,.05); padding:4px 9px; border-radius:999px;
}
.pubx-cta{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--or-fonce,#a97e28); display:inline-flex; align-items:center; gap:6px;
}
.pubx-card:hover .pubx-cta{ color:var(--or,#c79a3d); }

/* ---- etat vide ---- */
.pubx-empty{
  text-align:center; padding:70px 20px; color:var(--gris,#8a8578); border:1.5px dashed var(--ligne-noire,rgba(10,8,4,.18));
  border-radius:4px; font-family:var(--font-body,'Inter',sans-serif);
}

/* ---- modal / fiche detaillee ---- */
.pubx-overlay{
  position:fixed; inset:0; background:rgba(11,11,10,.72); backdrop-filter:blur(3px); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none;
  transition:opacity .25s;
}
.pubx-overlay.open{ opacity:1; pointer-events:auto; }
.pubx-modal{
  background:var(--blanc,#faf9f5); max-width:560px; width:100%; max-height:88vh; overflow:auto;
  border-radius:4px; position:relative; transform:translateY(14px) scale(.98); transition:transform .28s;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.pubx-overlay.open .pubx-modal{ transform:translateY(0) scale(1); }
.pubx-modal-head{
  padding:40px 34px 22px; text-align:center; position:relative;
  background:radial-gradient(circle at 50% 0%, rgba(199,154,61,.12), transparent 60%);
}
.pubx-modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:1px solid var(--ligne-noire,rgba(10,8,4,.16));
  background:var(--blanc,#faf9f5); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--gris-fonce,#4a463c);
}
.pubx-modal-body{ padding:0 34px 34px; }
.pubx-modal-body p{ font-size:14.5px; line-height:1.7; color:var(--gris-fonce,#4a463c); }
.pubx-modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; justify-content:center; }
.pubx-modal-actions a{
  font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 18px; border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; gap:7px;
}
.pubx-btn-primary{ background:var(--noir,#0b0b0a); color:var(--blanc,#faf9f5); }
.pubx-btn-ghost{ border:1px solid var(--ligne-noire,rgba(10,8,4,.2)); color:var(--noir,#0b0b0a); }

/* ---- CTA bas de page ---- */
.pubx-join{
  margin:60px 0 90px; border:1.5px dashed rgba(199,154,61,.55); border-radius:4px; padding:44px 30px;
  text-align:center; background:rgba(199,154,61,.05);
}
.pubx-join h3{ font-family:var(--font-display,'Manrope',sans-serif); font-size:22px; color:var(--noir,#0b0b0a); margin-bottom:8px; }
.pubx-join p{ color:var(--gris-fonce,#4a463c); font-size:14.5px; margin-bottom:20px; }

@media (max-width:640px){
  .pubx-hero{ padding:120px 0 46px; }
  .pubx-toolbar{ flex-direction:column; align-items:stretch; }
  .pubx-search{ min-width:0; }
  .pubx-grid{ grid-template-columns:1fr 1fr; gap:14px; padding:30px 0 20px; }
  .pubx-card{ padding:20px 14px 16px; }
  .pubx-porthole{ width:72px; height:72px; margin:10px auto 12px; }
  .pubx-name{ font-size:14.5px; }
  .pubx-tagline{ font-size:11.5px; }
  .pubx-stamp{ display:none; }
}