/*! Keurosti — CSS spécifique à la page Publier
 * Extrait de css/style.css pour ne pas charger ~1300 lignes sur les pages
 * où ces classes ne sont pas utilisées.
 * Chargé uniquement sur publier.html et publier-mobile.html.
 * Les classes .publish-chip et .publish-chip-grid (partagées avec les
 * filtres des pages Occasion / Neuves) restent dans style.css.
 */

/* =========================================================================
   FORMULAIRE PUBLIER — Section cards + chips uniformes (refonte UX)
   But : (1) hiérarchie visuelle claire entre sections numérotées
         (2) tous les groupes de boutons alignés (même hauteur, grille)
   ========================================================================= */

.publish-section-card {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 8px 24px rgba(15,20,25,.04);
}
.publish-section-card + .publish-section-card { margin-top: 14px; }

.publish-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.publish-section-num {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #0A1628; /* navy */
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13.5px;
  flex-shrink: 0;
}
.publish-section-num.done { background: #1F8A5B; }
.publish-section-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #0F1419;
  letter-spacing: -0.2px;
}
.publish-section-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.publish-section-count {
  font-size: 12px;
  color: #5C6470;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.publish-section-progress {
  width: 70px;
  height: 6px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 3px;
  overflow: hidden;
}
.publish-section-progress > span {
  display: block;
  height: 100%;
  background: #F5A623; /* gold */
  border-radius: 3px;
  transition: width .2s ease;
}
.publish-section-progress.done > span { background: #1F8A5B; }

/* Chip groups : grille uniforme, toutes les chips ont la même hauteur.
   Remplace les .grid grid-cols-N gap-2 + box pour les radio "peer". */

/* Variante "state chip" : chip plus haute avec label + description courte */
.publish-chip-state {
  height: auto;
  min-height: 54px;
  padding: 10px 14px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.publish-chip-state .publish-chip-state-label {
  font-weight: 700;
  font-size: 14px;
  color: #0F1419;
}
.publish-chip-state .publish-chip-state-desc {
  font-size: 11.5px;
  color: #5C6470;
  font-weight: 500;
}
label.publish-chip-state:has(input:checked) .publish-chip-state-label,
.publish-chip-state.is-active .publish-chip-state-label { color: #0A1628; }

/* Compteur de complétion dans le label (style "JetBrains Mono" approximé) */
.publish-field-hint {
  font-size: 11.5px;
  color: #8A93A0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* CSS Grid fallback pour les anciens .grid grid-cols-N gap-2 dans #publish-form
   afin que les options conservent même hauteur même si quelqu'un édite le HTML
   sans appliquer la nouvelle classe. */
#publish-form .grid > label.cursor-pointer > div {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   ÉTAPE 2 — ÉQUIPEMENTS : header de stats + recherche + accordéons
   ========================================================================= */
.publish-eq-header {
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 8px 24px rgba(15,20,25,.04);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.publish-eq-stats { flex: 0 0 auto; min-width: 180px; }
.publish-eq-stats-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.publish-eq-stats-count .num {
  font-size: 30px;
  font-weight: 800;
  color: #0F1419;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.publish-eq-stats-count .den {
  font-size: 13px;
  color: #5C6470;
  font-weight: 500;
}
.publish-eq-stats-hint {
  margin-top: 4px;
  font-size: 12px;
  color: #5C6470;
  line-height: 1.35;
}
.publish-eq-stats-hint b { color: #D08A1B; font-weight: 700; }
.publish-eq-search {
  flex: 1 1 240px;
  /* min-width:0 + max-width : sans ça, la taille INTRINSÈQUE de l'input
     (~20 caractères × police zoomée Android) force la boîte à déborder à
     droite de la carte (constaté le 2026-06-12, police système agrandie). */
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
  background: #F7F8FB;
}
.publish-eq-search i { color: #8A93A0; font-size: 14px; }
.publish-eq-search input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #0F1419;
  outline: none;
}
.publish-eq-search-clear {
  border: none;
  background: #FFFFFF;
  color: #5C6470;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: none;
}
.publish-eq-search.has-query .publish-eq-search-clear { display: inline-flex; }

.publish-eq-cats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.publish-eq-cat {
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 8px 24px rgba(15,20,25,.04);
  overflow: hidden;
}
.publish-eq-cat[data-empty="1"] { display: none; }
.publish-eq-cat-head {
  width: 100%;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.publish-eq-cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #F3F4F6;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background .15s;
}
.publish-eq-cat[data-sel="1"] .publish-eq-cat-icon {
  background: #FFF4E0;
}
.publish-eq-cat-title { flex: 1; min-width: 0; }
.publish-eq-cat-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #0F1419;
  letter-spacing: -0.2px;
}
.publish-eq-cat-meta {
  font-size: 12px;
  color: #5C6470;
  margin-top: 2px;
}
.publish-eq-cat-meta b { color: #D08A1B; font-weight: 700; }
.publish-eq-cat-chevron {
  color: #8A93A0;
  font-size: 14px;
  transition: transform .18s;
}
.publish-eq-cat.is-open .publish-eq-cat-chevron { transform: rotate(180deg); }
.publish-eq-cat-body {
  display: none;
  padding: 14px 22px 20px;
  border-top: 1px solid #E3E6EC;
}
.publish-eq-cat.is-open .publish-eq-cat-body { display: block; }
.publish-eq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 1023px) {
  .publish-eq-grid { grid-template-columns: 1fr; }
}

.publish-eq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid #E3E6EC;
  background: #FFFFFF;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
  user-select: none;
}
.publish-eq-item:hover { border-color: #CFD4DC; }
.publish-eq-item.is-hidden { display: none; }
.publish-eq-item input { display: none; }
.publish-eq-item-tick {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #CFD4DC;
  background: #FFFFFF;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #0E1117;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.publish-eq-item-text {
  font-size: 13px;
  color: #0F1419;
  font-weight: 500;
  line-height: 1.25;
}
.publish-eq-item:has(input:checked) {
  border-color: #D08A1B;
  background: #FFF8EC;
}
.publish-eq-item:has(input:checked) .publish-eq-item-tick {
  border-color: #D08A1B;
  background: #D08A1B;
}
.publish-eq-item:has(input:checked) .publish-eq-item-tick::before {
  content: '✓';
}
.publish-eq-item:has(input:checked) .publish-eq-item-text {
  color: #9A6512;
  font-weight: 600;
}

/* Catégorie cachée à cause du filtre de recherche */
.publish-eq-cat.is-filtered-out { display: none; }

/* =========================================================================
   ÉTAPE 3 — PHOTOS : section card avec grille tuiles + dropzone intégré
   ========================================================================= */
.publish-photo-section {
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 8px 24px rgba(15,20,25,.04);
}
.publish-photo-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.publish-photo-head .num {
  width: 34px; height: 34px; border-radius: 8px;
  background: #0A1628; color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13.5px;
  flex-shrink: 0;
}
.publish-photo-head .title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #0F1419;
  letter-spacing: -0.2px;
}
.publish-photo-head .count {
  font-size: 12px;
  color: #5C6470;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.publish-photo-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #5C6470;
  flex-wrap: wrap;
}
.publish-photo-min-badge {
  margin-left: auto;
  font-size: 11.5px;
  padding: 4px 10px;
  background: #FEF1E5;
  color: #C97A14;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.publish-photo-min-badge.is-met {
  background: #E6F4EE;
  color: #1F8A5B;
}

.publish-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1023px) {
  .publish-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

.publish-photo-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E3E6EC;
  aspect-ratio: 4 / 3;
  background: #1F2A36;
  cursor: grab;
}
.publish-photo-tile.is-dragging { opacity: 0.4; }
.publish-photo-tile.is-drop-target { border-color: #F5A623; box-shadow: 0 0 0 2px rgba(245,166,35,.35); }
.publish-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}
.publish-photo-cover-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #F5A623;
  color: #0A1628;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  display: none;
}
.publish-photo-tile:first-child .publish-photo-cover-badge { display: inline-block; }
.publish-photo-tile-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
}
.publish-photo-tile-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
  padding: 0;
  font-family: inherit;
}
.publish-photo-tile-btn:hover { background: rgba(0,0,0,.75); }
.publish-photo-tile-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
  padding: 18px 10px 8px;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.publish-photo-tile-footer .num-tag {
  opacity: .8;
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
}

