.mk {
    --ink-950: #ffffff;
    --ink-900: #f3f4f6;
    --ink-800: #e5e7eb;
    --ink-700: #24365c;

    --paper-0:  #ffffff;
    --paper-50: #f5f6f9;

    --line-200: #e3e6ee;
    --line-300: #d3d7e3;

    --text-900: #10152a;
    --text-600: #545b73;
    --text-400: #8790a8;

    --brass-500: #3b82f6;
    --brass-600: #2563eb;
    --brass-050: #eff6ff;

    --success-600: #157a53;
    --success-050: #e7f5ee;
    --danger-600:  #b3372a;
    --danger-050:  #fbebe9;

    --radius-lg: 20px;
    --radius-md: 12px;
    --radius-sm: 8px;

    --shadow-card: 0 30px 60px -20px rgba(10, 17, 32, 0.16), 0 4px 14px rgba(10, 17, 32, 0.05);
    --shadow-soft: 0 10px 30px -12px rgba(10, 17, 32, 0.12);

    --ease: cubic-bezier(.22,.61,.36,1);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-900);
    background: var(--paper-0);
    -webkit-font-smoothing: antialiased;
}

.mk *,
.mk *::before,
.mk *::after { box-sizing: border-box; }

.mk img { max-width: 100%; display: block; }
.mk a { color: inherit; text-decoration: none; }

/* -------------------------------------------------------------------------
   TITRES — police d'affichage distincte du texte courant (Inter), pour
   donner une vraie identité typographique aux titres plutôt qu'un simple
   Inter en gras. Bricolage Grotesque : un grotesque à fort caractère
   (courbes légèrement excentriques, pas un empattement façon "Times"),
   volontairement différent des choix par défaut (serif chaleureux /
   Poppins-Montserrat) qu'on retrouve sur la plupart des maquettes.
   ------------------------------------------------------------------------- */
.mk h1, .mk h2, .mk h3, .mk h4 {
    font-family: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-900);
    margin: 0;
}

/* -------------------------------------------------------------------------
   MOT D'ACCENT DANS LES TITRES — simple mise en couleur, sans italique
   ni soulignement, pour rester sobre.
   ------------------------------------------------------------------------- */
.mk .mk-accent {
    color: var(--brass-600);
}

.mk .mk-container {
    width: min(92%, 1200px);
    margin: 0 auto;
}

.mk section { padding: 96px 0; }

.mk .mk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--brass-050);
    color: var(--brass-600);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mk .mk-eyebrow--dark {
    background: rgba(59, 130, 246, 0.14);
    color: var(--brass-600);
}

/* -------------------------------------------------------------------------
   REVEAL AU DÉFILEMENT
   ------------------------------------------------------------------------- */
.mk .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.mk .reveal.is-visible { opacity: 1; transform: none; }
.mk .reveal-1 { transition-delay: .06s; }
.mk .reveal-2 { transition-delay: .14s; }
.mk .reveal-3 { transition-delay: .22s; }
.mk .reveal-4 { transition-delay: .30s; }

/* -------------------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------------------- */
.mk .mk-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 20px 0;
    background: transparent;
    transition: padding .35s var(--ease);
}
/* IMPORTANT : le fond + le flou (backdrop-filter) ne sont JAMAIS posés
   directement sur .mk-header. Un backdrop-filter/filter/transform sur un
   ancêtre crée un nouveau "containing block" pour ses descendants en
   position:fixed : le panneau du menu mobile (.mk-nav.is-open /
   .mk-actions.is-open), qui est fixed et se trouve DANS le header, se
   retrouverait alors coincé dans les ~64px de la barre au lieu de couvrir
   l'écran — exactement le bug visible uniquement après un défilement.
   On isole donc l'effet "verre" sur un ::before qui n'a aucune incidence
   sur le containing block des autres enfants du header. */
.mk .mk-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: transparent;
    transition: background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Fond sombre au scroll (et non blanc) : le logo est doré/clair et conçu
   pour un fond sombre (identique aux pages login/register/dashboard),
   donc la barre reste sombre pour garder un contraste parfait à tout moment. */
.mk .mk-header.is-scrolled {
    padding: 12px 0;
}
.mk .mk-header.is-scrolled::before {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 30px -18px rgba(10, 17, 32, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mk .mk-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mk .mk-logo { display: flex; align-items: center; }
.mk .mk-logo img {
    width: 168px;
    height: auto;
    display: block;
    transition: width .35s var(--ease);
}
.mk .mk-header.is-scrolled .mk-logo img { width: 138px; }

.mk .mk-nav {
    display: flex;
    align-items: center;
    gap: 36px;
}

/* La croix de fermeture n'a de sens que dans le panneau mobile plein écran
   (voir @media max-width:860px). Sur bureau/grand écran, .mk-nav est affiché
   en ligne dans la barre : sans cette règle, le bouton s'affichait par
   défaut (display inline-block d'un <button>) juste avant "Accueil". */
.mk .mk-nav-close {
    display: none;
}

.mk .mk-nav a {
    position: relative;
    font-size: 14.5px;
    font-weight: 500;
    padding: 6px 0;
    color: var(--text-900);
    transition: color .25s var(--ease);
}

.mk .mk-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: var(--brass-500);
    transition: width .3s var(--ease);
}
.mk .mk-nav a:hover,
.mk .mk-nav a.is-active { color: var(--text-900); }
.mk .mk-nav a:hover::after,
.mk .mk-nav a.is-active::after { width: 100%; }

.mk .mk-header.is-scrolled .mk-nav a { color: var(--text-900); }
.mk .mk-header.is-scrolled .mk-nav a:hover,
.mk .mk-header.is-scrolled .mk-nav a.is-active { color: var(--brass-500); }


.mk .mk-actions { display: flex; align-items: center; gap: 10px; }

.mk .mk-mobile-actions { display: none; align-items: center; gap: 10px; }

/* Bouton clair / sombre : mappé sur la palette locale .mk (le bouton
   utilise par défaut les variables de l'espace admin, absentes ici). */
.mk .theme-toggle-btn {
    position: static;
    border: 1px solid var(--line-200);
    background: var(--paper-0);
    color: var(--text-900);
}
.mk .theme-toggle-btn:hover { border-color: var(--brass-500); color: var(--brass-600); }

.mk .mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
    white-space: nowrap;
}
.mk .mk-btn:active { transform: translateY(1px); }

