/* ═══════════════════════════════════════════════════════════════
   ManiaKar — site web — ESPACE VENDEUR : ANNONCES ET OFFRES (refonte du 14/09)
   Couvre /compte/annonces, /compte/annonces/:id, /compte/offres et
   /compte/offres/:id. Chargé après refonte.css : seulement ce qui y manque,
   avec les jetons de tokens.css (aucune couleur en dur hors #fff).
   Même règle de couleur que le reste du site : vert CTA = action principale,
   vert marque = ce qui se clique, encre = les faits, ambre = le temps qui
   passe, rouge = destruction ou erreur.
═══════════════════════════════════════════════════════════════ */

/* ── États de page ─────────────────────────────────────────────── */
.vendeur-chargement { color: var(--mk-texte-secondaire); font-size: 14.5px; padding: 24px 0; margin: 0; }
[aria-busy="true"] > .vendeur-chargement { min-height: 120px; }

/* ── Onglets : compteur dans l'onglet, note sous la barre ──────── */
.onglet { display: inline-flex; align-items: center; }
.onglet-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 999px; background: var(--mk-surface-haute); color: var(--mk-texte-secondaire); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.onglet[aria-selected="true"] .onglet-compte { background: var(--mk-surface-moyenne); color: var(--mk-vert-marque); }
.onglet:focus-visible { outline-offset: -3px; }
.onglets-note { font-size: 14px; color: var(--mk-texte-secondaire); margin: -6px 0 14px; }

/* ── Bloc : une section de page en carte ───────────────────────── */
.bloc { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 18px 20px; margin-bottom: 18px; min-width: 0; }
.bloc > h2 { font-size: 17px; font-weight: 800; margin: 0 0 10px; color: var(--mk-encre); }
.bloc h3 { font-size: 15px; font-weight: 800; margin: 16px 0 8px; color: var(--mk-encre); }
.bloc-sous { font-size: 14px; color: var(--mk-texte-secondaire); margin: 0 0 12px; line-height: 1.5; }
.bloc-texte { font-size: 15px; color: var(--mk-texte); margin: 0 0 10px; line-height: 1.55; }
.bloc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.bloc .pay-notice { margin: 8px 0 0; padding: 9px 12px; font-size: 13.5px; }
.bloc-note { font-size: 13px; color: var(--mk-texte-secondaire); margin: 10px 0 0; line-height: 1.5; }

/* ── Détail d'une annonce : galerie à gauche, résumé à droite ──── */
.annonce-haut { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: start; margin-bottom: 18px; }
.annonce-haut .bloc { margin-bottom: 0; }
.gallery .thumbs button:focus-visible { outline: 3px solid var(--mk-vert-cta); outline-offset: 2px; }
.statut-ligne { font-size: 14.5px; color: var(--mk-texte); margin: 12px 0 0; line-height: 1.5; }
.diffusion { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mk-bordure); }
.diffusion-titre { font-weight: 700; color: var(--mk-encre); font-size: 15px; }
.diffusion-detail { font-size: 13.5px; color: var(--mk-texte-secondaire); margin: 6px 0 0; }
.paliers { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 10px 0 0; padding: 0; }
.paliers li { position: relative; padding-top: 10px; font-size: 12px; text-align: center; color: var(--mk-texte-secondaire); white-space: nowrap; }
.paliers li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 3px; background: var(--mk-surface-haute); }
.paliers li.atteint { color: var(--mk-encre); font-weight: 600; }
.paliers li.atteint::before { background: var(--mk-vert-marque); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mk-bordure); }
.chiffre .montant { font-size: 26px; line-height: 1.2; }
.chiffre-secondaire .montant { font-size: 20px; }
.chiffres-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--mk-texte-secondaire); margin: 0; line-height: 1.5; }
.annonce-description { white-space: pre-line; margin: 12px 0 0; font-size: 15px; color: var(--mk-texte); }