/* Tuile "+" qui sert aussi de dropzone */
.publish-photo-add {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px dashed #F5A623;
  border-radius: 10px;
  background: #FFF8EC;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #9A6512;
  transition: background .15s, border-color .15s;
}
.publish-photo-add:hover {
  background: #FFF1D6;
}
.publish-photo-add.is-drop-target {
  background: #FFE9B8;
  border-color: #D08A1B;
}
.publish-photo-add-inner {
  text-align: center;
  padding: 10px;
}
.publish-photo-add-plus {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.publish-photo-add-label {
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}
.publish-photo-add-sub {
  font-size: 11px;
  color: #8A93A0;
  font-weight: 500;
  margin-top: 2px;
}

/* Footer info (formats acceptés + compteur de photos) */
.publish-photo-foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F7F8FB;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
  font-size: 12px;
  color: #5C6470;
  flex-wrap: wrap;
}
.publish-photo-foot .right {
  margin-left: auto;
  color: #0F1419;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Bouton "Prendre une photo" mobile dédié */
.publish-photo-camera-btn {
  margin-top: 12px;
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #E3E6EC;
  background: #FFFFFF;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  color: #0F1419;
  cursor: pointer;
  font-family: inherit;
}
.publish-photo-camera-btn i { color: #D08A1B; }
@media (max-width: 1023px) {
  .publish-photo-camera-btn { display: inline-flex; }
}

/* Bloc conseils (déplacé du sidebar V4 vers une card sous la grille) */
.publish-photo-tips {
  margin-top: 14px;
  background: #F7F8FB;
  border: 1px solid #E3E6EC;
  border-radius: 12px;
  padding: 14px 18px;
}
.publish-photo-tips-title {
  font-size: 13px;
  font-weight: 700;
  color: #0F1419;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.publish-photo-tips ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}
@media (max-width: 1023px) {
  .publish-photo-tips ul { grid-template-columns: 1fr; }
}
.publish-photo-tips li {
  font-size: 12px;
  color: #5C6470;
  display: flex;
  gap: 8px;
  line-height: 1.4;
}
.publish-photo-tips li::before {
  content: '✓';
  color: #1F8A5B;
  font-weight: 800;
  flex-shrink: 0;
}

/* =========================================================================
   APERÇU LIVE DE L'ANNONCE — sidebar desktop + bottom sheet mobile
   La SiteAdCard reflète en direct ce que voit l'acheteur sur la home.
   ========================================================================= */
.publish-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.publish-layout-main { flex: 1; min-width: 0; }
.publish-aside {
  flex: 0 0 340px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  display: none;
}
@media (min-width: 1024px) {
  .publish-aside { display: block; }
}

.publish-aside-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #5C6470;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.publish-aside-label .dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: #1F8A5B;
  box-shadow: 0 0 0 4px #E6F4EE;
}

/* La card miroir de la vignette home */
.publish-preview-card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,20,25,.06), 0 4px 16px rgba(15,20,25,.05);
  font-family: inherit;
}
.publish-preview-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, #F1F2F5 0 12px, #E8EAEE 12px 24px);
}
.publish-preview-photo.has-img { background: #1F2A36; }
.publish-preview-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.publish-preview-heart {
  position: absolute;
  top: 10px; left: 10px;
  width: 30px; height: 30px;
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  display: grid;
  place-items: center;
  color: #5C6470;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.publish-preview-pills {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.publish-preview-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.publish-preview-pills .pill-relay {
  background: #E5484D;
  color: #fff;
}
.publish-preview-pills .pill-etat {
  background: #fff;
  color: #0F1419;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.publish-preview-noimg-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8A93A0;
  font-size: 12px;
  font-family: monospace;
  pointer-events: none;
}
.publish-preview-photo.has-img .publish-preview-noimg-text { display: none; }
.publish-preview-dots {
  position: absolute;
  bottom: 10px; left: 12px;
  display: flex;
  gap: 4px;
}
.publish-preview-dots span {
  width: 5px; height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.55);
}
.publish-preview-dots span.is-active { background: #fff; }
.publish-preview-photo:not(.has-img) .publish-preview-dots { display: none; }

/* Le corps est désormais rendu par keurostiAdCardBody (qui porte son propre
   padding 14/16/16) → on neutralise le padding du conteneur pour ne pas doubler. */
.publish-preview-body { padding: 0; }
/* Flèches de navigation photo sur l'aperçu (même rôle que sur les cartes du site) */
.publish-preview-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  cursor: pointer;
  z-index: 3;
}
.publish-preview-arrow[data-gallery-nav="prev"] { left: 8px; }
.publish-preview-arrow[data-gallery-nav="next"] { right: 8px; }
.publish-preview-photo:not(.has-img) .publish-preview-arrow { display: none; }
.publish-preview-brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #8A93A0;
  text-transform: uppercase;
}
.publish-preview-model {
  font-size: 18px;
  font-weight: 800;
  color: #0F1419;
  margin-top: 2px;
  letter-spacing: -0.3px;
}
.publish-preview-specs {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 14px;
  row-gap: 4px;
}
.publish-preview-specs > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #5C6470;
  font-weight: 500;
}
.publish-preview-specs > span.gold {
  color: #C99837;
  font-weight: 600;
}
.publish-preview-specs i { font-size: 11px; opacity: 0.7; }
.publish-preview-price {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #C99837;
  letter-spacing: -0.3px;
}
.publish-preview-price.is-empty {
  color: #A0A8B4;
  font-weight: 600;
  font-size: 14px;
}