.mk .mk-btn--ghost {
    color: var(--text-900);
    border-color: var(--line-300);
}
.mk .mk-btn--ghost:hover { border-color: var(--brass-500); color: var(--text-900); }

.mk .mk-btn--brass {
    background: linear-gradient(135deg, var(--brass-500), var(--brass-600));
    color: #ffffff;
    box-shadow: 0 10px 24px -10px rgba(59, 130, 246, 0.65);
}
.mk .mk-btn--brass:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(59, 130, 246, 0.75); }

.mk .mk-btn--lg { padding: 14px 26px; font-size: 15px; border-radius: 12px; }

.mk .mk-menu-toggle {
    display: none;
    width: 42px; height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line-300);
    background: transparent;
    color: var(--text-900);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   HÉROS SOMBRE (fond commun à toutes les pages : accueil / à propos / annonces)
   ------------------------------------------------------------------------- */
.mk .mk-dark-hero {
    position: relative;
    overflow: hidden;
    padding: 190px 0 120px;
    background:
        radial-gradient(120% 140% at 82% -10%, var(--ink-800) 0%, var(--ink-950) 55%),
        var(--ink-950);
    color: var(--text-900);
}

.mk .mk-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    animation: mkFloat 14s ease-in-out infinite;
}
.mk .mk-orb--1 { width: 380px; height: 380px; background: rgba(59, 130, 246,0.32); top: -120px; right: -60px; }
.mk .mk-orb--2 { width: 260px; height: 260px; background: rgba(36,54,92,0.55); bottom: -100px; left: -40px; animation-delay: -6s; }

@keyframes mkFloat {
    0%, 100% { transform: translate(0,0); }
    50% { transform: translate(18px,-22px); }
}

.mk .mk-dark-hero .mk-container { position: relative; z-index: 2; }

/* -------------------------------------------------------------------------
   GRILLE DU HÉROS (texte + widget d'échange)
   ------------------------------------------------------------------------- */
.mk .mk-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    /* Empêche chaque colonne de forcer sa largeur au contenu minimal
       (comportement par défaut de CSS Grid) : sans ça, sur petit écran,
       le texte et les boutons débordent au lieu de retourner à la ligne. */
    min-width: 0;
}
.mk .mk-hero-title {
    font-size: clamp(30px, 5.6vw, 52px);
    font-weight: 800;
    line-height: 1.14;
    color: var(--text-900);
    margin-top: 22px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* -------------------------------------------------------------------------
   ENTRÉE DES TITRES — mots révélés un à un plutôt qu'un bloc qui apparaît
   d'un coup : chaque mot monte légèrement en place avec un délai croissant.
   S'applique à tout titre marqué ".mk-split-title" (le découpage en mots
   est fait par marketing.js, qui enveloppe chaque mot dans un span et
   préserve les éléments imbriqués comme <span class="mk-accent">).
   Se déclenche via la même classe "is-visible" que le reste des animations
   au scroll (ajoutée par l'IntersectionObserver de marketing.js), donc le
   titre n'a pas besoin de sa propre transition de bloc — seuls les mots
   l'ont, ce qui permet de rejouer l'animation à chaque titre rencontré en
   scrollant la page, pas seulement celui du hero.
   ------------------------------------------------------------------------- */
.mk .mk-split-title.reveal { opacity: 1; transform: none; transition: none; }

.mk .mk-split-title .mk-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
}
.mk .mk-split-title.is-visible .mk-word {
    animation: mkWordIn 0.7s cubic-bezier(.19,1,.22,1) both;
    animation-delay: calc(var(--d) * 70ms + 90ms);
}
@keyframes mkWordIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Halo discret derrière le mot mis en avant : une respiration lente une
   fois le titre affiché, pour attirer l'œil sans distraire. */
