/* ═══════════════════════════════════════════════════════════════
   ManiaKar — site web — COMPOSANTS DE LA REFONTE (14/09)
   Chargé après desktop.css. Mêmes jetons que l'application (tokens.css) et
   la même règle : UNE couleur par rôle — vert CTA pour l'action principale
   seulement, vert marque pour ce qui se clique, encre pour les faits, ambre
   pour le temps qui passe, rouge pour la destruction.
═══════════════════════════════════════════════════════════════ */

/* ── Accessibilité ─────────────────────────────────────────────── */
.mk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mk-evitement { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--mk-encre); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.mk-evitement:focus { top: 10px; color: #fff; text-decoration: none; }
main:focus { outline: none; }

/* ── En-tête (mk-entete.js) : pastilles, mention Pro, formule, icône Messages ── */
.nav-links a, .nav-compte-menu a, .nav-tiroir-liens a { display: flex; align-items: center; gap: 8px; }
.nav-compte-menu a, .nav-tiroir-liens a { justify-content: space-between; }
.nav-pastille { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--mk-vert-marque); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.nav-pastille.nav-pastille-texte { background: var(--mk-ambre-fond); color: var(--mk-ambre-texte); border: 1px solid var(--mk-ambre-bordure); }
.brand .nav-mention { margin-left: 8px; font-family: var(--mk-hanken); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-vert-marque); background: var(--mk-surface-moyenne); border-radius: 999px; padding: 3px 8px; }
.nav-formule { font-size: 13px; font-weight: 600; color: var(--mk-vert-marque); border: 1px solid var(--mk-bordure); background: var(--mk-surface); border-radius: 999px; padding: 7px 12px; white-space: nowrap; }
.nav-formule:hover, .nav-formule[aria-current="page"] { border-color: var(--mk-vert-marque); text-decoration: none; }
.nav-icone { display: none; position: relative; width: 42px; height: 42px; border: 1px solid var(--mk-bordure); border-radius: 12px; background: var(--mk-surface); align-items: center; justify-content: center; color: var(--mk-encre); flex: none; }
.nav-icone .nav-pastille { position: absolute; top: -7px; right: -7px; }
.nav-compte-sep { height: 1px; background: var(--mk-bordure); margin: 4px 0; }
@media (max-width: 1040px) {
  .mk-nav .nav-icone { display: inline-flex; }
  .mk-nav .nav-formule { display: none; }
}
/* « Vendre<span> mon véhicule</span> » : le bouton est une boîte flex avec une
   gouttière ; sans ces deux règles, l'espace du libellé s'y ajoutait
   (« Vendre  mon véhicule »), ou disparaissait si on retirait la gouttière. */
.btn:has(> .nav-cta-suite) { gap: 0; }
.nav-cta-suite { white-space: pre; }
@media (max-width: 640px) {
  .nav-cta-suite { display: none; }
}

/* ── Fenêtre unique (mk-ui.js) ─────────────────────────────────── */
html.mk-dlg-ouverte, html.mk-dlg-ouverte body { overflow: hidden; }
.mk-dlg .box { max-width: 520px; }
.mk-dlg .box.mk-dlg-large { max-width: 720px; }
.mk-dlg .box:focus { outline: none; }
.mk-dlg-corps { margin-top: 6px; }
.mk-dlg-texte { margin: 0 0 12px; color: var(--mk-texte); font-size: 15px; line-height: 1.55; }
.mk-dlg-libelle { display: block; font-size: 13px; font-weight: 600; color: var(--mk-encre); margin: 6px 0 6px; }
.mk-dlg-champ { width: 100%; font: inherit; font-size: 15px; border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-champ); padding: 11px 13px; background: var(--mk-surface); color: var(--mk-encre); }
.mk-dlg-champ:focus { outline: none; border-color: var(--mk-vert-cta); box-shadow: 0 0 0 3px rgba(11, 128, 84, .15); }
.mk-dlg-erreur { color: var(--mk-erreur); font-size: 13px; margin: 6px 0 0; }
.mk-dlg-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 520px) {
  .mk-dlg-actions { flex-direction: column-reverse; }
  .mk-dlg-actions .btn { width: 100%; }
}

/* ── Pied de page : bouton en forme de lien ────────────────────── */
.foot-lien-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.foot-marque a[href^="mailto:"] { display: inline-block; margin-top: 6px; }