.publish-aside-tip {
  margin-top: 14px;
  padding: 12px 16px;
  background: #FFF8EC;
  border: 1px solid #F5E0B5;
  border-radius: 10px;
  font-size: 12px;
  color: #9A6512;
  line-height: 1.45;
}
.publish-aside-tip b { color: #0F1419; }

/* === Mobile bottom sheet / FAB === */
.publish-preview-fab {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 14px;
  z-index: 45;
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  background: #0A1628;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  font-family: inherit;
}
.publish-preview-fab i { color: #F5A623; }
@media (max-width: 1023px) {
  .publish-preview-fab { display: inline-flex; }
}

.publish-preview-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(15,20,25,.55);
}
.publish-preview-sheet.is-open { display: block; }
.publish-preview-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 85vh;
  overflow-y: auto;
}
.publish-preview-sheet-grab {
  width: 36px; height: 4px; border-radius: 2px;
  background: #CFD4DC;
  margin: 0 auto 12px;
}
.publish-preview-sheet-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 16px;
  background: #F3F4F6;
  border: none;
  color: #5C6470;
  cursor: pointer;
  font-size: 14px;
}

/* =========================================================================
   ÉTAPE 4 — PRIX & LOCALISATION : input XL + toggle Négociable + info banner
   ========================================================================= */