.mk .mk-split-title .mk-word--accent { position: relative; }
.mk .mk-split-title .mk-word--accent::before {
    content: "";
    position: absolute;
    inset: -14px -18px;
    background: radial-gradient(60% 60% at 50% 50%, rgba(59,130,246,0.24), rgba(59,130,246,0) 72%);
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}
.mk .mk-split-title.is-visible .mk-word--accent::before {
    animation: mkGlow 3.4s ease-in-out 1s infinite;
}
@keyframes mkGlow {
    0%, 100% { opacity: 0; transform: scale(.92); }
    50%      { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .mk .mk-split-title .mk-word { animation: none !important; opacity: 1; transform: none; }
    .mk .mk-split-title .mk-word--accent::before { animation: none !important; }
}

.mk .mk-hero-subtitle {
    font-size: clamp(14.5px, 2.4vw, 16.5px);
    color: var(--text-600);
    margin-top: 20px;
    max-width: 520px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   BOUTON PRIMAIRE / SECONDAIRE (contenu héros)
   ------------------------------------------------------------------------- */
.mk .mk-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   BARRE DE CONFIANCE (repère chiffré, style inqoins mais identité propre)
   ------------------------------------------------------------------------- */
.mk .mk-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.mk .mk-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--paper-50);
    border: 1px solid var(--line-200);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-900);
}
.mk .mk-trust-chip svg { width: 15px; height: 15px; color: var(--brass-500); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   CARTES STATISTIQUES (compteurs animés)
   ------------------------------------------------------------------------- */
.mk .mk-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.mk .mk-stat-card {
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.mk .mk-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-soft);
    border-color: var(--line-300);
}
.mk .mk-stat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--brass-050);
    color: var(--brass-600);
    flex-shrink: 0;
}
.mk .mk-stat-icon svg { width: 24px; height: 24px; }
.mk .mk-stat-card h3 {
    font-size: 27px;
    font-weight: 600;
    line-height: 1.1;
}
.mk .mk-stat-card p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-600); }
.mk .mk-stat-value { display: inline-flex; align-items: baseline; }
.mk .mk-stat-plus { color: var(--brass-600); margin-right: 1px; }
.mk .mk-stat-suffix { font-size: 0.62em; font-weight: 600; margin-left: 2px; color: var(--text-600); }

/* Variante "accueil" uniquement (voir index.blade.php) : bande continue à
   séparateurs fins, sans pastille d'icône ni carte flottante — les chiffres
   portent le message. La page À propos garde le style ci-dessus, inchangé. */
.mk .mk-stat-grid--minimal {
    gap: 1px;
    background: var(--line-200);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.mk .mk-stat-grid--minimal .mk-stat-card {
    border: none;
    border-radius: 0;
    padding: 32px 26px;
    display: block;
    transition: none;
}
.mk .mk-stat-grid--minimal .mk-stat-card:hover { transform: none; box-shadow: none; }
.mk .mk-stat-grid--minimal .mk-stat-card h3 {
    font-family: 'Bricolage Grotesque', 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.mk .mk-stat-grid--minimal .mk-stat-card p { margin: 10px 0 0; }
.mk .mk-stat-grid--minimal .mk-stat-suffix { font-size: 0.45em; margin-left: 3px; }

/* -------------------------------------------------------------------------
   SECTIONS CLAIRES GÉNÉRIQUES
   ------------------------------------------------------------------------- */
.mk .mk-section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.mk .mk-section-head h2 { font-size: clamp(24px, 4.4vw, 34px); margin-top: 16px; }
.mk .mk-section-head p { margin-top: 14px; color: var(--text-600); font-size: 15.5px; line-height: 1.7; }

.mk .mk-bg-paper { background: var(--paper-50); }

/* -------------------------------------------------------------------------
   SERVICES — une carte mise en avant (le produit central : l'échange
   instantané) au lieu de quatre cartes identiques ; icônes dessinées sur
   mesure (pas de kit d'icônes générique), hauteur et alignement du pied de
   carte garantis quelle que soit la longueur du texte.
   ------------------------------------------------------------------------- */
.mk .mk-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-200);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.mk .mk-service-card {
    position: relative;
    background: var(--paper-0);
    padding: 36px 28px 28px;
    display: flex;
    flex-direction: column;
    transition: background .35s var(--ease);
}
.mk .mk-service-card p { flex: 1 0 auto; }

.mk .mk-service-icon {
    width: 50px; height: 50px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ink-950);
    color: var(--brass-500);
    margin-bottom: 18px;
}
.mk .mk-service-icon svg { width: 22px; height: 22px; }

/* Icônes de la grille "Nos services" uniquement : marques dessinées sur
   mesure, sans pastille de fond (le badge ci-dessus reste utilisé tel
   quel ailleurs, ex. carte "Nous contacter"). */
.mk .mk-service-card .mk-service-icon {
    width: 40px; height: 40px;
    border-radius: 0;
    background: none;
    color: var(--brass-600);
    margin-bottom: 22px;
}
.mk .mk-service-card .mk-service-icon svg { width: 100%; height: 100%; }
.mk .mk-service-card h3 { font-size: 17px; margin-bottom: 10px; letter-spacing: -0.005em; }
.mk .mk-service-card p { color: var(--text-600); font-size: 14px; line-height: 1.65; margin-bottom: 20px; }

.mk .mk-link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-900);
    padding-bottom: 1px;
    border-bottom: 1px solid var(--line-300);
    align-self: flex-start;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.mk .mk-service-card:hover .mk-link-arrow { color: var(--brass-600); border-color: var(--brass-500); }
.mk .mk-link-arrow svg { display: none; }

/* La carte "produit central" (2ᵉ position) suit désormais le même thème
   clair/sombre que les autres cartes de la grille (fond clair en mode
   clair, fond sombre en mode sombre) — elle ne s'en distinguait plus par
   une couleur inversée qui la faisait apparaître noire en mode clair et
   blanche en mode sombre. */
.mk .mk-service-card--featured { background: var(--paper-0); }
.mk .mk-service-card--featured .mk-service-icon { color: var(--brass-500); }
.mk .mk-service-card--featured h3 { color: var(--text-900); }
.mk .mk-service-card--featured p { color: var(--text-600); }
.mk .mk-service-card--featured .mk-link-arrow { color: var(--text-900); border-color: var(--line-300); }
.mk .mk-service-card--featured:hover .mk-link-arrow { color: var(--brass-600); border-color: var(--brass-500); }