/* ── Espaces connectés (mk-espace.js) ──────────────────────────── */
.espace { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; padding: 28px 0 56px; }
.espace-nav { position: sticky; top: calc(var(--mk-barre-hauteur) + 20px); background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 10px; }
.espace-nav-titre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-texte-secondaire); padding: 10px 12px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.espace-nav-liste { list-style: none; margin: 0; padding: 0; }
.espace-nav-lien { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--mk-texte); font-weight: 600; font-size: 14.5px; }
.espace-nav-lien:hover { background: var(--mk-surface-basse); color: var(--mk-vert-marque); text-decoration: none; }
.espace-nav-lien[aria-current="page"] { background: var(--mk-surface-moyenne); color: var(--mk-vert-marque); }
.espace-pastille { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--mk-vert-marque); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.espace-admin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--mk-bordure); font-size: 13px; }
.espace-admin-titre { font-weight: 700; color: var(--mk-encre); width: 100%; }
.espace-admin-vue, .espace-admin-lien { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--mk-bordure); color: var(--mk-texte); }
.espace-admin-vue.on { border-color: var(--mk-vert-marque); color: var(--mk-vert-marque); font-weight: 700; }
.espace-contenu { min-width: 0; }

/* En-tête de page d'espace : titre, sous-titre, action principale à droite */
.espace-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.espace-tete h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--mk-encre); }
.espace-tete p { margin: 6px 0 0; color: var(--mk-texte-secondaire); font-size: 15px; }
.fil-ariane { font-size: 13px; color: var(--mk-texte-secondaire); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.fil-ariane a { color: var(--mk-texte-secondaire); }
.fil-ariane a:hover { color: var(--mk-vert-marque); }

/* Bloc « À faire » : ce qui attend une action, en tête de tableau de bord */
.a-faire { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-left: 4px solid var(--mk-vert-cta); border-radius: var(--mk-rayon-carte); padding: 16px 18px; margin-bottom: 22px; }
.a-faire h2 { font-size: 16px; font-weight: 800; margin: 0 0 10px; color: var(--mk-encre); }
.a-faire-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--mk-bordure); flex-wrap: wrap; }
.a-faire-ligne:first-of-type { border-top: 0; }
.a-faire-vide { color: var(--mk-texte-secondaire); font-size: 14.5px; margin: 0; }
.echeance { color: var(--mk-ambre-texte); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Montant, comme dans l'application : le chiffre qui compte se lit en premier */
.montant-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mk-texte-secondaire); }
.montant { font-size: 30px; font-weight: 700; color: var(--mk-encre); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Grille de cartes et état vide qui propose l'action suivante */
.cartes { display: grid; gap: 14px; }
.cartes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etat-vide { text-align: center; background: var(--mk-surface); border: 1px dashed var(--mk-contour-clair); border-radius: var(--mk-rayon-carte); padding: 36px 20px; }
.etat-vide h2 { font-size: 18px; font-weight: 800; margin: 0 0 6px; color: var(--mk-encre); }
.etat-vide p { color: var(--mk-texte-secondaire); margin: 0 auto 16px; max-width: 520px; }

/* Onglets de page (ex. Mes offres : En attente / Acceptées / …) */
.onglets { display: flex; gap: 6px; border-bottom: 1px solid var(--mk-bordure); margin: 0 0 18px; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglet { border: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--mk-texte-secondaire); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.onglet[aria-selected="true"] { color: var(--mk-vert-marque); border-bottom-color: var(--mk-vert-marque); }

/* Les pastilles portent un texte pour lecteurs d'écran (.mk-sr, position absolue) :
   sans ancêtre positionné proche, il se plaçait par rapport à la navigation
   collante et élargissait la page sur téléphone. */
.nav-pastille, .espace-pastille { position: relative; }
@media (max-width: 900px) {
  /* minmax(0, 1fr) et non 1fr : une piste 1fr prend pour minimum la largeur
     des onglets défilants (plus de 1 000 px pour l'espace pro), et TOUTE page
     d'espace défilait horizontalement à 375 px (mesuré par les relecteurs). */
  .espace { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 12px; }
  .espace-nav-liste { position: relative; }
  /* Mobile : même liste en onglets défilants collés sous l'en-tête */
  .espace-nav { position: sticky; top: var(--mk-barre-hauteur); z-index: 40; border-radius: 0; border-left: 0; border-right: 0; margin: 0 calc(-1 * var(--mk-desktop-marge)); padding: 6px var(--mk-desktop-marge); }
  .espace-nav-titre, .espace-admin-titre { display: none; }
  .espace-admin { border-bottom: 0; margin: 0; padding: 4px 0; flex-wrap: nowrap; overflow-x: auto; }
  .espace-nav-liste { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .espace-nav-liste::-webkit-scrollbar { display: none; }
  .espace-nav-lien { white-space: nowrap; padding: 8px 12px; }
  .cartes-2, .cartes-3 { grid-template-columns: 1fr; }
}

/* ── Sections de page d'espace ─────────────────────────────────── */
.section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 28px 0 12px; }
.section-tete .section-titre { margin: 0; }
.section-titre { font-family: var(--mk-police); font-size: 18px; font-weight: 800; color: var(--mk-encre); margin: 28px 0 12px; }
.section-lien { font-size: 14px; font-weight: 600; }
.liste { display: grid; gap: 12px; }
.a-faire-texte { min-width: 0; flex: 1 1 260px; }
.a-faire-titre { font-weight: 700; color: var(--mk-encre); font-size: 15px; }
.a-faire-detail { font-size: 13.5px; color: var(--mk-texte-secondaire); margin-top: 2px; }
.a-faire-detail.echeance { color: var(--mk-ambre-texte); font-weight: 600; }

/* ── Carte « vente » : une annonce et son avancement ───────────── */
.vente { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 14px; }
.vente-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)); align-self: start; }
.vente-photo img { width: 100%; height: 100%; object-fit: cover; }
.vente-corps { min-width: 0; }
.vente-titre { font-size: 16px; font-weight: 800; margin: 0; }
.vente-titre a { color: var(--mk-encre); }
.vente-meta { color: var(--mk-texte-secondaire); font-size: 13.5px; margin-top: 2px; }
.vente-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 14px; color: var(--mk-texte); margin-top: 10px; }
.vente-montant { font-variant-numeric: tabular-nums; color: var(--mk-encre); }
.vente-pied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