/* ── Offres reçues sur une annonce ─────────────────────────────── */
.classement { font-size: 14px; color: var(--mk-texte); margin: 0 0 6px; line-height: 1.5; }
.classement-details { font-size: 13.5px; color: var(--mk-texte-secondaire); margin: 0 0 14px; }
.classement-details summary, .offres-terminees summary { cursor: pointer; color: var(--mk-vert-marque); font-weight: 600; width: fit-content; }
.classement-details p { margin: 8px 0 6px; line-height: 1.5; }
.offres-recues { display: grid; gap: 12px; }
.offre-recue { border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 14px 16px; background: var(--mk-surface); min-width: 0; }
.offre-recue.offre-meilleure { border-color: var(--mk-vert-marque); box-shadow: inset 0 0 0 1px var(--mk-vert-marque); }
.offre-recue-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.offre-recue-montant { font-size: 24px; font-weight: 700; color: var(--mk-encre); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; }
.offre-recue-etats { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.offre-recue-pro { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 14px; margin-top: 8px; color: var(--mk-texte); }
.offre-recue-pro strong { color: var(--mk-encre); }
.offre-recue-infos { color: var(--mk-texte-secondaire); font-size: 13.5px; }
.offre-recue-message { font-size: 14px; color: var(--mk-texte); margin: 8px 0 0; overflow-wrap: anywhere; }
.offre-recue-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.offre-recue-pied .btn { margin-left: auto; }
.badge-formule { font-size: 11px; letter-spacing: .05em; }
.avantages { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.avantages li { font-size: 13px; padding: 3px 10px; border-radius: var(--mk-rayon-pilule); background: var(--mk-surface-basse); color: var(--mk-encre); border: 1px solid var(--mk-surface-moyenne); }
.offres-terminees { margin-top: 16px; }
.offres-terminees .offres-recues { margin-top: 12px; }
.offres-concurrence { font-size: 13px; color: var(--mk-texte-secondaire); margin: 12px 0 0; }

/* ── Options de visibilité (Premium, Urgence, avoir) ───────────── */
.visibilite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.option { border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.option h3 { margin: 0; font-size: 16px; }
.option-prix { font-weight: 700; color: var(--mk-encre); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.option ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--mk-texte); display: grid; gap: 4px; }
.option .btn { align-self: flex-start; }
.option .pill { align-self: flex-start; }
.avoir { background: var(--mk-surface-basse); border: 1px solid var(--mk-surface-moyenne); border-radius: var(--mk-rayon-md); padding: 10px 12px; font-size: 14px; color: var(--mk-encre); display: grid; gap: 8px; }
.avoir p { margin: 0; }

/* ── HistoVec ──────────────────────────────────────────────────── */
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mk-texte); margin: 12px 0 0; cursor: pointer; line-height: 1.45; }
.case input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--mk-vert-cta); flex: none; cursor: pointer; }
.etapes-histovec { margin: 0 0 12px; padding-left: 20px; font-size: 14px; color: var(--mk-texte); display: grid; gap: 4px; }
.lien-externe { display: inline-block; font-weight: 600; margin: 0 0 12px; }

/* ── Fenêtres : motifs de retrait, gestion des photos ──────────── */
.motifs { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.motifs legend { font-weight: 600; color: var(--mk-encre); font-size: 14.5px; margin-bottom: 8px; padding: 0; }
.motifs label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-champ); cursor: pointer; font-size: 14.5px; color: var(--mk-texte); }
.motifs input { width: 16px; height: 16px; accent-color: var(--mk-erreur); flex: none; }
.photos-gestion { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; padding: 0; }
.photo-geree { margin: 0; border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-md); overflow: hidden; background: var(--mk-surface-basse); }
.photo-geree img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-geree-pied { display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: 12px; color: var(--mk-texte-secondaire); }
.photo-geree-pied .lien-btn { font-size: 12.5px; }
.photo-geree-pied .lien-btn:disabled { color: var(--mk-contour-clair); cursor: not-allowed; }
.photos-compteur { font-size: 13px; color: var(--mk-texte-secondaire); margin: 0 0 8px; }
.champ-fichier { font: inherit; font-size: 14px; max-width: 100%; }