/* -------------------------------------------------------------------------
   PAGE "À PROPOS" — bloc Présentation / Nos engagements
   Remplace l'ancien style inline (grid-template-columns fixe, sans media
   query) qui restait figé en 2 colonnes étroites sur mobile.
   ------------------------------------------------------------------------- */
.mk .mk-about-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 26px;
    align-items: start;
}
.mk .mk-about-card-main { padding: 44px; }
/* Justifié, mais avec césure automatique des mots : sans elle, une colonne
   étroite avec peu de mots par ligne forçait le navigateur à écarter les
   espaces entre les mots pour remplir la ligne (grands espaces disgracieux).
   La césure permet de couper les mots longs en fin de ligne, donc la
   justification reste propre. */
.mk .mk-about-card-main p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
.mk .mk-about-card-side { padding: 34px; }
@media (max-width: 860px) {
    .mk .mk-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mk .mk-about-card-main,
    .mk .mk-about-card-side { padding: 28px 22px; }
}
@media (max-width: 380px) {
    .mk .mk-about-card-main,
    .mk .mk-about-card-side { padding: 22px 16px; }
}

/* -------------------------------------------------------------------------
   TICKER (TradingView)
   ------------------------------------------------------------------------- */
.mk .mk-ticker-shell {
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: 6px 6px 6px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--paper-0);
    box-shadow: var(--shadow-soft);
}
.mk .mk-ticker-shell .tradingview-widget-container { flex: 1; min-width: 0; }
.mk .mk-view-prices {
    flex-shrink: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-900);
    background: var(--paper-50);
    border: 1px solid var(--line-200);
    padding: 12px 18px;
    border-radius: var(--radius-md);
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.mk .mk-view-prices:hover { background: var(--brass-050); border-color: var(--brass-500); color: var(--brass-600); }

/* -------------------------------------------------------------------------
   TÉMOIGNAGES (sans étoiles — une citation, un nom, un badge vérifié)
   ------------------------------------------------------------------------- */
.mk .mk-testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.mk .mk-testi-card {
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mk .mk-testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.mk .mk-testi-mark { font-family: 'Fraunces', serif; font-weight: 700; font-size: 42px; color: var(--brass-500); line-height: 1; margin-bottom: 6px; }
.mk .mk-testi-message { font-size: 15px; color: var(--text-900); line-height: 1.7; flex: 1; }
.mk .mk-testi-footer {
    display: flex; align-items: center; gap: 12px;
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--line-300);
}
.mk .mk-testi-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
    color: #ffffff; font-weight: 700; font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(16,21,42,0.2), inset 0 0 0 2px rgba(255,255,255,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.mk .mk-testi-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 22% 22%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 42%),
        radial-gradient(circle at 78% 76%, rgba(255,255,255,.25) 0, rgba(255,255,255,0) 38%);
    mix-blend-mode: soft-light;
}
.mk .mk-testi-avatar span { position: relative; z-index: 1; }
.mk .mk-avatar-g1,
.mk .mk-avatar-g2,
.mk .mk-avatar-g3,
.mk .mk-avatar-g4,
.mk .mk-avatar-g5,
.mk .mk-avatar-g6 { background: linear-gradient(135deg, var(--brass-500), var(--brass-600)); }
.mk .mk-testi-name { font-size: 14px; font-weight: 600; }
.mk .mk-testi-tag { font-size: 12px; color: var(--success-600); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.mk .mk-testi-tag svg { width: 12px; height: 12px; }

.mk .mk-testi-empty, .mk .mk-testi-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: var(--text-400);
    font-size: 14px;
}

.mk .mk-testi-cta {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border-radius: var(--radius-lg);
    background: var(--ink-950);
    color: var(--text-900);
}
.mk .mk-testi-cta span { font-size: 14.5px; font-weight: 500; }

/* -------------------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------------------- */
.mk .mk-contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 26px;
    align-items: start;
}
.mk .mk-contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    background: var(--paper-0);
    margin-bottom: 14px;
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.mk .mk-contact-info-card:hover { border-color: var(--brass-500); transform: translateX(4px); }
.mk .mk-contact-info-card .mk-service-icon { margin: 0; width: 42px; height: 42px; border-radius: 11px; }
.mk .mk-contact-info-card .mk-service-icon svg { width: 18px; height: 18px; }
.mk .mk-contact-info-card h4 { font-size: 14.5px; margin-bottom: 4px; }
.mk .mk-contact-info-card p, .mk .mk-contact-info-card a { font-size: 13.5px; color: var(--text-600); }
.mk .mk-contact-info-card a:hover { color: var(--brass-600); }

.mk .mk-contact-form-card {
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: 34px;
    box-shadow: var(--shadow-soft);
}
.mk .mk-contact-form-card h3 { font-size: 21px; margin-bottom: 8px; }
.mk .mk-contact-form-card > p { color: var(--text-600); font-size: 14px; margin-bottom: 24px; }

.mk .mk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk .mk-form-group { margin-bottom: 16px; }
.mk .mk-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text-600); margin-bottom: 7px; }
.mk .mk-form-group input,
.mk .mk-form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-300);
    font-family: inherit;
    /* 16px minimum : en dessous, iOS/Android zooment automatiquement la
       page au focus de l'input, ce qui décale la mise en page. */
    font-size: 16px;
    color: var(--text-900);
    background: var(--paper-50);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.mk .mk-form-group textarea { resize: vertical; min-height: 120px; }
.mk .mk-form-group input:focus,
.mk .mk-form-group textarea:focus {
    outline: none;
    border-color: var(--brass-500);
    background: var(--paper-0);
    box-shadow: 0 0 0 4px rgba(59, 130, 246,0.14);
}

