/* ═══════════════════════════════════════════════════════════════
   ManiaKar — site web — PAGES PUBLIQUES « COMPRENDRE LE SERVICE » (refonte du 14/09)

   Couvre /comment-ca-marche, /pro, /aide et /application. Chargée APRÈS
   desktop.css et refonte.css : elle n'ajoute que ce qui leur manque, avec
   les jetons de tokens.css (aucune couleur en dur hors #fff).
     • .pub-tete, .pub-actions, .pub-points, .pub-sommaire — tête de page
     • .parcours, .etapes, .paliers — les deux parcours Vendeur / Professionnel
     • .pub-carte, .encart, .tarifs — cartes, encadrés, tableaux de prix
     • .pub-ordre — ordre d'affichage des offres (CGU art. 13)
     • .faq-* — questions fréquentes sur <details>, recherche (mk-aide.js)
     • .pub-appel, .pub-liens — bandeau d'appel, listes de liens commentés
   La même règle que partout : UN seul bouton vert par écran, le vert marque
   pour ce qui se clique, l'ambre pour ce qui attend (paiement bientôt ouvert).
═══════════════════════════════════════════════════════════════ */

/* ── Tête de page ──────────────────────────────────────────────── */
.pub-tete { padding: 52px 0 30px; }
.pub-tete h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; max-width: 24ch; }
.pub-lede { font-size: 18px; color: var(--mk-texte-secondaire); max-width: 64ch; margin: 16px 0 0; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pub-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 22px 0 0; padding: 0; font-size: 14.5px; color: var(--mk-texte-secondaire); }
.pub-points li { display: flex; gap: 8px; align-items: baseline; }
.pub-points li::before { content: '✓'; color: var(--mk-vert-marque); font-weight: 800; }
.pub-points b { color: var(--mk-encre); font-weight: 600; }
.pub-etat { display: inline-block; margin-bottom: 14px; }

/* Sommaire « Sur cette page » : ancres vers les sections */
.pub-sommaire { background: var(--mk-surface); border-bottom: 1px solid var(--mk-bordure); }
.pub-sommaire .container { text-align: center; }
.pub-sommaire ul { list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 12px auto; padding: 4px; background: var(--mk-surface-basse); border-radius: var(--mk-rayon-pilule); }
.pub-sommaire a { display: inline-block; padding: 8px 16px; border-radius: var(--mk-rayon-pilule); font-size: 14px; font-weight: 600; color: var(--mk-texte-secondaire); transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.pub-sommaire a:hover { background: var(--mk-surface); color: var(--mk-vert-marque); text-decoration: none; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
/* L'en-tête est collant : une ancre ne doit pas finir dessous. */
main [id] { scroll-margin-top: calc(var(--mk-barre-hauteur) + 16px); }

/* Sections : le rythme vient de .section / .section-alt (desktop.css) */
.pub-section-tete { max-width: 70ch; }
.pub-section-tete p { color: var(--mk-texte-secondaire); font-size: 16.5px; margin: 10px 0 0; }

/* ── Les deux parcours ─────────────────────────────────────────── */
.parcours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; align-items: start; }
.parcours-col { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: 16px; padding: 26px; min-width: 0; }
.parcours-titre { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.parcours-intro { color: var(--mk-texte-secondaire); font-size: 15px; margin: 6px 0 0; }

.etapes { list-style: none; counter-reset: etape; margin: 22px 0 0; padding: 0; }
.etapes > li { counter-increment: etape; position: relative; padding: 0 0 22px 48px; }
.etapes > li:last-child { padding-bottom: 0; }
.etapes > li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 9px; background: var(--mk-vert-marque); color: #fff; font-family: var(--mk-police); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.etapes > li::after { content: ''; position: absolute; left: 15px; top: 38px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--mk-surface-haute); }
.etapes > li:last-child::after { display: none; }
.etapes h4 { font-family: var(--mk-police); font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--mk-encre); margin: 5px 0 4px; }
.etapes p { margin: 0; color: var(--mk-texte-secondaire); font-size: 15px; }
.etapes p + p, .etapes p + .paliers, .etapes .paliers + p { margin-top: 8px; }
.etapes a { font-weight: 600; }

/* Paliers de diffusion : 30 km → France entière */
.paliers { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 0; }
.paliers li { font-size: 13px; line-height: 1.4; color: var(--mk-encre); background: var(--mk-surface-basse); border: 1px solid var(--mk-surface-moyenne); border-radius: var(--mk-rayon-pilule); padding: 3px 10px; font-variant-numeric: tabular-nums; }

/* ── Cartes et encadrés ────────────────────────────────────────── */
.pub-cartes { margin-top: 28px; }
.pub-cartes + .pub-cartes { margin-top: 14px; }
.pub-carte { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 20px 22px; min-width: 0; }
.pub-carte h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.pub-carte p { margin: 0; color: var(--mk-texte-secondaire); font-size: 15px; }
.pub-carte p + p, .pub-carte p + address, .pub-carte address + p { margin-top: 8px; }
.pub-carte .pub-carte-pied { margin-top: 14px; }
.pub-carte address { font-style: normal; color: var(--mk-texte); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }

.encart { background: var(--mk-surface-basse); border: 1px solid var(--mk-surface-moyenne); border-radius: var(--mk-rayon-carte); padding: 14px 18px; font-size: 14.5px; color: var(--mk-encre); margin: 16px 0 0; }
.encart p { margin: 0; }
.encart p + p { margin-top: 6px; }
.pay-notice.pub-paiement { margin-top: 16px; }
.pub-lien-suite { margin: 14px 0 0; font-size: 15px; }
.pub-lien-suite a { font-weight: 600; }

/* Tableau de prix : défile horizontalement dans sa boîte, jamais la page */
.tarifs-boite { overflow-x: auto; margin-top: 16px; border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); background: var(--mk-surface); }
.tarifs { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tarifs-large { min-width: 620px; }
.tarifs caption { caption-side: bottom; text-align: left; padding: 10px 14px 12px; font-size: 13px; color: var(--mk-texte-secondaire); border-top: 1px solid var(--mk-bordure); }
.tarifs th, .tarifs td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--mk-bordure); vertical-align: top; }
.tarifs thead th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--mk-texte-secondaire); font-weight: 600; background: var(--mk-surface-basse); white-space: nowrap; }
.tarifs tbody th { font-weight: 600; color: var(--mk-encre); }
.tarifs tbody tr:last-child > * { border-bottom: 0; }
.tarifs .prix { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mk-encre); font-weight: 600; }
.tarifs small { display: block; color: var(--mk-texte-secondaire); font-size: 12.5px; font-weight: 400; }

