Guide Marché Public
<!-- Tout ce qui suit (du jusqu'au final) peut être -->
/* ============ HEADER NAV : retour + logo ============ */
.mpn-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 24px 0 24px;
position: relative;
z-index: 2;
background: transparent;
isolation: auto;
}
.mpn-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .82rem;
font-weight: 500;
color: #4a5568 !important;
text-decoration: none !important;
background: rgba(255,255,255,.75);
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 5px 13px 5px 10px;
transition: background .18s, color .18s;
backdrop-filter: blur(4px);
}
.mpn-back-link:hover {
background: #fff !important;
color: #1a202c !important;
}
.mpn-back-link svg { flex-shrink: 0; }
.mpn-logo-ch {
height: 128px;
width: auto;
}
/* ============ TOPBAR RESPONSIVE ============ */
@media (max-width: 600px) {
.mpn-topbar {
padding: 8px 12px 0 12px;
gap: 8px;
flex-wrap: wrap;
}
.mpn-back-link {
font-size: .75rem;
padding: 4px 10px 4px 8px;
white-space: nowrap;
}
.mpn-logo-ch {
height: 56px;
}
}
@media (max-width: 380px) {
.mpn-back-link span { display: none; }
.mpn-logo-ch { height: 44px; }
}
/* ============ RESET SCOPÉ .mpn-app ============ */
.mpn-app {
--mpn-bg: #fafafa;
--mpn-surface: #ffffff;
--mpn-ink: #111418;
--mpn-muted: #6b7280;
--mpn-line: #e5e7eb;
--mpn-accent: #2563eb;
--mpn-accent-soft: #eff6ff;
--mpn-accent-ink: #1e40af;
--mpn-success: #059669;
--mpn-shadow-sm: 0 1px 2px rgba(17,20,24,.04), 0 1px 3px rgba(17,20,24,.06);
--mpn-shadow-md: 0 8px 24px rgba(17,20,24,.08);
--mpn-shadow-lg: 0 24px 60px rgba(17,20,24,.14);
--mpn-timing: cubic-bezier(.22,.61,.36,1);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
color: var(--mpn-ink) !important;
background: var(--mpn-bg) !important;
line-height: 1.55 !important;
-webkit-font-smoothing: antialiased;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
.mpn-app *, .mpn-app *::before, .mpn-app *::after { box-sizing: border-box; }
.mpn-app h1, .mpn-app h2, .mpn-app h3, .mpn-app h4, .mpn-app h5,
.mpn-app p, .mpn-app span, .mpn-app a, .mpn-app li, .mpn-app button {
font-family: inherit !important;
color: inherit;
background: transparent;
}
.mpn-app h1, .mpn-app h2, .mpn-app h3, .mpn-app h4, .mpn-app h5 {
margin: 0 !important;
padding: 0 !important;
text-transform: none !important;
letter-spacing: normal;
line-height: 1.2;
font-weight: 700;
text-shadow: none;
}
.mpn-app p, .mpn-app ul, .mpn-app li {
margin: 0;
padding: 0;
list-style: none !important;
}
.mpn-app a {
text-decoration: none !important;
color: inherit;
box-shadow: none !important;
}
.mpn-app button {
all: unset;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
font: inherit;
color: inherit;
}
/* ============ LAYOUT ============ */
.mpn-page {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 1;
}
/* ============ HERO ============ */
.mpn-hero {
max-width: 1180px;
margin: 0 auto;
padding: 48px 24px 40px;
text-align: center;
width: 100%;
}
.mpn-hero h1 {
font-size: clamp(26px, 3.6vw, 42px) !important;
line-height: 1.15 !important;
letter-spacing: -.02em !important;
font-weight: 800 !important;
color: var(--mpn-ink) !important;
}
/* ============ FRISE SUR 2 ÉTAGES ============ */
.mpn-timeline-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 8px 24px 48px;
position: relative;
width: 100%;
}
.mpn-frise {
position: relative;
display: flex;
flex-direction: column;
gap: 36px;
padding: 24px 10px 20px;
}
.mpn-frise-row {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
z-index: 1;
}
.mpn-frise-row::before {
content: "";
position: absolute;
top: 22px;
left: 8%;
right: 8%;
height: 3px;
background: linear-gradient(90deg, #e5e7eb 0%, var(--mpn-accent) 50%, #e5e7eb 100%);
border-radius: 3px;
z-index: 0;
}
.mpn-step {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
transition: transform .3s var(--mpn-timing);
position: relative;
z-index: 1;
}
.mpn-step:hover { transform: translateY(-4px); }
.mpn-step:focus-visible .mpn-num {
box-shadow: 0 0 0 4px rgba(37,99,235,.25);
outline: none;
}
.mpn-num {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--mpn-surface) !important;
border: 3px solid var(--mpn-accent);
color: var(--mpn-accent-ink) !important;
font-size: 16px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 3px 10px rgba(37,99,235,.18);
transition: background .25s var(--mpn-timing), color .25s var(--mpn-timing), transform .25s var(--mpn-timing);
position: relative;
margin-bottom: 12px;
}
.mpn-step:hover .mpn-num {
background: var(--mpn-accent) !important;
color: #fff !important;
transform: scale(1.08);
}
.mpn-num::after {
content: "";
position: absolute;
bottom: -10px; left: 50%;
transform: translateX(-50%);
width: 2px; height: 8px;
background: var(--mpn-line);
}
.mpn-step-card {
background: var(--mpn-surface) !important;
border: 1px solid var(--mpn-line) !important;
border-radius: 12px;
padding: 12px 14px;
box-shadow: var(--mpn-shadow-sm);
transition: box-shadow .25s var(--mpn-timing), border-color .25s var(--mpn-timing);
width: 100%;
min-height: 80px;
}
.mpn-step:hover .mpn-step-card {
box-shadow: var(--mpn-shadow-md);
border-color: #d2dcff !important;
}
.mpn-step-card h3 {
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
line-height: 1.25 !important;
color: var(--mpn-ink) !important;
margin: 0 0 4px !important;
}
.mpn-step-card p {
font-size: 12px !important;
color: var(--mpn-muted) !important;
line-height: 1.4 !important;
margin: 0 !important;
}
@media (max-width: 820px) {
.mpn-frise-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mpn-frise-row::before { left: 6%; right: 6%; }
.mpn-step-card { padding: 10px; }
.mpn-step-card h3 { font-size: 13px !important; }
.mpn-step-card p { font-size: 11.5px !important; }
}
/* ============ MOBILE : 3 LIGNES DE 2 ÉTAPES ============ */
@media (max-width: 620px) {
.mpn-timeline-wrap { padding: 8px 16px 32px; }
.mpn-hero { padding: 32px 16px 24px; }
.mpn-frise {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 26px 14px;
padding: 18px 4px 12px;
}
.mpn-frise-row {
display: contents;
}
.mpn-frise-row::before { display: none; }
.mpn-step-card {
padding: 12px 14px;
min-height: 0;
}
.mpn-step-card h3 { font-size: 14px !important; }
.mpn-step-card p { font-size: 12.5px !important; line-height: 1.45 !important; }
.mpn-num {
width: 40px; height: 40px;
font-size: 15px;
margin-bottom: 10px;
}
}
/* ============ TOOLTIPS ============ */
.mpn-tip {
position: fixed;
max-width: 300px;
background: #111418;
color: #fff !important;
font-family: inherit !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
padding: 10px 12px;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,.22);
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity .15s var(--mpn-timing), transform .15s var(--mpn-timing);
z-index: 10000;
}
.mpn-tip.mpn-show { opacity: 1; transform: translateY(0); }
.mpn-doc-name {
font-weight: 700 !important;
cursor: help;
border-bottom: 1px dotted var(--mpn-accent);
}
.mpn-mandatory {
display: inline-block;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--mpn-accent-ink) !important;
background: var(--mpn-accent-soft) !important;
padding: 2px 6px !important;
border-radius: 999px;
margin-left: 6px;
vertical-align: 1px;
}
.mpn-body a.mpn-link {
color: var(--mpn-accent) !important;
font-weight: 500 !important;
text-decoration: none !important;
}
.mpn-body a.mpn-link:hover { text-decoration: underline !important; }
/* ============ FOOTER ============ */
.mpn-footer {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%) !important;
color: #e0e7ff !important;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.mpn-footer-inner {
max-width: 1180px;
margin: 0 auto;
padding: 26px 24px 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.mpn-footer-label {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.65) !important;
margin: 0 !important;
}
.mpn-footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.mpn-footer-btn {
display: inline-block !important;
padding: 8px 16px !important;
background: rgba(255,255,255,.12) !important;
border: 1px solid rgba(255,255,255,.25) !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: background .2s var(--mpn-timing), border-color .2s var(--mpn-timing), transform .2s var(--mpn-timing);
white-space: nowrap;
cursor: help;
}
.mpn-footer-btn:hover {
background: rgba(255,255,255,.22) !important;
border-color: rgba(255,255,255,.5) !important;
color: #fff !important;
transform: translateY(-1px);
}
@media (max-width: 620px) {
.mpn-footer-inner { padding: 20px 16px 24px; gap: 12px; }
.mpn-footer-btn { font-size: 12px !important; padding: 7px 12px !important; }
}
/* ============ MODALE ============ */
.mpn-modal-backdrop {
position: fixed; inset: 0;
background: rgba(17,20,24,.45);
backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity .25s var(--mpn-timing);
z-index: 9990;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
.mpn-modal-backdrop.mpn-open { opacity: 1; pointer-events: auto; }
.mpn-modal {
position: relative;
background: var(--mpn-surface) !important;
border-radius: 20px;
max-width: 760px; width: 100%;
max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: var(--mpn-shadow-lg);
transform: translateY(12px) scale(.98);
opacity: 0;
transition: opacity .3s var(--mpn-timing), transform .3s var(--mpn-timing);
overflow: hidden;
}
.mpn-modal-backdrop.mpn-open .mpn-modal {
transform: translateY(0) scale(1);
opacity: 1;
}
.mpn-modal-header {
padding: 24px 28px 18px;
border-bottom: 1px solid var(--mpn-line);
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
flex-shrink: 0;
}
.mpn-tag {
display: inline-block;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--mpn-accent-ink) !important;
background: var(--mpn-accent-soft) !important;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.mpn-modal-header h2 {
font-size: clamp(18px, 4vw, 26px) !important;
font-weight: 700 !important;
letter-spacing: -.02em !important;
color: var(--mpn-ink) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.mpn-close-btn {
background: #f3f4f6 !important;
border: none !important;
border-radius: 50% !important;
width: 36px !important; height: 36px !important;
cursor: pointer;
font-size: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--mpn-muted) !important;
transition: background .2s var(--mpn-timing), color .2s var(--mpn-timing);
flex-shrink: 0;
padding: 0 !important;
line-height: 1;
}
.mpn-close-btn:hover { background: #e5e7eb !important; color: var(--mpn-ink) !important; }
.mpn-body {
padding: 20px 28px 28px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
color: var(--mpn-ink) !important;
}
.mpn-body h4 {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
color: var(--mpn-muted) !important;
margin: 0 0 12px !important;
}
.mpn-body h4:not(:first-child) { margin-top: 24px !important; }
.mpn-body ul { margin: 0; padding: 0; }
.mpn-body li {
padding: 10px 0 10px 28px;
position: relative;
border-bottom: 1px solid var(--mpn-line);
font-size: 15px !important;
line-height: 1.55 !important;
color: var(--mpn-ink) !important;
}
.mpn-body li:last-child { border-bottom: none; }
.mpn-body li::before {
content: "";
position: absolute;
left: 4px; top: 18px;
width: 14px; height: 2px;
background: var(--mpn-accent);
border-radius: 2px;
}
.mpn-body li b, .mpn-body li strong { font-weight: 600 !important; color: inherit !important; }
.mpn-body li i, .mpn-body li em { font-style: italic !important; color: inherit !important; }
.mpn-advice {
background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%) !important;
border: 1px solid #bbf7d0;
border-radius: 12px;
padding: 16px 20px;
margin-top: 18px;
}
.mpn-advice h4 { color: var(--mpn-success) !important; margin: 0 0 10px !important; }
.mpn-advice li { border-bottom-color: rgba(5,150,105,.15) !important; }
.mpn-advice li::before { background: var(--mpn-success) !important; }
.mpn-scroll-hint {
position: absolute;
bottom: 12px; left: 50%;
transform: translateX(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: var(--mpn-accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(37,99,235,.4);
opacity: 0;
transition: opacity .25s var(--mpn-timing);
pointer-events: none;
animation: mpn-bounce 1.6s infinite ease-in-out;
}
.mpn-scroll-hint.mpn-show { opacity: 1; }
@keyframes mpn-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 620px) {
.mpn-modal-backdrop { padding: 0; align-items: flex-end; }
.mpn-modal { border-radius: 20px 20px 0 0; max-height: 92vh; }
.mpn-modal-header { padding: 20px 16px 14px; }
.mpn-body { padding: 16px 16px 24px; }
.mpn-body li { font-size: 14px !important; }
}
Répondre à un marché public,
étape par étape.
(function () {
var root = document.querySelector('.mpn-app');
if (!root) return;
var L = function (url, label) {
return '
' + (label || url) + '';
};
var STEPS = [
{
id: 1,
title: "Trouver une consultation",
short: "Identifier le marché qui correspond à votre activité.",
sections: [{
heading: "Marche à suivre",
items: [
'Aller sur ' + L("https://url.de.m.mimecastprotect.com/s/e0lNCywZRyc0z5XSZfPTxgWr0?domain=achatpublic.com", "achatpublic.com"),
'Cliquer sur
« Répondez aux consultations » (en bas à droite, sous « Vous êtes une entreprise »)',
'Rechercher un marché correspondant à votre activité'
]
}],
advice: [
"Effectuez les recherches avec des
mots-clés pertinents — si vous avez du mal à trouver un marché correspondant à votre activité, pensez à utiliser les filtres pour affiner les résultats.",
"Si vous rencontrez des
bugs d'affichage, essayez de changer de navigateur.",
"En cas de difficulté, n'hésitez pas à contacter le " + L("https://url.de.m.mimecastprotect.com/s/ibisCGRLGri0p5YS1CjTBUHJo?domain=achatpublic.com", "service client d'achatpublic.com") + " qui peut vous guider dans vos recherches."
]
},
{
id: 2,
title: "Création de compte & téléchargement du DCE",
short: "Créer votre espace et récupérer le dossier de consultation.",
sections: [{
heading: "Marche à suivre",
items: [
'Aller dans
« Pièces de marché »',
'Cliquer sur
« Télécharger »',
'Se connecter ou créer un compte sur ' + L("https://www.achatpublic.com/sdm/ent2/aide/documentation.action?selectedMenu=aide&tp=1778152852989", "achatpublic.com"),
'Télécharger les documents, puis les décompresser et lire l\'ensemble des pièces'
]
}],
advice: [
"Utilisez une
adresse mail que vous consultez régulièrement et à laquelle vous avez accès : tous les
échanges y seront envoyés.",
"Identifiez-vous lors du téléchargement pour recevoir les mises à jour et informations complémentaires.",
"Téléchargez bien le fichier zip
en entier.",
"En cas de difficulté, n'hésitez pas à consulter le " + L("https://www.achatpublic.com/sdm/ent2/aide/documentation.action", "Guide rapide de réponse à une consultation") + " mis à votre disposition."
]
},
{
id: 3,
title: "Préparer son offre",
short: "Lire les documents clés et rassembler les pièces à fournir.",
sections: [{
heading: "Pièces à fournir",
items: [
'La liste complète des documents à fournir se trouve dans le
RC (Règlement de la Consultation), aux chapitres
« Documents relatifs à la candidature » et
« Documents relatifs à l\'offre ».'
]
}],
advice: [
"
Anticipez la collecte des documents — certains peuvent prendre du temps à être obtenus. Vérifiez leur
date de validité avant d'envoyer le dossier.",
"En cas de doute sur les pièces comptables ou financières à fournir, n'hésitez pas à vous rapprocher de votre
comptable.",
"Vous avez une question sur la consultation ou besoin de précision concernant le dossier ?
Posez-la sur la plateforme " + L("https://url.de.m.mimecastprotect.com/s/e0lNCywZRyc0z5XSZfPTxgWr0?domain=achatpublic.com", "achatpublic.com") + " — Rendez-vous sur la consultation concernée et cliquez sur
Questions / Réponses (les questions sont anonymes et il est obligatoire de passer par la plateforme pour tout échange avec l'acheteur).",
"Les pièces devant être
signées sont précisées dans le RC."
]
},
{
id: 4,
title: "Déposer le dossier",
short: "Téléverser les pièces et valider le dépôt.",
sections: [{
heading: "Marche à suivre",
items: [
'Retourner sur la page du marché et cliquer sur
« Répondre »',
'Choisir
dépôt simplifié (vous pouvez également choisir le dépôt classique, mais celui-ci nécessite Java) — puis confirmer',
'Sélectionner le(s) lot(s) et cliquer sur
« Continuer »',
'Ajouter tous les fichiers requis dans chaque lot',
'Vérifier que tout est complet, puis cliquer sur
« Déposer »',
'Télécharger le
récapitulatif et vérifier la présence de tous les documents ou d\'éventuelles erreurs'
]
}],
advice: [
"Nous vous invitons à
nommer vos fichiers de façon courte et claire, à bien vérifier que tous les documents ont été déposés, et si possible à séparer le dossier en deux sous-dossiers : un pour la
candidature et un pour l'
offre.",
"Vous pouvez
déposer plusieurs fois le même dossier — c'est le
dernier dépôt qui est pris en compte. En cas d'erreur après dépôt, l'intégralité du dossier doit être redéposée.",
"Déposez votre dossier
en avance (pour avoir le temps de le corriger si nécessaire — tout dossier déposé même une seconde après la date limite sera automatiquement rejeté).",
"En cas de difficulté lors du dépôt, consultez le " + L("https://url.de.m.mimecastprotect.com/s/pmnDCJ8OLxC1mErsyFyTyfFZj?domain=achatpublic.com", "Guide rapide de réponse à une consultation") + "
(ainsi que les tutoriels vidéo disponibles en bas de page) ou contactez le " + L("https://url.de.m.mimecastprotect.com/s/ibisCGRLGri0p5YS1CjTBUHJo?domain=achatpublic.com", "service client") + "."
]
},
{
id: 5,
title: "Analyse des offres",
short: "Phase gérée par l'acheteur — restez joignable.",
sections: [{
heading: "Ce qu'il faut savoir",
items: [
"Cette phase est gérée entièrement par l'acheteur.",
"
Restez disponible : l'acheteur peut vous contacter en temps utile
(pour des précisions, des corrections ou des négociations).",
"Surveillez régulièrement votre messagerie (e-mail et plateforme)."
]
}],
advice: [
"Répondez rapidement à toute sollicitation — les délais accordés sont courts et une non-réponse peut entraîner le rejet du dossier.",
"Cette phase peut prendre du temps — soyez patient et continuez vos activités en attendant le résultat."
]
},
{
id: 6,
title: "Publication des résultats",
short: "Résultat final et démarrage du marché.",
sections: [{
heading: "Issue du marché",
items: [
"
Rejet → réception d'une note de rejet motivée.",
"
Sélection → notification pour la signature finale du contrat, puis démarrage du marché."
]
}],
advice: [
"En cas de rejet, demandez un retour à l'acheteur pour améliorer vos futures candidatures."
]
}
];
/* Render sur 2 étages (desktop) — sur mobile le CSS les refond en 3×2 */
var row1 = root.querySelector('[data-mpn="timeline-row-1"]');
var row2 = root.querySelector('[data-mpn="timeline-row-2"]');
STEPS.forEach(function (s, idx) {
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'mpn-step';
btn.setAttribute('data-mpn-id', s.id);
btn.innerHTML =
'
' + s.id + '' +
'
' +
'
' + s.title + '
' +
'
' + s.short + '
' +
'
';
btn.addEventListener('click', function () { openModal(s); });
(idx < 3 ? row1 : row2).appendChild(btn);
});
/* Modale */
var modal = root.querySelector('[data-mpn="modal"]');
var modalTitle = root.querySelector('[data-mpn="title"]');
var modalTag = root.querySelector('[data-mpn="tag"]');
var modalBody = root.querySelector('[data-mpn="body"]');
var closeBtn = root.querySelector('[data-mpn="close"]');
var scrollHint = root.querySelector('[data-mpn="scroll-hint"]');
var tipEl = root.querySelector('[data-mpn="tip"]');
function openModal(step) {
modalTag.textContent = 'Étape ' + step.id;
modalTitle.textContent = step.title;
var html = '';
step.sections.forEach(function (sec) {
html += '
' + sec.heading + '
';
sec.items.forEach(function (it) { html += '- ' + it + '
'; });
html += '
';
});
if (step.advice && step.advice.length) {
html += '
Conseils
';
step.advice.forEach(function (a) { html += '- ' + a + '
'; });
html += '
';
}
modalBody.innerHTML = html;
modalBody.scrollTop = 0;
modal.classList.add('mpn-open');
document.body.style.overflow = 'hidden';
modalBody.querySelectorAll('.mpn-doc-name').forEach(function (el) {
el.addEventListener('mouseenter', showTip);
el.addEventListener('mouseleave', hideTip);
el.addEventListener('focus', showTip);
el.addEventListener('blur', hideTip);
el.tabIndex = 0;
});
requestAnimationFrame(updateScrollHint);
}
function updateScrollHint() {
var overflow = modalBody.scrollHeight - modalBody.clientHeight;
var atBottom = modalBody.scrollTop + modalBody.clientHeight >= modalBody.scrollHeight - 4;
if (overflow > 8 && !atBottom) scrollHint.classList.add('mpn-show');
else scrollHint.classList.remove('mpn-show');
}
modalBody.addEventListener('scroll', updateScrollHint);
window.addEventListener('resize', updateScrollHint);
function showTip(e) {
var text = e.currentTarget.getAttribute('data-mpn-tip');
if (!text) return;
tipEl.textContent = text;
tipEl.classList.add('mpn-show');
positionTip(e.currentTarget);
}
function hideTip() { tipEl.classList.remove('mpn-show'); }
function positionTip(el) {
var rect = el.getBoundingClientRect();
var tipRect = tipEl.getBoundingClientRect();
var left = rect.left + (rect.width / 2) - (tipRect.width / 2);
var top = rect.top - tipRect.height - 10;
if (top window.innerWidth - 8) left = window.innerWidth - tipRect.width - 8;
if (left < 8) left = 8;
tipEl.style.left = left + 'px';
tipEl.style.top = top + 'px';
}
root.querySelectorAll('.mpn-footer-btn[data-mpn-tip]').forEach(function (el) {
el.addEventListener('mouseenter', showTip);
el.addEventListener('mouseleave', hideTip);
el.addEventListener('focus', showTip);
el.addEventListener('blur', hideTip);
});
function closeModal() {
modal.classList.remove('mpn-open');
document.body.style.overflow = '';
hideTip();
}
closeBtn.addEventListener('click', closeModal);
modal.addEventListener('click', function (e) { if (e.target === modal) closeModal(); });
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeModal(); });
})();