.mk .mk-submit-btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--brass-500), var(--brass-600));
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mk .mk-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(59, 130, 246,0.55); }
.mk .mk-submit-btn:disabled { opacity: 0.7; cursor: default; transform: none; }

.mk .mk-form-status { margin-top: 14px; font-size: 13.5px; font-weight: 500; display: none; }
.mk .mk-form-status.success { display: block; color: var(--success-600); }
.mk .mk-form-status.error { display: block; color: var(--danger-600); }

/* -------------------------------------------------------------------------
   RACCOURCI WHATSAPP (formulaire de contact)
   ------------------------------------------------------------------------- */
.mk .mk-form-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--text-400);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mk .mk-form-divider::before,
.mk .mk-form-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-300);
}
.mk .mk-whatsapp-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid #bfe8cf;
    background: #eefaf2;
    color: #157a45;
    font-size: 14.5px;
    font-weight: 600;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.mk .mk-whatsapp-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.mk .mk-whatsapp-btn:hover {
    background: #22c55e;
    border-color: #22c55e;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(34, 197, 94, 0.6);
}
.mk .mk-whatsapp-note {
    margin-top: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-400);
}

/* -------------------------------------------------------------------------
   NEWSLETTER
   ------------------------------------------------------------------------- */
.mk .mk-newsletter-box {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 46px 48px;
    background: radial-gradient(120% 160% at 100% 0%, var(--ink-800) 0%, var(--ink-950) 60%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    border: 1px solid rgba(59, 130, 246,0.35);
}
.mk .mk-newsletter-box h2 { color: var(--text-900); font-size: 24px; }
.mk .mk-newsletter-box p { color: var(--text-600); margin-top: 8px; font-size: 14.5px; }
.mk .mk-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mk .mk-newsletter-form input {
    padding: 13px 16px;
    border-radius: 10px;
    border: 1px solid var(--line-200);
    background: var(--paper-50);
    color: var(--text-900);
    min-width: 240px;
    /* 16px minimum : évite le zoom auto iOS/Android au focus. */
    font-size: 16px;
}
.mk .mk-newsletter-form input::placeholder { color: var(--text-400); }
.mk .mk-newsletter-form input:focus { outline: none; border-color: var(--brass-500); }
.mk .mk-newsletter-form button {
    padding: 13px 22px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--brass-500), var(--brass-600));
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: transform .25s var(--ease);
}
.mk .mk-newsletter-form button:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------------------
   PIED DE PAGE
   ------------------------------------------------------------------------- */
.mk .mk-footer {
    background: var(--ink-950);
    color: var(--text-600);
    padding: 74px 0 28px;
}
.mk .mk-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
    gap: 32px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--line-300);
}
.mk .mk-footer-col img { width: 168px; margin-bottom: 16px; }
.mk .mk-footer-col p { font-size: 13.5px; line-height: 1.7; }
.mk .mk-footer-col h4 { color: var(--text-900); font-size: 14.5px; margin-bottom: 18px; font-family: 'Inter', sans-serif; font-weight: 600; }
.mk .mk-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mk .mk-footer-col ul a { font-size: 13.5px; transition: color .25s var(--ease); }
.mk .mk-footer-col ul a:hover { color: var(--brass-500); }
.mk .mk-footer-contact { display: flex; flex-direction: column; gap: 12px; }
.mk .mk-footer-contact a { display: flex; align-items: center; gap: 10px; font-size: 13.5px; transition: color .25s var(--ease); }
.mk .mk-footer-contact a:hover { color: var(--brass-500); }
.mk .mk-footer-contact svg { width: 16px; height: 16px; color: var(--brass-500); flex-shrink: 0; }

.mk .mk-social { display: flex; gap: 10px; margin-top: 18px; }
.mk .mk-social a {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--paper-50);
    border: 1px solid var(--line-200);
    display: flex; align-items: center; justify-content: center;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.mk .mk-social a svg { width: 16px; height: 16px; }
.mk .mk-social a:hover { background: var(--brass-500); border-color: var(--brass-500); transform: translateY(-3px); }