/* ── Liste des offres reçues (/compte/offres) ──────────────────── */
.offres-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offre-ligne { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto minmax(150px, auto); gap: 6px 16px; align-items: center; background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 12px 14px; color: var(--mk-texte); }
.offre-ligne:hover { border-color: var(--mk-contour-clair); box-shadow: var(--mk-ombre-carte); text-decoration: none; }
.offre-ligne-photo { display: block; width: 72px; aspect-ratio: 4 / 3; border-radius: var(--mk-rayon-md); overflow: hidden; background: linear-gradient(135deg, var(--mk-surface-moyenne), var(--mk-surface-haute)); }
.offre-ligne-photo img { width: 100%; height: 100%; object-fit: cover; }
.offre-ligne-texte { display: flex; flex-direction: column; min-width: 0; }
.offre-ligne-veh { font-weight: 700; color: var(--mk-encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offre-ligne-sous { font-size: 13px; color: var(--mk-texte-secondaire); }
.offre-ligne-montant { font-size: 19px; font-weight: 700; color: var(--mk-encre); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.offre-ligne-etat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; text-align: right; }

/* ── Détail d'une offre (/compte/offres/:id) ───────────────────── */
.offre-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr); gap: 20px; align-items: start; }
.offre-principal, .offre-cote { min-width: 0; }
.decision h2.montant-label { font-family: var(--mk-hanken); margin: 0; }
.decision .montant { font-size: 34px; line-height: 1.15; }
.decision .frise { margin-top: 14px; }
.decision-etat { font-size: 15px; color: var(--mk-texte); margin: 14px 0 0; line-height: 1.55; }
.decision-echeance { font-size: 14.5px; margin: 8px 0 0; color: var(--mk-texte); }
.decision .recap-liste { margin-top: 12px; }
.decision-prime { font-size: 14px; color: var(--mk-texte); margin: 12px 0 0; line-height: 1.5; }
.decision-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.decision-litige { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--mk-contour-clair); }
.decision-litige .lien-btn { font-size: 13px; color: var(--mk-texte-secondaire); }
.offre-message { margin: 0; padding: 12px 14px; border-left: 3px solid var(--mk-surface-haute); background: var(--mk-surface-basse); border-radius: 0 var(--mk-rayon-md) var(--mk-rayon-md) 0; font-size: 15px; color: var(--mk-texte); white-space: pre-line; overflow-wrap: anywhere; }
.vehicule-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.vehicule-mini-photo { display: block; aspect-ratio: 4 / 3; border-radius: var(--mk-rayon-md); overflow: hidden; background: linear-gradient(135deg, var(--mk-surface-moyenne), var(--mk-surface-haute)); }
.vehicule-mini-photo img { width: 100%; height: 100%; object-fit: cover; }
.vehicule-mini strong { display: block; color: var(--mk-encre); }
.vehicule-mini span { font-size: 13.5px; color: var(--mk-texte-secondaire); }
.pro-tete { display: flex; gap: 12px; align-items: center; }
.pro-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--mk-bordure); flex: none; }
.pro-nom { font-weight: 800; color: var(--mk-encre); font-size: 16px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pro-infos { font-size: 13.5px; color: var(--mk-texte-secondaire); margin: 2px 0 0; }
.avis-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.avis-item { border-top: 1px solid var(--mk-bordure); padding-top: 10px; font-size: 14px; color: var(--mk-texte); }
.avis-item p { margin: 4px 0 0; overflow-wrap: anywhere; }
.avis-etoiles { color: var(--mk-encre); letter-spacing: 1px; }
.avis-date { font-size: 12.5px; color: var(--mk-texte-secondaire); margin-top: 2px; }
.avis-reponse { margin: 8px 0 0; padding: 8px 10px; background: var(--mk-surface-basse); border-radius: var(--mk-rayon-md); font-size: 13.5px; }
.avis-reponse strong { display: block; font-size: 12.5px; color: var(--mk-encre); }
.avis-item .lien-btn { font-size: 13px; margin-top: 6px; color: var(--mk-texte-secondaire); }
.avis-mentions { font-size: 12.5px; color: var(--mk-texte-secondaire); margin: 12px 0 0; line-height: 1.5; }
.etoiles { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.etoiles legend { font-size: 13px; font-weight: 600; color: var(--mk-encre); margin-bottom: 4px; padding: 0; }
.etoiles-choix { position: relative; display: flex; gap: 2px; }
.etoiles-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.etoiles-choix label { font-size: 32px; line-height: 1; color: var(--mk-surface-haute); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.etoiles-choix label.on { color: var(--mk-vert-marque); }
.etoiles-choix input:focus-visible + label { outline: 3px solid var(--mk-vert-cta); outline-offset: 1px; }
.erreur-champ { color: var(--mk-erreur); font-size: 13.5px; margin: 8px 0 0; }
.bloc h2[tabindex="-1"]:focus { outline: none; }

/* ── Replis ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .annonce-haut, .offre-grille { grid-template-columns: 1fr; }
  .visibilite { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offre-ligne { grid-template-columns: 60px minmax(0, 1fr); }
  .offre-ligne-photo { width: 60px; }
  .offre-ligne-montant { grid-column: 2; text-align: left; font-size: 17px; }
  .offre-ligne-etat { grid-column: 2; align-items: flex-start; text-align: left; }
  .offre-ligne-veh { white-space: normal; }
  .photos-gestion { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bloc { padding: 16px; }
  .specs { grid-template-columns: 1fr; }
  .specs li:nth-child(odd) { border-right: 0; }
  .paliers li { font-size: 11px; }
  .decision .montant { font-size: 30px; }
  .decision-actions .btn { flex: 1 1 auto; }
  .vehicule-mini { grid-template-columns: 76px minmax(0, 1fr); }
}