.publish-price-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.publish-price-input-wrap {
  position: relative;
  flex: 1 1 280px;
}
.publish-price-input {
  width: 100%;
  height: 76px;
  padding: 0 130px 0 22px;
  border: 2px solid #E3E6EC;
  border-radius: 14px;
  background: #FFFFFF;
  font-size: 36px;
  font-weight: 800;
  color: #0F1419;
  letter-spacing: -1px;
  font-family: inherit;
  outline: none;
}
.publish-price-input:focus { border-color: #F5A623; }
.publish-price-suffix {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  pointer-events: none;
}
.publish-price-suffix .label {
  font-size: 13px;
  color: #5C6470;
  font-weight: 700;
}
.publish-price-suffix .conv {
  font-size: 11px;
  color: #8A93A0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .publish-price-input {
    height: 64px;
    font-size: 30px;
    padding: 0 110px 0 18px;
  }
}

.publish-neg-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 76px;
  padding: 0 18px;
  border: 2px solid #E3E6EC;
  border-radius: 14px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .publish-neg-toggle { height: 64px; width: 100%; }
}
.publish-neg-toggle:has(input:checked) {
  border-color: #F5A623;
  background: #FFF8EC;
}
.publish-neg-toggle input { display: none; }
.publish-neg-switch {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: #CFD4DC;
  position: relative;
  transition: background .15s;
  flex-shrink: 0;
}
.publish-neg-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 9px;
  transition: left .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.publish-neg-toggle:has(input:checked) .publish-neg-switch { background: #F5A623; }
.publish-neg-toggle:has(input:checked) .publish-neg-switch::after { left: 18px; }
.publish-neg-text { text-align: left; }
.publish-neg-text .t {
  font-size: 13px;
  font-weight: 700;
  color: #0F1419;
}
.publish-neg-text .s {
  font-size: 11px;
  color: #5C6470;
}
.publish-neg-toggle:has(input:checked) .publish-neg-text .t { color: #9A6512; }

.publish-info-banner {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: #EAF2FE;
  border: 1px solid #C9D8F2;
  border-radius: 10px;
  font-size: 12.5px;
  color: #1B5FCC;
  line-height: 1.45;
  margin-top: 14px;
}
.publish-info-banner i { flex-shrink: 0; margin-top: 2px; }

/* =========================================================================
   ÉTAPE 5 — COORDONNÉES : card vendeur lecture seule + tel/WA toggle
   ========================================================================= */
.publish-vendor-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #F7F8FB;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
}
.publish-vendor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #F5A623;
  color: #0A1628;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}
.publish-vendor-info { flex: 1; min-width: 0; }
.publish-vendor-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0F1419;
}
.publish-vendor-meta {
  font-size: 12px;
  color: #5C6470;
  margin-top: 1px;
}
.publish-vendor-link {
  font-size: 12.5px;
  color: #D08A1B;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.publish-vendor-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .publish-vendor-card { flex-wrap: wrap; }
  .publish-vendor-link { width: 100%; text-align: center; padding-top: 6px; border-top: 1px solid #E3E6EC; }
}

.publish-tel-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.publish-tel-prefix {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 44px;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
  background: #F7F8FB;
  font-size: 14px;
  font-weight: 700;
  color: #0F1419;
  flex-shrink: 0;
}
.publish-tel-input {
  flex: 1 1 180px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 14px;
  color: #0F1419;
  font-family: inherit;
  outline: none;
  letter-spacing: 0.5px;
}
.publish-wa-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid #E3E6EC;
  background: #FFFFFF;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #5C6470;
  white-space: nowrap;
}
.publish-wa-toggle input { display: none; }
.publish-wa-toggle:has(input:checked) {
  border-color: #25D366;
  background: #E8FAEF;
  color: #0F7A3D;
}
.publish-wa-toggle .check { display: none; font-weight: 900; font-size: 12px; }
.publish-wa-toggle:has(input:checked) .check { display: inline; }