.mk .mk-footer-bottom {
    padding-top: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 13px;
}
.mk .mk-footer-bottom a { margin-left: 18px; transition: color .25s var(--ease); }
.mk .mk-footer-bottom a:hover { color: var(--brass-500); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */

/* Garde-fou : jamais de scroll horizontal, quel que soit l'écran
   (posé aussi sur html, en plus de body.mk, par sécurité supplémentaire) */
html { overflow-x: hidden; }
.mk { overflow-x: hidden; }

/* Garde-fou générique CSS Grid : par défaut, un enfant de grille ne peut
   pas devenir plus étroit que son contenu (texte, boutons...), ce qui
   provoque des débordements silencieux sur mobile. On neutralise ça sur
   toutes les grilles de la page. */
.mk .mk-hero-grid > *,
.mk .mk-stat-grid > *,
.mk .mk-service-grid > *,
.mk .mk-testi-grid > *,
.mk .mk-footer-grid > *,
.mk .mk-form-grid > *,
.mk .mk-contact-layout > * {
    min-width: 0;
}

@media (max-width: 1080px) {
    .mk .mk-stat-grid, .mk .mk-service-grid { grid-template-columns: repeat(2, 1fr); }
    .mk .mk-testi-grid { grid-template-columns: repeat(2, 1fr); }
    .mk .mk-footer-grid { grid-template-columns: 1fr 1fr; }
    .mk .mk-contact-layout { grid-template-columns: 1fr; }
}

/* Tablettes et grands mobiles : le widget d'échange passe sous le texte du héros */
@media (max-width: 960px) {
    .mk .mk-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .mk .mk-hero-subtitle { max-width: none; }
}

@media (max-width: 860px) {
    .mk .mk-nav, .mk .mk-actions { display: none; }
    .mk .mk-nav-close { display: none; }
    .mk .mk-menu-toggle { display: flex; }
    .mk .mk-mobile-actions { display: flex; }
    .mk .mk-actions.is-open .theme-toggle-btn { display: none; }
    .mk .mk-nav.is-open, .mk .mk-actions.is-open {
        display: flex;
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(78%, 320px);
        background: var(--ink-950);
        flex-direction: column;
        padding: 100px 30px 30px;
        z-index: 1100;
        box-shadow: -20px 0 50px rgba(0,0,0,0.35);
    }
    .mk .mk-actions.is-open { top: auto; bottom: 0; height: auto; padding: 0 30px 40px; align-items: stretch; }
    .mk .mk-nav.is-open a { color: var(--text-900); font-size: 17px; }
    .mk .mk-nav.is-open .mk-nav-close {
        display: flex;
        position: absolute;
        top: 24px; right: 24px;
        width: 38px; height: 38px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid var(--line-300);
        background: transparent;
        color: var(--text-900);
        cursor: pointer;
        transition: border-color .2s var(--ease), color .2s var(--ease);
    }
    .mk .mk-nav.is-open .mk-nav-close:hover { border-color: var(--brass-500); color: var(--brass-500); }
    .mk .mk-logo img { width: 148px; }
    .mk .mk-header.is-scrolled .mk-logo img { width: 128px; }
}

@media (max-width: 640px) {
    .mk .mk-container { width: 90%; }
    .mk section { padding: 64px 0; }
    .mk .mk-dark-hero { padding: 140px 0 70px; }
    .mk .mk-stat-grid, .mk .mk-service-grid, .mk .mk-testi-grid { grid-template-columns: 1fr; }
    .mk .mk-footer-grid { grid-template-columns: 1fr; }
    .mk .mk-form-grid { grid-template-columns: 1fr; }
    .mk .mk-ticker-shell { flex-direction: column; align-items: stretch; padding: 16px; }
    .mk .mk-newsletter-box { padding: 32px 24px; }
    .mk .mk-newsletter-form { width: 100%; }
    .mk .mk-newsletter-form input { min-width: 0; flex: 1 1 100%; }
    .mk .mk-newsletter-form button { flex: 1 1 100%; justify-content: center; }
    .mk .mk-hero-actions { flex-direction: column; align-items: stretch; }
    .mk .mk-hero-actions .mk-btn { width: 100%; }
    .mk .mk-trust-row { gap: 8px; }
    .mk .mk-trust-chip { font-size: 12px; padding: 8px 12px; }
    .mk .mk-contact-form-card { padding: 24px 20px; }
    .mk .mk-section-head { margin-bottom: 36px; }
}

/* Très petits téléphones (Galaxy Fold, anciens iPhone SE, etc.) */
@media (max-width: 380px) {
    .mk .mk-container { width: 92%; }
    .mk .mk-logo img { width: 128px; }
    .mk .mk-header.is-scrolled .mk-logo img { width: 112px; }
    .mk .mk-hero-title { font-size: clamp(26px, 8vw, 32px); }
    .mk .mk-eyebrow { font-size: 11px; padding: 6px 12px; }
    .mk .mk-stat-card, .mk .mk-service-card, .mk .mk-testi-card { padding: 22px 18px; }
    .mk .mk-contact-form-card { padding: 20px 16px; }
}

/* -------------------------------------------------------------------------
   SECTION "PAYS ACTIFS" (index) — bandeau défilant technique, différent
   d'une simple liste statique : ticker horizontal en boucle infinie,
   pastille "live" pulsée par pays, fondu sur les bords.
   ------------------------------------------------------------------------- */
.mk .mk-countries-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.mk .mk-countries-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 14px;
    padding: 4px 0;
    animation: mk-countries-scroll 32s linear infinite;
    will-change: transform;
}
.mk .mk-countries-marquee:hover .mk-countries-track { animation-play-state: paused; }
@keyframes mk-countries-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.mk .mk-country-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 9999px;
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    flex-shrink: 0;
    white-space: nowrap;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.mk .mk-country-chip:hover {
    border-color: var(--brass-300, var(--brass-500));
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}
.mk .mk-country-chip img {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
    flex-shrink: 0;
}
.mk .mk-country-name { font-size: 14px; font-weight: 600; color: var(--text-900, #111827); }
.mk .mk-country-code { font-size: 12px; font-weight: 500; color: var(--text-600); letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
    .mk .mk-countries-track { animation: none; }
}
@media (max-width: 640px) {
    .mk .mk-country-chip { padding: 9px 14px; gap: 8px; }
    .mk .mk-country-name { font-size: 13px; }
    .mk .mk-country-code { font-size: 11px; }
}      
/* =========================================================================
   TAUX DU MOMENT — cartes crypto (accueil publique)
   ========================================================================= */
.mk .mk-rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.mk .mk-rate-card {
    position: relative;
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: 26px;
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.mk .mk-rate-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(420px 120px at 100% 0%, rgba(59,130,246,.10), transparent 70%);
    opacity: 0; transition: opacity .4s var(--ease);
    pointer-events: none;
}
.mk .mk-rate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--line-300); }
.mk .mk-rate-card:hover::before { opacity: 1; }
.mk .mk-rate-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.mk .mk-rate-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper-50); border: 1px solid var(--line-200);
    overflow: hidden; flex-shrink: 0;
}
.mk .mk-rate-icon img { width: 100%; height: 100%; object-fit: cover; }
.mk .mk-rate-name { font-size: 16px; font-weight: 700; color: var(--text-900); line-height: 1.25; }
.mk .mk-rate-sub { font-size: 12.5px; color: var(--text-400); }
.mk .mk-rate-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: var(--success-600);
    background: var(--success-050); padding: 5px 10px; border-radius: 999px;
    white-space: nowrap;
}
.mk .mk-rate-live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--success-600);
    position: relative; flex-shrink: 0;
}
.mk .mk-rate-live-dot::after {
    content: ""; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid var(--success-600); animation: mkPulse 1.8s var(--ease) infinite;
}
@keyframes mkPulse {
    0%   { transform: scale(.55); opacity: .9; }
    80%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
.mk .mk-rate-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mk .mk-rate-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: 10px; background: var(--paper-50);
}
.mk .mk-rate-row-label { font-size: 13px; color: var(--text-600); font-weight: 500; }
.mk .mk-rate-row-value { font-size: 15px; font-weight: 700; }
.mk .mk-rate-row-value small { font-size: 11px; font-weight: 600; color: var(--text-400); margin-left: 3px; }
.mk .mk-rate-row--buy .mk-rate-row-value { color: var(--success-600); }
.mk .mk-rate-row--sell .mk-rate-row-value { color: var(--danger-600); }
.mk .mk-rate-reserve {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-400); margin-bottom: 18px;
}
.mk .mk-rate-reserve svg { width: 13px; height: 13px; flex-shrink: 0; }
.mk .mk-rate-actions { display: flex; gap: 10px; }
.mk .mk-rate-actions .mk-btn { flex: 1; padding: 10px 14px; font-size: 13.5px; }
.mk .mk-btn--success { background: linear-gradient(135deg, var(--success-600), #0f6244); color: #fff; }
.mk .mk-btn--success:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(21, 122, 83, .55); }
.mk .mk-btn--danger-outline { color: var(--danger-600); border-color: var(--danger-050); background: var(--danger-050); }
.mk .mk-btn--danger-outline:hover { border-color: var(--danger-600); }
.mk .mk-rate-empty {
    grid-column: 1 / -1; text-align: center; padding: 40px 20px;
    color: var(--text-400); font-size: 14px;
}

.mk .mk-rate-viewmore-wrap { display: flex; justify-content: center; margin-top: 36px; }
.mk .mk-rate-viewmore {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px; border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    color: #fff; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--brass-500), var(--brass-600));
    box-shadow: 0 12px 26px -12px rgba(59, 130, 246, .65);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mk .mk-rate-viewmore:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(59, 130, 246, .75); }
.mk .mk-rate-viewmore:active { transform: translateY(0); }
.mk .mk-rate-viewmore-count { opacity: .85; font-weight: 500; }
.mk .mk-rate-viewmore-icon { width: 16px; height: 16px; flex-shrink: 0; transition: transform .3s var(--ease); }
.mk .mk-rate-viewmore--open .mk-rate-viewmore-icon { transform: rotate(180deg); }

.mk .mk-rate-card--extra.mk-rate-card--reveal-in {
    animation: mkRateCardIn .45s var(--ease) both;
}
@keyframes mkRateCardIn {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================================
   COMMENT ÇA MARCHE — timeline animée (accueil publique)
   ========================================================================= */
.mk .mk-steps-wrap { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.mk .mk-steps-wrap--4 { grid-template-columns: repeat(4, 1fr); }
.mk .mk-steps-wrap::before {
    content: "";
    position: absolute; top: 34px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-300) 0 10px, transparent 10px 18px);
    z-index: 0;
}
.mk .mk-step-card { position: relative; z-index: 1; text-align: left; }
.mk .mk-step-num {
    width: 68px; height: 68px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, var(--brass-500), var(--ink-700));
    box-shadow: 0 14px 28px -12px rgba(59, 130, 246, .55);
    margin-bottom: 20px; transition: transform .35s var(--ease);
}
.mk .mk-step-card:hover .mk-step-num { transform: scale(1.08) rotate(-4deg); }
.mk .mk-step-time {
    display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brass-600); margin-bottom: 8px;
}
.mk .mk-step-card h3 { font-size: 18px; margin-bottom: 10px; }
.mk .mk-step-card p { font-size: 14px; line-height: 1.7; color: var(--text-600); margin: 0; }

