/* =====================================================================
   PAGE ANNONCEURS — habillage maquette 29/08/2026 (fichier autonome).
   La page n'inclut PLUS marketplace-v2.css : tout ce dont elle a besoin
   est ici. Les classes de FORMULAIRE (.mk-adv__field, .mk-adv__err,
   .has-error, .is-sending) et les crochets JS (.mk-adv racine,
   [data-reveal]/.is-in, [data-count]) sont conservés — vitrine.js et
   vitrine-form.js en dépendent.
   Palette maquette : sarcelle #0B7285 / #119FBF, encre #10333B,
   ardoise #3E5C64, sourdine #5B767D, pâle #8AA0A6, lignes #E3EDEF,
   fonds #FAFBFB / #F2FAFC, ambre #B0731F/#D99A3D (30 jours).
   Typo : Bricolage Grotesque (titres/nombres) + Instrument Sans (texte).
   ===================================================================== */

.mk-adv {
    --adv-teal: #0B7285;
    --adv-teal-h: #119FBF;
    --adv-ink: #10333B;
    --adv-slate: #3E5C64;
    --adv-mute: #5B767D;
    --adv-faint: #8AA0A6;
    --adv-line: #E3EDEF;
    --adv-line2: #EDF3F4;
    --adv-bg: #FAFBFB;
    --adv-teal-bg: #F2FAFC;
    --adv-teal-soft: #E7F5F9;
    --adv-teal-line: #B9DEE8;
    --adv-input-line: #CBDCE0;
    font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    color: var(--adv-ink);
    background: var(--adv-bg);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.5;
    overflow-x: clip;
}
.mk-adv h1, .mk-adv h2, .mk-adv h3,
.mk-adv .adv2-num { font-family: 'Bricolage Grotesque', 'Instrument Sans', sans-serif; }
/* :not(.mk-btn) : sans lui, cette règle (0-1-1) écrase le blanc des boutons
   primaires (0-1-0) — bouton sarcelle au texte sarcelle, donc « vide ». */
.mk-adv a:not(.mk-btn) { color: var(--adv-teal); text-decoration: none; }
.mk-adv a:not(.mk-btn):hover { color: var(--adv-teal-h); }
.mk-adv a.mk-btn { text-decoration: none; }
.mk-adv img { max-width: 100%; }