/* ── Frise d'avancement (vente, affaire) ───────────────────────── */
.frise { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; }
.frise li { position: relative; padding-top: 11px; font-size: 12.5px; line-height: 1.3; color: var(--mk-texte-secondaire); }
.frise li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--mk-surface-haute); }
.frise li.fait::before { background: var(--mk-vert-marque); }
.frise li.courant { color: var(--mk-encre); font-weight: 700; }
.frise li.courant::before { background: var(--mk-vert-cta); }
@media (max-width: 560px) {
  .vente { grid-template-columns: 1fr; }
  .vente-photo { max-width: 100%; }
  /* Sur téléphone, la barre garde ses cinq segments ; seul l'intitulé courant reste écrit. */
  .frise li:not(.courant) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .frise li.courant span { white-space: nowrap; }
}

/* ── Récapitulatif avant un geste qui engage (accepter, signer) ── */
.recap-montant { background: var(--mk-surface-basse); border: 1px solid var(--mk-surface-moyenne); border-radius: var(--mk-rayon-carte); padding: 12px 16px; margin: 0 0 12px; }
.recap-liste { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--mk-texte); }
/* 30/09 : détail de la réservation pour le pro (commission ManiaKar + prime au vendeur), comme l'app. */
.recap-detail { margin: -4px 0 12px; font-size: 14px; color: var(--mk-texte-secondaire); line-height: 1.5; }
.espace-pastille-texte { background: var(--mk-ambre-fond); color: var(--mk-ambre-texte); border: 1px solid var(--mk-ambre-bordure); }

/* ── Rendez-vous de reprise (mk-rdv.js, 17/09) ─────────────────────
   Bloc glissé dans l'action d'une affaire (espace pro) ou dans la décision
   d'une offre (espace vendeur), et formulaire du pro dans la fenêtre mkUI.
   Jetons uniquement ; utilisable à 375 px. */