/* =========================================================================
   ÉTAPE 6 — RÉCAP : hero card + recap grid + CGU + CTA gold
   ========================================================================= */
.publish-recap-hero {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #E3E6EC;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 8px 24px rgba(15,20,25,.04);
  overflow: hidden;
  display: grid;
  grid-template-columns: 340px 1fr;
  margin-bottom: 18px;
}
@media (max-width: 767px) {
  .publish-recap-hero { grid-template-columns: 1fr; }
}
.publish-recap-hero-preview {
  padding: 22px;
  background: #F7F8FB;
  border-right: 1px solid #E3E6EC;
}
@media (max-width: 767px) {
  .publish-recap-hero-preview { border-right: none; border-bottom: 1px solid #E3E6EC; }
}
.publish-recap-hero-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.publish-recap-hero-eyebrow {
  font-size: 11px;
  color: #D08A1B;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.publish-recap-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: #0F1419;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.publish-recap-hero-sub {
  font-size: 13px;
  color: #5C6470;
}
.publish-recap-hero-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.publish-recap-stat {
  padding: 12px 14px;
  background: #F7F8FB;
  border: 1px solid #E3E6EC;
  border-radius: 10px;
}
.publish-recap-stat .lab {
  font-size: 10.5px;
  color: #5C6470;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.publish-recap-stat .val {
  font-size: 16px;
  font-weight: 800;
  color: #0F1419;
  margin-top: 3px;
  letter-spacing: -0.3px;
}
.publish-recap-stat .sub {
  font-size: 11.5px;
  color: #5C6470;
  margin-top: 1px;
}
.publish-recap-ready {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.publish-recap-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #E6F4EE;
  color: #1F8A5B;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.publish-recap-ready-badge .check-circle {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #1F8A5B;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
}
.publish-recap-ready-info {
  font-size: 12px;
  color: #5C6470;
}

.publish-recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 767px) {
  .publish-recap-grid { grid-template-columns: 1fr; }
}
.publish-recap-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid #E3E6EC;
  box-shadow: 0 1px 2px rgba(15,20,25,.04), 0 4px 12px rgba(15,20,25,.04);
}
.publish-recap-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.publish-recap-card-head .check-pill {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #E6F4EE;
  color: #1F8A5B;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.publish-recap-card-head .title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
  color: #0F1419;
}
.publish-recap-card-head .edit {
  border: none;
  background: #F7F8FB;
  color: #0F1419;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.publish-recap-card-head .edit:hover { background: #E8EBF0; }
.publish-recap-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.publish-recap-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  font-size: 12.5px;
}
.publish-recap-row .k { color: #5C6470; }
.publish-recap-row .v { color: #0F1419; font-weight: 600; word-break: break-word; }
@media (max-width: 767px) {
  .publish-recap-row { grid-template-columns: 1fr; gap: 2px; }
  .publish-recap-row .v { font-weight: 700; }
}

.publish-cgu-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid #E3E6EC;
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
}
.publish-cgu-box input[type="checkbox"] { display: none; }
.publish-cgu-box-check {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid #CFD4DC;
  background: #FFFFFF;
  display: grid;
  place-items: center;
  color: #0E1117;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
  margin-top: 1px;
}
.publish-cgu-box:has(input:checked) .publish-cgu-box-check {
  background: #F5A623;
  border-color: #F5A623;
}
.publish-cgu-box:has(input:checked) .publish-cgu-box-check::before { content: '✓'; }
.publish-cgu-box-text {
  font-size: 13px;
  color: #5C6470;
  line-height: 1.5;
}
.publish-cgu-box-text a { color: #D08A1B; font-weight: 700; text-decoration: underline; }
.publish-publish-cta {
  height: 52px;
  padding: 0 32px;
  border: none;
  background: #F5A623;
  border-radius: 10px;
  font-weight: 800;
  color: #0E1117;
  font-family: inherit;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.2px;
  box-shadow: 0 8px 24px rgba(245,166,35,.35);
}
.publish-publish-cta:hover { background: #E69416; }

/* Fix : .btn { display: inline-flex } et les utilities Tailwind .flex
   override .hidden { display: none } car même spécificité et chargés après.
   Conséquence : <button class="btn ... hidden"> et <button class="flex ...
   hidden"> du formulaire #publier restaient visibles à toutes les étapes.
   On force la priorité uniquement sur les 3 boutons nav nommés pour ne
   pas casser les patterns `hidden md:block` utilisés ailleurs sur le site. */
#prevBtn.hidden,
#nextBtn.hidden,
#submitBtn.hidden { display: none !important; }