/* ── Révélation au défilement (mécanique vitrine.js conservée) ─────── */
.mk-adv [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .js-adv .mk-adv [data-reveal] { opacity: 0; transform: translateY(14px);
        transition: opacity .55s ease, transform .55s ease; }
    .js-adv .mk-adv [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ── Bandes pleine largeur + gabarit intérieur ─────────────────────── */
.adv2-band { padding: 88px 24px; }
.adv2-band--white { background: #FFFFFF; }
.adv2-band--grey { background: var(--adv-bg); }
.adv2-band--teal { background: var(--adv-teal-bg); }
.adv2-band--btop { border-top: 1px solid var(--adv-line2); }
.adv2-in { max-width: 1160px; margin: 0 auto; }
.adv2-in--narrow { max-width: 900px; }
.adv2-in--form { max-width: 760px; }

.mk-adv h2 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700;
    letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.adv2-lead { font-size: 17px; color: var(--adv-mute); margin: 14px 0 0;
    max-width: 640px; line-height: 1.6; text-wrap: pretty; }

/* ── Boutons ───────────────────────────────────────────────────────── */
.mk-btn { display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; font-weight: 600; font-size: 15px; padding: 12px 24px;
    border-radius: 9px; border: 1px solid transparent; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s; }
.mk-btn--primary { background: var(--adv-teal); color: #FFFFFF;
    box-shadow: 0 10px 22px -10px rgba(11,114,133,.55); }
.mk-btn--primary:hover, .mk-btn--primary:focus { background: var(--adv-teal-h); color: #FFFFFF; }
.mk-btn--ghost { border-color: var(--adv-teal-line); background: #FFFFFF; color: var(--adv-teal); }
.mk-btn--ghost:hover, .mk-btn--ghost:focus { border-color: var(--adv-teal); color: var(--adv-teal); }
.mk-btn.is-sending { opacity: .6; pointer-events: none; }
.mk-adv .mk-svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2; flex-shrink: 0; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.adv2-hero { padding: 56px 24px 64px; text-align: center;
    background-image: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.92)),
        var(--mk-adv-hero);
    background-size: cover; background-position: center 62%; }
.mk-adv__eyebrow { display: inline-block; border: 1px solid var(--adv-teal-line);
    background: #FFFFFF; color: var(--adv-teal); font-size: 12px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; padding: 6px 14px;
    border-radius: 999px; }
.mk-adv__title { font-size: clamp(34px, 4.5vw, 52px); line-height: 1.1;
    font-weight: 700; letter-spacing: -0.01em; margin: 18px auto 0;
    max-width: 22ch; color: var(--adv-ink); text-wrap: pretty; }
.mk-adv__lead { font-size: 18px; line-height: 1.6; color: var(--adv-slate);
    margin: 18px auto 0; max-width: 620px; text-wrap: pretty; }
.mk-adv__hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap;
    justify-content: center; }
.mk-adv__hero-cta .mk-btn { font-size: 16px; padding: 14px 28px; border-radius: 10px; }
.mk-adv__hero-kpis { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap;
    justify-content: center; }
.mk-adv__hero-kpi { min-width: 160px; padding: 14px 20px; text-align: start;
    border: 1px solid var(--adv-line); border-radius: 12px; background: #FFFFFF; }
.mk-adv__hero-kpi > b { display: block; font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 24px; font-weight: 700; color: var(--adv-ink);
    font-variant-numeric: tabular-nums; }
.mk-adv__hero-kpi > span { display: block; font-size: 13px; color: var(--adv-mute); margin-top: 2px; }
.mk-adv__hero-kpi-p { display: block; font-style: normal; font-size: 11px;
    color: var(--adv-faint); letter-spacing: .02em; }
.mk-adv__hero-kpi--accent { border-color: var(--adv-teal); background: var(--adv-teal-soft); }
.mk-adv__hero-kpi--accent > b { color: var(--adv-teal); }
.mk-adv__already { margin: 24px 0 0; font-size: 14px; }
/* 0-2-1 : à égalité avec `.mk-adv a:not(.mk-btn)` mais déclarée après,
   sinon le `text-decoration: none` général gagne et l'affordance disparaît. */
.mk-adv .mk-adv__already a { text-decoration: underline; }

/* ── Chiffres : deux colonnes datées ───────────────────────────────── */
.adv2-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 48px; margin-top: 40px; }
.adv2-colhead { font-size: 13px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--adv-teal);
    border-bottom: 2px solid var(--adv-teal); padding-bottom: 10px; margin: 0; }
.adv2-colhead--amber { color: #B0731F; border-bottom-color: #D99A3D; }
.adv2-statgrid { display: grid; grid-template-columns: 1fr 1fr; }
.adv2-stat { padding: 20px 0; border-bottom: 1px solid var(--adv-line2); }
.adv2-stat b { display: block; font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 28px; font-weight: 700; color: var(--adv-ink);
    font-variant-numeric: tabular-nums; }
.adv2-stat span { display: block; font-size: 14px; color: var(--adv-mute); margin-top: 2px; }
.adv2-statrow { padding: 20px 0; border-bottom: 1px solid var(--adv-line2);
    display: flex; align-items: baseline; gap: 14px; }
.adv2-statrow b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px;
    font-weight: 700; color: var(--adv-ink); min-width: 150px;
    font-variant-numeric: tabular-nums; }
.adv2-statrow span { font-size: 15px; color: var(--adv-mute); }
.mk-adv__note, .mk-adv__updated { font-size: 13px; color: var(--adv-faint);
    margin: 16px 0 0; line-height: 1.5; }
.mk-adv__updated { margin-top: 4px; }
.adv2-colcta { margin-top: 24px; }

/* ── Audience ──────────────────────────────────────────────────────── */
.mk-adv__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 56px; align-items: center; }
.mk-adv__prose { font-size: 18px; line-height: 1.7; color: var(--adv-slate);
    margin: 20px 0 0; text-wrap: pretty; }