.rdv-bloc { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 14px 16px; margin: 14px 0; min-width: 0; }
.rdv-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 10px; }
.rdv-bloc .rdv-tete h3 { font-family: var(--mk-police); font-size: 15px; font-weight: 800; color: var(--mk-encre); margin: 0; }
.rdv-faits { margin: 0 0 10px; display: grid; gap: 6px; }
.rdv-faits > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; }
.rdv-faits dt { color: var(--mk-texte-secondaire); }
.rdv-faits dd { margin: 0; color: var(--mk-encre); font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.rdv-texte, .rdv-message { font-size: 14px; color: var(--mk-texte); line-height: 1.5; margin: 0 0 10px; }
.rdv-message { color: var(--mk-texte-secondaire); overflow-wrap: anywhere; white-space: pre-line; }
.rdv-agenda { font-size: 14px; line-height: 1.7; margin: 0 0 10px; color: var(--mk-texte); }
.rdv-agenda a { font-weight: 600; white-space: nowrap; }
.rdv-sep { color: var(--mk-texte-secondaire); }
.rdv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.rdv-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.rdv-aide { font-size: 13px; color: var(--mk-texte-secondaire); line-height: 1.5; margin: 6px 0 12px; }
.field .rdv-aide { margin: 5px 0 0; }
@media (max-width: 560px) {
  .rdv-bloc { padding: 12px 14px; }
  .rdv-faits > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rdv-actions .btn { width: 100%; }
  .rdv-champs { grid-template-columns: minmax(0, 1fr); }
}
/* Itinéraire du vendeur (30/09, mk-rdv.js) : sous le lieu du rendez-vous, ou
   avec l'adresse du garage quand aucun rendez-vous n'est en cours. */
.rdv-itineraire-ligne { margin: 0 0 12px; }
.rdv-garage { margin: 4px 0 0; }
.rdv-garage[hidden] { display: none; }

/* ── Adresse du garage manquante (mk-espace.js, 30/09) ─────────────
   Rappel en tête des pages de l'espace pro. Ambre : à faire, pas bloquant. */
.espace-rappel { background: var(--mk-ambre-fond); border: 1px solid var(--mk-ambre-bordure); border-left: 4px solid var(--mk-ambre-texte); border-radius: var(--mk-rayon-carte); padding: 14px 18px; margin: 0 0 18px; }
.espace-rappel .espace-rappel-titre { font-family: var(--mk-police); font-size: 16px; font-weight: 800; color: var(--mk-encre); margin: 0 0 6px; }
.espace-rappel p { font-size: 14px; line-height: 1.5; color: var(--mk-texte); margin: 0 0 8px; max-width: 70ch; }
.espace-rappel .btn { margin-top: 4px; }
@media (max-width: 560px) { .espace-rappel .btn { width: 100%; } }

/* ── Mise en garde : paiement du prix (01/10, mkReprise.gardePaiement) ──
   Vendeur seulement : page de l'offre réservée, fenêtre de signature,
   « Documents et factures ». Ambre : prudence, pas une erreur. */
.garde-paiement { background: var(--mk-ambre-fond); border: 1px solid var(--mk-ambre-bordure); border-left: 4px solid var(--mk-ambre-texte); border-radius: var(--mk-rayon-carte); padding: 14px 18px; margin: 14px 0 0; color: var(--mk-texte); font-size: 14px; line-height: 1.55; text-align: left; }
.garde-paiement-titre, .garde-paiement-replie > summary { font-family: var(--mk-police); font-size: 15px; font-weight: 800; color: var(--mk-encre); margin: 0; }
.garde-paiement-replie > summary { cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
.garde-paiement-replie > summary::-webkit-details-marker { display: none; }
.garde-paiement-replie > summary::after { content: ''; position: absolute; right: 6px; top: 5px; width: 8px; height: 8px; border-right: 2px solid var(--mk-ambre-texte); border-bottom: 2px solid var(--mk-ambre-texte); transform: rotate(45deg); transition: transform .15s ease; }
.garde-paiement-replie[open] > summary::after { top: 9px; transform: rotate(-135deg); }
.garde-paiement-replie > summary:focus-visible { outline-offset: 3px; }
.garde-paiement-intro { margin: 8px 0 6px; max-width: 75ch; }
.garde-paiement-points { margin: 0; padding-left: 20px; max-width: 75ch; }
.garde-paiement-points li { margin: 0 0 6px; }
.garde-paiement-points li:last-child { margin-bottom: 0; }
.garde-paiement-points strong { color: var(--mk-encre); }
.garde-paiement-rappel { font-weight: 700; color: var(--mk-encre); margin: 12px 0 0; }
.mk-dlg .garde-paiement { margin: 10px 0 12px; }
@media (max-width: 560px) { .garde-paiement { padding: 12px 14px; } }