.mk .mk-htw-tabs {
    display: flex; justify-content: center; gap: 8px; margin: 0 auto 48px;
    padding: 6px; width: fit-content; background: var(--paper-50);
    border: 1px solid var(--line-200); border-radius: 999px;
}
.mk .mk-htw-tab {
    padding: 10px 24px; border: none; background: transparent; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-600);
    border-radius: 999px; transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.mk .mk-htw-tab:hover { color: var(--text-900); }
.mk .mk-htw-tab.active {
    background: linear-gradient(135deg, var(--brass-500), var(--brass-600));
    color: #fff; box-shadow: 0 10px 22px -10px rgba(59, 130, 246, .65);
}
.mk .mk-htw-note {
    display: flex; align-items: center; gap: 9px; justify-content: center;
    margin-top: 44px; padding: 14px 20px; border-radius: var(--radius-md);
    background: var(--brass-050); color: var(--brass-600); font-size: 13.5px; font-weight: 500;
}
.mk .mk-htw-note svg { flex-shrink: 0; }

@media (max-width: 860px) {
    .mk .mk-rate-grid { grid-template-columns: 1fr; }
    .mk .mk-steps-wrap, .mk .mk-steps-wrap--4 { grid-template-columns: 1fr 1fr; gap: 34px; }
    .mk .mk-steps-wrap::before { display: none; }
}
@media (max-width: 560px) {
    .mk .mk-steps-wrap, .mk .mk-steps-wrap--4 { grid-template-columns: 1fr; }
    .mk .mk-htw-tabs { width: 100%; }
    .mk .mk-htw-tab { flex: 1; padding: 10px 12px; font-size: 13px; }
}
/* =========================================================================
   MODE SOMBRE — pages publiques (accueil / à propos / annonces)
   Redéfinit uniquement les variables locales à .mk : tout composant qui
   utilise déjà var(--paper-0), var(--text-900), etc. s'adapte automatiquement.
   ========================================================================= */