.mk-adv__split-img { margin: 0; width: 100%; aspect-ratio: 4 / 3;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(11,60,71,.35); }
.mk-adv__split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Cartes (objectifs / ciblage) ──────────────────────────────────── */
.mk-adv__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px; margin-top: 40px; }
.mk-adv__card { border: 1px solid var(--adv-line); border-radius: 14px;
    padding: 28px; background: var(--adv-bg); }
.adv2-band--grey .mk-adv__card { background: #FFFFFF; }
.adv2-num { width: 34px; height: 34px; border-radius: 9px; background: #E0F2F6;
    color: var(--adv-teal); display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; }
.mk-adv__card-title { font-size: 19px; font-weight: 600; margin: 18px 0 0; }
.mk-adv__card > .mk-adv__card-title:first-child { margin-top: 0; }
.mk-adv__card-text { font-size: 15px; line-height: 1.65; color: var(--adv-mute); margin: 10px 0 0; }
.mk-adv__card-note { font-size: 13.5px; line-height: 1.6; color: var(--adv-faint);
    margin: 12px 0 0; font-style: italic; }
.adv2-center { display: flex; justify-content: center; margin-top: 36px; }

/* ── Formats : cartes à maquette filaire ───────────────────────────── */
.mk-adv__cards--fmt { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; margin-top: 44px; }
.mk-adv__card--fmt { background: #FFFFFF; border-color: #D6E8ED;
    display: flex; flex-direction: column; gap: 0; }
.mk-adv__mock { height: 110px; border-radius: 10px; background: var(--adv-teal-bg);
    border: 1px solid #D6E8ED; position: relative; overflow: hidden; flex-shrink: 0; }
.mk-adv__mock-lines { position: absolute; inset: 10px 10px 26px; display: flex;
    flex-direction: column; gap: 5px; }
.mk-adv__mock-lines i { height: 6px; border-radius: 3px; background: #DEEAED; }
.mk-adv__mock-lines i:first-child { background: #CBDCE0; width: 60%; }
.mk-adv__mock-lines i:nth-child(2) { width: 85%; }
.mk-adv__mock-lines i:nth-child(3) { width: 75%; }
.adv2-ad { position: absolute; background: var(--adv-teal-h); border-radius: 4px;
    display: flex; align-items: center; justify-content: center; font-size: 9px;
    font-weight: 700; letter-spacing: .08em; color: #FFFFFF; font-style: normal; }
.mk-adv__mock--sticky  .adv2-ad { left: 10px; right: 10px; bottom: 8px; height: 14px; }
.mk-adv__mock--modal   .adv2-ad { left: 22px; right: 22px; top: 14px; bottom: 14px; }
.mk-adv__mock--content .adv2-ad { left: 10px; right: 60px; top: 42px; height: 26px; }
.mk-adv__mock--listing .adv2-ad { left: 10px; right: 60px; top: 10px; height: 22px; }
.mk-adv__mock--article .adv2-ad { left: 10px; right: 10px; top: 10px; bottom: 26px; }
.adv2-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--adv-teal); margin-top: 16px; }
.mk-adv__card--fmt .mk-adv__card-title { font-size: 20px; margin-top: 8px; }
.mk-adv__card--fmt .mk-adv__card-text { font-size: 14.5px; margin-top: 8px; }

/* ── Tarifs ────────────────────────────────────────────────────────── */
.mk-adv__cards--price { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; margin-top: 44px; align-items: stretch; }
.mk-adv__price { background: #FFFFFF; border-radius: 16px; position: relative;
    display: flex; flex-direction: column; }
.mk-adv__price--featured { border-color: var(--adv-teal); background: var(--adv-teal-bg); }
.mk-adv__price-badge { position: absolute; top: -12px; inset-inline-start: 24px;
    background: var(--adv-teal); color: #FFFFFF; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px;
    border-radius: 999px; }
.mk-adv__price-kicker { font-size: 12px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--adv-teal); }
.mk-adv__price .mk-adv__card-title { font-size: 22px; font-weight: 700; margin: 12px 0 0; }
.mk-adv__price-amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px;
    font-weight: 600; color: var(--adv-ink); margin: 16px 0 0; line-height: 1.4;
    font-variant-numeric: tabular-nums; }
.mk-adv__price-amount small { font-size: 14px; font-weight: 500; color: var(--adv-mute); }
.mk-adv__price .mk-adv__card-text { margin: 14px 0 22px; flex: 1; font-size: 14.5px; }
.mk-adv__price-cta { width: 100%; border-radius: 9px; }
.mk-adv__price-cta.mk-btn--ghost { border-color: var(--adv-teal); }
.mk-adv__price-cta.mk-btn--ghost:hover { background: var(--adv-teal-h); color: #FFFFFF;
    border-color: var(--adv-teal-h); }
.mk-adv__price-note { font-size: 13px; color: var(--adv-faint); margin: 20px 0 0; }

/* ── Fonctionnement ────────────────────────────────────────────────── */
.mk-adv__steps { list-style: none; margin: 40px 0 0; padding: 0; display: flex;
    flex-direction: column; }
.mk-adv__step { display: flex; gap: 24px; padding: 24px 0;
    border-bottom: 1px solid var(--adv-line2); }
.mk-adv__step-n { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px;
    background: var(--adv-teal); color: #FFFFFF; display: flex; align-items: center;
    justify-content: center; font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700; font-size: 17px; }
.mk-adv__step-title { font-size: 19px; font-weight: 600; margin: 7px 0 0; }
.mk-adv__step-text { font-size: 15px; line-height: 1.6; color: var(--adv-mute); margin: 8px 0 0; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.mk-adv__faq { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.mk-adv__faq-item { background: #FFFFFF; border: 1px solid var(--adv-line);
    border-radius: 12px; padding: 0 24px; }
.mk-adv__faq-q { cursor: pointer; font-weight: 600; font-size: 16.5px; padding: 20px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    list-style: none; }
.mk-adv__faq-q::-webkit-details-marker { display: none; }
.mk-adv__faq-q::after { content: '+'; color: var(--adv-teal); font-size: 20px;
    flex-shrink: 0; transition: transform .2s; }
.mk-adv__faq-item[open] .mk-adv__faq-q::after { transform: rotate(45deg); }
.mk-adv__faq-a { font-size: 15px; line-height: 1.65; color: var(--adv-mute);
    margin: 0; padding: 0 0 20px; }

/* ── Bande d'appel ─────────────────────────────────────────────────── */
.mk-adv__ctaband { padding: 80px 24px; background: var(--adv-teal); text-align: center; }
.mk-adv__ctaband-t { font-size: clamp(28px, 3.2vw, 34px); font-weight: 700;
    letter-spacing: -0.01em; margin: 0; color: #FFFFFF; }
.mk-adv__ctaband-x { font-size: 17px; line-height: 1.6; color: #C8E9F0;
    margin: 16px auto 0; max-width: 720px; }
.mk-adv__ctaband .mk-btn { margin-top: 28px; background: #FFFFFF; color: var(--adv-teal);
    font-weight: 700; font-size: 16px; padding: 14px 32px; border-radius: 10px;
    box-shadow: none; }
.mk-adv__ctaband .mk-btn:hover { background: var(--adv-teal-soft); color: var(--adv-teal); }

/* ── Formulaire ────────────────────────────────────────────────────── */
.mk-adv__form { margin-top: 36px; }
.mk-adv__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px; }
.mk-adv__field { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.mk-adv__grid .mk-adv__field { margin-top: 0; }
.mk-adv__field label { font-size: 14px; font-weight: 600; color: var(--adv-ink); }
.mk-adv__field input, .mk-adv__field select, .mk-adv__field textarea {
    border: 1px solid var(--adv-input-line); border-radius: 9px; padding: 12px 14px;
    font-size: 15px; background: var(--adv-bg); outline: none; color: var(--adv-ink);
    font-family: inherit; width: 100%; transition: border-color .15s, background .15s; }
.mk-adv__field input:focus, .mk-adv__field select:focus, .mk-adv__field textarea:focus {
    border-color: var(--adv-teal); background: #FFFFFF; }
.mk-adv__field textarea { resize: vertical; }
.mk-adv__field input[type="file"] { padding: 10px 14px; background: #FFFFFF; }
.mk-adv__hint { font-size: 12.5px; font-weight: 400; color: var(--adv-faint);
    line-height: 1.55; margin: 0; }
.mk-adv__field.has-error input, .mk-adv__field.has-error select,
.mk-adv__field.has-error textarea { border-color: #DC2626; }
.mk-adv__err { font-size: 12.5px; color: #DC2626; }

/* Blocs dépliables (compte facultatif + détails) */
.mk-adv__optaccount, .mk-adv__more { border: 1px solid var(--adv-line);
    border-radius: 12px; padding: 0 22px; margin-top: 22px; background: var(--adv-bg); }
.mk-adv__more { margin-top: 14px; }
.mk-adv__optaccount > summary, .mk-adv__more > summary { cursor: pointer;
    font-weight: 600; font-size: 15.5px; padding: 18px 0; display: flex;
    justify-content: space-between; align-items: center; gap: 16px; list-style: none; }
.mk-adv__optaccount > summary::-webkit-details-marker,
.mk-adv__more > summary::-webkit-details-marker { display: none; }
.mk-adv__optaccount > summary::after, .mk-adv__more > summary::after {
    content: '+'; color: var(--adv-teal); font-size: 20px; flex-shrink: 0;
    transition: transform .2s; }
.mk-adv__optaccount[open] > summary::after, .mk-adv__more[open] > summary::after {
    transform: rotate(45deg); }
.mk-adv__optaccount > .mk-adv__hint, .mk-adv__more > .mk-adv__hint {
    font-size: 14px; color: var(--adv-mute); margin: 0 0 16px; }
.mk-adv__optaccount .mk-adv__grid, .mk-adv__more .mk-adv__grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.mk-adv__optaccount input, .mk-adv__more input, .mk-adv__more select,
.mk-adv__more textarea { background: #FFFFFF; }
.mk-adv__optaccount > *:last-child, .mk-adv__more > *:last-child { margin-bottom: 22px; }

/* Zones / formats souhaités (puces) */
.mk-adv__fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.mk-adv__fieldset legend { font-size: 14px; font-weight: 600; color: var(--adv-ink);
    margin-bottom: 10px; padding: 0; }
.mk-adv__check { display: flex; align-items: center; gap: 8px; font-size: 14px;
    margin-bottom: 10px; cursor: pointer; }
.mk-adv__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mk-adv__chip { display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--adv-input-line); border-radius: 999px; padding: 8px 16px;
    font-size: 14px; cursor: pointer; background: #FFFFFF;
    transition: border-color .15s, background .15s; }
.mk-adv__chip:has(input:checked) { border-color: var(--adv-teal);
    background: var(--adv-teal-soft); color: var(--adv-teal); }
.mk-adv input[type="checkbox"] { accent-color: var(--adv-teal); }

/* Envoi */
.mk-adv__submit { margin-top: 28px; }
.mk-adv__submit .mk-btn { width: 100%; font-weight: 700; font-size: 17px;
    padding: 16px 0; border-radius: 11px; }
.mk-adv__reassure { text-align: center; font-size: 13px; color: var(--adv-faint);
    margin: 14px 0 0; }

/* Messages d'état */
.mk-adv__sent { display: flex; align-items: flex-start; gap: 10px;
    background: var(--adv-teal-soft); border: 1px solid var(--adv-teal-line);
    color: var(--adv-ink); border-radius: 12px; padding: 16px 18px;
    font-size: 15px; line-height: 1.55; margin-top: 24px; }
.mk-adv__sent .mk-svg { color: var(--adv-teal); width: 22px; height: 22px; margin-top: 1px; }
.mk-adv__errors { background: #FDECEA; border: 1px solid #F5C6C0; color: #B3261E;
    border-radius: 12px; padding: 14px 18px; font-size: 14px; margin-top: 24px; }
.mk-adv__errors ul { margin: 0; padding-inline-start: 18px; }

/* Piège à miel */
.mk-adv__hp { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%);
    width: 1px; height: 1px; overflow: hidden; }

/* ── Écrans étroits ────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .adv2-band { padding: 56px 18px; }
    .adv2-cols { gap: 36px; }
    .adv2-statrow b { min-width: 110px; font-size: 26px; }
    .mk-adv__step { gap: 16px; }
    .mk-adv__hero-kpi { min-width: 130px; flex: 1; }
}

/* Bordure basse (chiffres → audience) + ancres sous le header sticky */
.adv2-band--bbot { border-bottom: 1px solid var(--adv-line2); }
.mk-adv [id] { scroll-margin-top: 96px; }