/* ── Ordre d'affichage des offres (CGU art. 13) ─────────────────── */
.pub-ordre { list-style: none; counter-reset: rang; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; }
.pub-ordre li { counter-increment: rang; background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); padding: 16px 18px; font-size: 15px; color: var(--mk-texte); }
.pub-ordre li::before { content: counter(rang); display: block; font-family: var(--mk-police); font-weight: 800; font-size: 26px; line-height: 1; color: var(--mk-vert-marque); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.pub-ordre b { color: var(--mk-encre); }

/* Les trois chiffres du pro : on reprend .pro-cotes de la fiche annonce,
   sans aucun montant (ce ne sont que des libellés et leur sens). */
.pub-cotes { margin-top: 24px; }
.pub-cotes .pro-cote p { margin: 4px 0 0; }

/* ── Aide : recherche et questions ─────────────────────────────── */
.faq-recherche { margin: 26px 0 0; max-width: 580px; }
.faq-recherche .field { margin-bottom: 0; }
.faq-recherche input[type="search"] { font-size: 16px; }
.faq-etat { font-size: 14px; color: var(--mk-texte-secondaire); margin: 8px 0 0; min-height: 1.5em; }
.faq-etat .lien-btn { margin-left: 8px; }
.faq-groupe { margin-top: 36px; }
.faq-groupe:first-child { margin-top: 0; }
.faq-groupe h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
.faq-liste { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: var(--mk-rayon-carte); overflow: hidden; }
.faq-q + .faq-q { border-top: 1px solid var(--mk-bordure); }
.faq-q > summary { list-style: none; cursor: pointer; position: relative; padding: 15px 50px 15px 18px; font-weight: 600; font-size: 15.5px; color: var(--mk-encre); }
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--mk-texte-secondaire); border-bottom: 2px solid var(--mk-texte-secondaire); transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.faq-q[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-q > summary:hover { color: var(--mk-vert-marque); }
.faq-q > summary:focus-visible { outline-offset: -3px; }
.faq-r { padding: 0 18px 16px; color: var(--mk-texte); font-size: 15px; line-height: 1.6; }
.faq-r p { margin: 0 0 8px; }
.faq-r p:last-child, .faq-r ul:last-child { margin-bottom: 0; }
.faq-r ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.faq-r a { font-weight: 600; }

/* ── Bandeau d'appel ───────────────────────────────────────────── */
.pub-appel { background: var(--mk-surface); border: 1px solid var(--mk-bordure); border-radius: 18px; padding: 28px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.section .pub-appel h2 { font-size: clamp(22px, 2.6vw, 28px); }
.pub-appel > div:first-child { flex: 1 1 380px; min-width: 0; }
.pub-appel p { margin: 6px 0 0; color: var(--mk-texte-secondaire); max-width: 62ch; }
.pub-appel .pub-actions { margin-top: 0; }

/* Listes de liens commentés (ce que l'on peut déjà faire sur le site) */
.pub-liens { list-style: none; padding: 0; margin: 8px 0 0; display: grid; }
.pub-liens li { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--mk-bordure); }
.pub-liens li:first-child { border-top: 0; }
.pub-liens a { font-weight: 600; }
.pub-liens span { font-size: 14px; color: var(--mk-texte-secondaire); }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .parcours { grid-template-columns: 1fr; }
  .pub-ordre { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pub-tete { padding: 32px 0 20px; }
  .pub-lede { font-size: 16.5px; }
  .pub-actions .btn { flex: 1 1 100%; }
  .parcours-col { padding: 20px 16px; }
  .etapes > li { padding-left: 44px; }
  .pub-appel { padding: 22px 18px; }
  .pub-appel > div:first-child { flex-basis: 100%; }
  .faq-q > summary { padding-left: 14px; }
  .faq-r { padding: 0 14px 14px; }
}