html[data-theme="dark"] .mk {
    --ink-950: #101a2e;
    --ink-900: #182338;
    --ink-800: #22314d;
    --ink-700: #2c3f66;

    --paper-0:  #182338;
    --paper-50: #141e33;

    --line-200: #232d42;
    --line-300: #2c3750;

    --text-900: #e8ecf4;
    --text-600: #a9b2c6;
    --text-400: #7c869c;

    --brass-050: rgba(79, 140, 255, 0.14);
    --success-600: #34d399;
    --success-050: rgba(52, 211, 153, 0.14);
    --danger-600: #f87171;
    --danger-050: rgba(248, 113, 113, 0.14);

    background: var(--paper-0);
    color: var(--text-900);
    color-scheme: dark;
}
html[data-theme="dark"] .mk .mk-header::before {
    background: var(--paper-0);
    border-bottom: 1px solid var(--line-200);
}
/* Aucun fond derrière le logo sur l'index : il reste posé directement
   sur le dégradé sombre de la page, sans boîte. */
html[data-theme="dark"] .mk .mk-logo {
    background: transparent;
}
html[data-theme="dark"] .mk .mk-footer-col:first-child a {
    display: inline-flex;
    background: transparent;
}
html[data-theme="dark"] .mk .mk-menu-toggle,
html[data-theme="dark"] .mk .mk-nav.is-open .mk-nav-close { color: var(--text-900); }
html[data-theme="dark"] .mk .mk-whatsapp-btn {
    background: var(--success-050);
    border-color: rgba(52, 211, 153, 0.35);
    color: #6ee7b7;
}
html[data-theme="dark"] .mk .mk-whatsapp-btn:hover { background: #22c55e; border-color: #22c55e; color: #fff; }

/* Icônes réseaux sociaux (footer) : même style que les autres cartes
   sombres de la page (fond + bordure sombres, icône claire lisible). */
html[data-theme="dark"] .mk .mk-social a {
    background: var(--paper-50);
    border-color: var(--line-200);
    color: var(--text-900);
}
html[data-theme="dark"] .mk .mk-social a:hover {
    background: var(--brass-500);
    border-color: var(--brass-500);
    color: #fff;
}

/* Lang Toggle Styles */
.lang-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    background: var(--bg-body, rgba(0,0,0,0.05));
    border-radius: 30px;
    padding: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    margin-right: 12px;
}
html[data-theme="dark"] .lang-toggle-wrapper {
    background: rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.05);
}
.lang-toggle-btn {
    text-decoration: none;
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}
.lang-toggle-btn:hover {
    color: var(--text-main, #1f2937);
}
html[data-theme="dark"] .lang-toggle-btn:hover {
    color: #e8ecf4;
}
.lang-toggle-btn.active {
    color: var(--brass-500, #3b82f6);
    background: var(--paper-0, #ffffff);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
html[data-theme="dark"] .lang-toggle-btn.active {
    background: var(--brass-500, #4f8cff);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(79, 140, 255, 0.2);
}
/* ==========================================================================
   Sélecteur de langue (FR/EN) — site public
   ========================================================================== */
.mk .lang-switch { position: relative; }

.mk .lang-switch-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    border-radius: 9999px;
    border: 1px solid var(--line-200);
    background: var(--paper-0);
    color: var(--text-900);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.mk .lang-switch-btn:hover {
    border-color: var(--brass-500);
    color: var(--brass-600);
    box-shadow: 0 10px 24px -14px rgba(59, 130, 246, 0.55);
}
.mk .lang-switch-btn:active { transform: translateY(1px); }

.mk .lang-switch-globe { width: 15px; height: 15px; color: var(--text-600); flex-shrink: 0; }
.mk .lang-switch-code { min-width: 18px; text-align: center; }

.mk .lang-switch-chevron { color: var(--text-600); transition: transform 0.2s ease, color 0.2s ease; }
.mk .lang-switch.open .lang-switch-chevron { transform: rotate(180deg); color: var(--brass-600); }

.mk .lang-switch-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 170px;
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 6px;
    z-index: 45;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.mk .lang-switch.open .lang-switch-menu { display: block; animation: langSwitchIn 0.18s var(--ease); }

@keyframes langSwitchIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.mk .lang-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-900);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mk .lang-switch-item:hover { background-color: var(--paper-50); }
.mk .lang-switch-item.is-active { color: var(--brass-600); background-color: var(--brass-050); }

.mk .lang-switch-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--brass-500), var(--brass-600));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.mk .mk-mobile-actions .lang-switch-btn {
    height: 42px;
    width: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
}
.mk .mk-mobile-actions .lang-switch-menu { right: -8px; }

@media (max-width: 900px) {
    .mk .mk-actions.is-open .lang-switch { display: none; }
}

@media (max-width: 480px) {
    .mk .lang-switch-code { display: none; }
}