/* ============================================================
   dx-offreur-shared.css — SOCLE COMMUN offreur
   Utilisé par : offreur-register.html + offreur-compte.html
   Ne pas dupliquer ces règles dans les pages individuelles.
   ============================================================ */

:root {
  --dx-bg:       #f6f7f8;
  --dx-card:     #ffffff;
  --dx-border:   #d9dee5;
  --dx-text:     #1f2937;
  --dx-muted:    #6b7280;
  --dx-orange:   #ff7a00;
  --dx-green:    #0a7a33;
  --dx-prem:     #fff6f0;
  --dx-prem-b:   #f3c7aa;
  --dx-ok:       #eef8f0;
  --dx-ok-b:     #a9d4b2;
  --dx-shadow:   0 1px 2px rgba(0,0,0,.04);
  --dx-radius:   16px;
  --dx-rail:     1200px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--dx-bg);
  color: var(--dx-text);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

/* ── Conteneur ── */
main.container {
  width: min(100%, var(--dx-rail));
  max-width: var(--dx-rail);
  margin: 18px auto 28px;
  padding: 0 12px;
}

/* ── Carte principale ── */
.card {
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius);
  box-shadow: var(--dx-shadow);
  padding: 16px;
  margin-bottom: 10px;
}

/* ── En-tête hero ── */
.heroTitle {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
}
.heroSub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--dx-muted);
}

/* ── Sections ── */
.sectionTitle {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}
.sectionSub {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dx-muted);
}

/* ── Grille deux colonnes ── */
.mainGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
}
.leftCol, .rightCol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Carte de champ ── */
.fieldCard {
  background: #fff;
  border: 1px solid var(--dx-border);
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.fieldTitle {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}
.fieldIntro {
  margin: 0 0 12px;
  color: var(--dx-muted);
  font-size: 12px;
  font-weight: 700;
}

/* ── Champs ── */
.split2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.field { min-width: 0; }

label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  color: #111827;
}
.req { color: #dc2626; }

.input, textarea, select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #cfd6de;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-size: 12px;
  padding: 10px 11px;
  outline: none;
  font-family: inherit;
}
textarea { min-height: 92px; resize: vertical; }
input[disabled], select[disabled] {
  background: #f3f4f6;
  color: var(--dx-muted);
  cursor: not-allowed;
}

.hint {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--dx-muted);
}

.rowInline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}

/* ── Boutons ── */
.btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.btn {
  appearance: none;
  border: 1px solid #cfd6de;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
  font-family: inherit;
}
.btn:hover { background: #f9fafb; }
.btnPrimary  { background: var(--dx-orange); border-color: var(--dx-orange); color: #fff; }
.btnPrimary:hover { background: #e06a00; border-color: #e06a00; }
.btnDanger   { border-color: #dc2626; color: #dc2626; background: #fff; }
.btnDanger:hover { background: #fef2f2; }
.btnMuted    { color: var(--dx-muted); }

/* ── Pills / Chips ── */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  font-size: 11px;
  font-weight: 800;
  color: #374151;
}
.pillX {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--dx-muted);
}
.premium { background: var(--dx-prem); border-color: var(--dx-prem-b); }

/* ── Notices ── */
.notice {
  display: none;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  margin-top: 8px;
}
.notice.ok  { background: var(--dx-ok);  border: 1px solid var(--dx-ok-b);  color: var(--dx-green); display: block; }
.notice.bad { background: #fef2f2;       border: 1px solid #fecaca;          color: #dc2626;         display: block; }
.notice.muted { background: #f3f4f6;    border: 1px solid var(--dx-border); color: var(--dx-muted); display: block; }

/* ── Aperçu public ── */
.previewBox {
  background: #f9fafb;
  border: 1px solid var(--dx-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 12px;
}
.previewRole  { font-size: 11px; font-weight: 700; color: var(--dx-muted); margin-bottom: 2px; }
.previewName  { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.previewMeta  { font-size: 11px; font-weight: 700; color: var(--dx-muted); margin-bottom: 6px; }
.previewDesc  { font-size: 12px; color: var(--dx-muted); font-style: italic; }
/* Pas de lien sur previewDesc */
.previewDesc a, .previewDesc * { text-decoration: none; color: inherit; pointer-events: none; }

/* ── Barre d'accès (compte uniquement) ── */
.accessBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid var(--dx-border);
  border-radius: 12px;
  margin-bottom: 12px;
}
.accessBar .statusPill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--dx-border);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
}
.statusPill.active { background: var(--dx-ok); border-color: var(--dx-ok-b); color: var(--dx-green); }
.statusPill.inactive { background: #f3f4f6; color: var(--dx-muted); }

.accessBar .spacer { flex: 1; }
.accessBar .actionBtns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Historique / sections secondaires ── */
.historyBox {
  margin-top: 10px;
  font-size: 12px;
}
.historyItem {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.historyItem:last-child { border-bottom: none; }
.historyItem strong { font-weight: 800; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .mainGrid { grid-template-columns: 1fr; }
  .split2   { grid-template-columns: 1fr; }
  .accessBar .actionBtns { width: 100%; }
}