/* ================================================================
   MAPAYER — Composants v2
   Peau visuelle des composants partagés : couleurs, bordures, rayons,
   ombres, typographie, mouvement.

   Ce fichier ne définit AUCUNE mise en page (display, grid, flex,
   position, largeurs) : la structure reste dans mapayer-redesign.css.
   Il ne fait que peindre les composants avec les tokens.

   Dépend de design-tokens.css. À charger EN DERNIER.
   Aucun !important.

   Pourquoi le préfixe « html[data-theme] » sur chaque règle :
   l'ancien thème contient 300+ surcharges de la forme
   `body[data-theme="light"] .mp-x`, de spécificité (0,2,1). Le
   préfixe place nos règles à (0,2,1) ou plus, et comme ce fichier
   est chargé après, elles l'emportent — sans recourir à
   !important. Le préfixe pourra être retiré quand l'ancien thème
   aura été supprimé (étape 3).
   ================================================================ */


/* ----------------------------------------------------------------
   0. MISE EN PAGE DES PRIMITIVES
   Ces blocs définissaient aussi leur mise en page dans l'ancien thème.
   Comme ils y sont désormais supprimés (doublon), les propriétés de
   structure sont reprises ici — sans quoi les boutons perdraient leur
   padding et passeraient en display:block (pleine largeur).
   ---------------------------------------------------------------- */
html[data-theme] .mp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

html[data-theme] .mp-btn-primary,
html[data-theme] .mp-btn-gold,
html[data-theme] .mp-btn-outline,
html[data-theme] .mp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

html[data-theme] .mp-btn-gold,
html[data-theme] .mp-btn-outline {
  height: 38px;
  padding: 0 var(--space-4);
  font-size: 0.8125rem;
}

html[data-theme] .mp-btn-ghost {
  height: 34px;
  padding: 0 var(--space-3);
}

html[data-theme] .mp-widget {
  padding: var(--space-6);
}

html[data-theme] .mp-form-group {
  margin-bottom: var(--space-4);
}

html[data-theme] .mp-form-control {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.4;
}

html[data-theme] .mp-form-select {
  padding-right: var(--space-8);
}

/* ----------------------------------------------------------------
   1. TYPOGRAPHIE
   ---------------------------------------------------------------- */
html[data-theme] .mp-heading {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

html[data-theme] .mp-heading .mp-gold-text,
html[data-theme] .mp-gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-text);
  /* Le scintillement permanent est retiré. */
  animation: none;
}

html[data-theme] .mp-section-title {
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  margin-bottom: var(--space-3);
}

html[data-theme] .mp-section-subtitle {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: var(--measure);
}

html[data-theme] .mp-hero-title {
  font-size: clamp(2.125rem, 4vw, 3.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-strong);
}

html[data-theme] .mp-hero-subtitle,
html[data-theme] .mp-hero-p2p-lead,
html[data-theme] .mp-form-page-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
}

html[data-theme] .mp-hero-badge,
html[data-theme] .mp-ads-hero-badge,
html[data-theme] .mp-section-badge {
  background: var(--gold-tint);
  border: 1px solid var(--gold-tint-border);
  color: var(--gold-text);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

html[data-theme] .mp-ads-hero-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

html[data-theme] .mp-ads-hero-sub,
html[data-theme] .mp-ads-search-title,
html[data-theme] .mp-ads-count,
html[data-theme] .mp-ads-last-update {
  color: var(--text-muted);
}

html[data-theme] .mp-form-page-meta {
  color: var(--text-faint);
  font-size: 0.8125rem;
}

/* Lien en ligne dans les écrans de connexion et d'inscription : le vert
   de marque remplace l'or clair, illisible sur fond clair (2,42:1). */
html[data-theme] .mp-auth-inline-link {
  color: var(--brand-text);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-auth-inline-link:hover {
  color: var(--brand-text-strong);
  text-decoration: underline;
}

html[data-theme] .mp-auth-link {
  margin-top: var(--space-5);
  font-size: 0.875rem;
  color: var(--text-muted);
}

html[data-theme] .mp-auth-link a {
  color: var(--brand-text);
  font-weight: 500;
}

html[data-theme] .mp-auth-divider {
  color: var(--text-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ----------------------------------------------------------------
   11. HÉRITAGE DU GABARIT
   main.css fixe label / p / petits textes sur #777 (rgb 119,119,119),
   pensé pour un fond clair : sur le fond sombre ce gris ne donne que
   3,99:1. On rétablit le texte atténué du design system là où le
   gabarit l'emporte.
   ---------------------------------------------------------------- */
html[data-theme] label {
  color: var(--text-muted);
}

html[data-theme] .contact-item a,
html[data-theme] .table td,
html[data-theme] .table th {
  color: var(--text-muted);
}

html[data-theme] .text--dark,
html[data-theme] .text-muted,
html[data-theme] small.text-muted {
  color: var(--text-muted) !important;
}

/* Étiquette du sélecteur de langue : main.css la fixe en blanc, ce qui
   la rend invisible sur la pastille claire de l'en-tête. */
html[data-theme] .language_text_select {
  color: var(--text-muted);
}


/* ----------------------------------------------------------------
   2. BOUTONS
   Rayon 10px et non 100px : plus institutionnel. Remplissages
   unis, sans dégradé ni halo, et sans animation permanente.
   ---------------------------------------------------------------- */
html[data-theme] .mp-btn-primary,
html[data-theme] .mp-btn-gold,
html[data-theme] .mp-btn-outline,
html[data-theme] .mp-btn-ghost,
html[data-theme] .mp-widget-submit,
html[data-theme] .mp-hero-p2p-submit,
html[data-theme] .mp-auth-submit,
html[data-theme] .mp-p2p-load-more,
html[data-theme] .mp-ad-btn {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
  animation: none;
  transition: background-color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout),
              box-shadow var(--dur-fast) var(--ease-inout),
              transform var(--dur-fast) var(--ease-out);
}

html[data-theme] .mp-btn-primary,
html[data-theme] .mp-widget-submit,
html[data-theme] .mp-hero-p2p-submit,
html[data-theme] .mp-auth-submit {
  background: var(--brand-fill);
  border: 1px solid var(--brand-fill);
  color: var(--brand-on-fill);
}

html[data-theme] .mp-btn-primary:hover,
html[data-theme] .mp-widget-submit:hover,
html[data-theme] .mp-hero-p2p-submit:hover,
html[data-theme] .mp-auth-submit:hover {
  background: var(--brand-fill-hover);
  border-color: var(--brand-fill-hover);
  color: var(--brand-on-fill);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

html[data-theme] .mp-btn-gold {
  background: var(--gold-fill);
  border: 1px solid var(--gold-fill);
  color: var(--gold-ink);
}

html[data-theme] .mp-btn-gold:hover {
  background: var(--gold-fill-hover);
  border-color: var(--gold-fill-hover);
  color: var(--gold-ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

html[data-theme] .mp-btn-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-base);
}

html[data-theme] .mp-btn-outline:hover {
  background: var(--surface-hover);
  border-color: var(--text-faint);
  color: var(--text-strong);
  box-shadow: none;
  transform: translateY(-1px);
}

html[data-theme] .mp-btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
}

html[data-theme] .mp-btn-ghost:hover {
  background: var(--surface-inset);
  color: var(--text-strong);
}

/* Bouton d'action des annonces : neutre.
   Il portait un aplat rouge ou vert plein, et sa couleur était même
   l'inverse du badge de la ligne (le badge suit la perspective du
   preneur, le bouton celle de l'annonceur). Comme il est libellé
   « Connexion », il ne porte aucune information de sens : le badge et le
   filet latéral s'en chargent. Le remplissage n'apparaît qu'au survol. */
html[data-theme] .mp-ad-btn,
html[data-theme] .mp-ad-btn--buy,
html[data-theme] .mp-ad-btn--sell {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  color: var(--text-base);
}

html[data-theme] .mp-ad-btn:hover,
html[data-theme] .mp-ad-btn--buy:hover,
html[data-theme] .mp-ad-btn--sell:hover {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: var(--brand-on-fill);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

html[data-theme] .mp-ad-btn--muted,
html[data-theme] .mp-ad-btn--restricted {
  background: var(--surface-inset);
  border-color: var(--border-base);
  color: var(--text-muted);
}

html[data-theme] .mp-ad-btn__code,
html[data-theme] .mp-ad-btn__stack {
  font-size: 0.6875rem;
  font-weight: 500;
  opacity: 1;
  color: currentColor;
}

html[data-theme] .mp-ads-refresh-btn,
html[data-theme] .mp-scroll-top {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
}

html[data-theme] .mp-ads-refresh-btn:hover,
html[data-theme] .mp-scroll-top:hover {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: var(--brand-on-fill);
}

/* Pagination */
html[data-theme] .mp-p2p-page-btn,
html[data-theme] .mp-p2p-page-number {
  background: var(--surface-card);
  border: 1px solid var(--border-base);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

html[data-theme] .mp-p2p-page-btn:hover:not(:disabled),
html[data-theme] .mp-p2p-page-number:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

html[data-theme] .mp-p2p-page-number.active,
html[data-theme] .mp-p2p-page-number[aria-current] {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: var(--brand-on-fill);
  font-weight: 600;
}


/* ----------------------------------------------------------------
   3. CARTES ET SURFACES
   Une bordure neutre fine, une ombre discrète. La bordure or au
   survol est supprimée : l'or perdait sa valeur d'accent.
   ---------------------------------------------------------------- */
html[data-theme] .mp-card,
html[data-theme] .mp-card-glass,
html[data-theme] .mp-widget,
html[data-theme] .mp-stat-item,
html[data-theme] .mp-stat-card,
html[data-theme] .mp-product-card,
html[data-theme] .mp-choose-card,
html[data-theme] .mp-step-card,
html[data-theme] .mp-testimonial-card,
html[data-theme] .mp-ads-search-card,
html[data-theme] .mp-p2p-table-wrap,
html[data-theme] .mp-p2p-safety__card,
html[data-theme] .mp-hero-p2p-modal__panel,
html[data-theme] .mp-pwa-install-banner {
  background: var(--surface-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xl);
  /* Le flou d'arrière-plan rendait les surfaces laiteuses et coûte
     cher sur mobile : remplacé par une surface opaque. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-base) var(--ease-inout),
              box-shadow var(--dur-base) var(--ease-inout),
              transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-inout);
}

html[data-theme] .mp-card:hover,
html[data-theme] .mp-widget:hover,
html[data-theme] .mp-stat-item:hover,
html[data-theme] .mp-stat-card:hover,
html[data-theme] .mp-product-card:hover,
html[data-theme] .mp-choose-card:hover,
html[data-theme] .mp-step-card:hover,
html[data-theme] .mp-testimonial-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

html[data-theme] .mp-p2p-table-wrap:hover,
html[data-theme] .mp-ads-search-card:hover,
html[data-theme] .mp-p2p-safety__card:hover,
html[data-theme] .mp-hero-p2p-modal__panel:hover {
  transform: none;
}

/* Les cartes de section très arrondies du gabarit d'origine */
html[data-theme] .mp-choose-card {
  border-width: 1px;
}

html[data-theme] .mp-product-card,
html[data-theme] .mp-step-card {
  border-radius: var(--radius-lg);
}


/* ----------------------------------------------------------------
   4. FORMULAIRES
   Bordure de champ à 3:1 (WCAG 1.4.11), anneau de focus vert, plus
   de bordure rouge ou verte sur les champs de montant.
   ---------------------------------------------------------------- */
html[data-theme] .mp-form-label,
html[data-theme] .mp-ads-field label,
html[data-theme] .mp-hero-p2p-label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text-muted);
}

html[data-theme] .mp-form-control,
html[data-theme] .mp-ads-input,
html[data-theme] .mp-ads-select,
html[data-theme] .mp-hero-p2p-field,
html[data-theme] .mp-hero-p2p-amount-wrap,
html[data-theme] .mp-hero-p2p-trigger,
html[data-theme] .mp-hero-p2p-modal__search,
html[data-theme] .mp-widget .form-control,
html[data-theme] .mp-widget .form-select {
  background: var(--surface-card);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  color: var(--text-base);
  font-family: var(--font-sans);
  box-shadow: none;
}

html[data-theme] .mp-form-control::placeholder,
html[data-theme] .mp-ads-input::placeholder,
html[data-theme] .mp-hero-p2p-modal__search::placeholder,
html[data-theme] .mp-widget .form-control::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

html[data-theme] .mp-form-control:focus,
html[data-theme] .mp-ads-input:focus,
html[data-theme] .mp-ads-select:focus,
html[data-theme] .mp-hero-p2p-field:focus-within,
html[data-theme] .mp-hero-p2p-amount-wrap:focus-within,
html[data-theme] .mp-widget .form-control:focus,
html[data-theme] .mp-widget .form-select:focus {
  outline: none;
  border-color: var(--brand-text);
  box-shadow: var(--focus-ring);
  background: var(--surface-card);
}

/* Le select2 du gabarit suit la même peau */
html[data-theme] .select2-container--default .select2-selection--single,
html[data-theme] .mp-widget .select2-container--default .select2-selection--single {
  background: var(--surface-card);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  color: var(--text-base);
}

html[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme] .mp-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-base);
}

html[data-theme] .select2-dropdown {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--brand-fill);
  color: var(--brand-on-fill);
}

html[data-theme] .mp-form-hint,
html[data-theme] .mp-hero-p2p-optional {
  color: var(--text-faint);
  font-size: 0.75rem;
}

/* Cases et libellés associés */
html[data-theme] .mp-checkbox-label {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Bascule Acheter / Vendre / Tout du widget P2P : l'état actif est
   plein mais désaturé, et le rouge n'est plus un aplat vif. */
html[data-theme] .mp-hero-p2p-toggle {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
}

html[data-theme] .mp-hero-p2p-toggle-btn {
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

html[data-theme] .mp-hero-p2p-toggle-btn.active.mp-hero-p2p-toggle-btn--buy {
  background: var(--brand-fill);
  color: var(--brand-on-fill);
}

html[data-theme] .mp-hero-p2p-toggle-btn.active.mp-hero-p2p-toggle-btn--sell {
  background: var(--danger-fill);
  color: #fff;
}

html[data-theme] .mp-hero-p2p-toggle-btn.active.mp-hero-p2p-toggle-btn--all {
  background: var(--surface-card);
  color: var(--text-strong);
  border: 1px solid var(--border-strong);
  font-weight: 600;
}

html[data-theme] .p2pm-toggle-btn.active,
html[data-theme] .p2pm-toggle-buy.active,
html[data-theme] .p2pm-toggle-sell.active,
html[data-theme] .p2pm-toggle-all.active {
  color: var(--brand-on-fill);
}

html[data-theme] #p2pm-widget .p2pm-toggle-buy.active { background: var(--brand-fill); color: #fff; }
html[data-theme] #p2pm-widget .p2pm-toggle-sell.active { background: var(--danger-fill); color: #fff; }
html[data-theme] #p2pm-widget .p2pm-toggle-all.active  { background: var(--surface-card); color: var(--text-strong); }


/* ----------------------------------------------------------------
   5. BADGES ET ÉTIQUETTES
   Trois canaux : fond à 12 %, bordure à 26 %, texte saturé.
   ---------------------------------------------------------------- */
html[data-theme] .mp-tag {
  background: var(--gold-tint);
  border: 1px solid var(--gold-tint-border);
  color: var(--gold-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
}

html[data-theme] .mp-tag::before {
  background: var(--gold-fill);
  animation: none;
}

html[data-theme] .mp-ads-type-badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

html[data-theme] .mp-ads-type-badge--buy,
html[data-theme] .mp-p2p-kind--buy {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  color: var(--brand-text);
}

html[data-theme] .mp-ads-type-badge--sell,
html[data-theme] .mp-p2p-kind--sell {
  background: var(--danger-tint);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
}

html[data-theme] .mp-p2p-kind {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.6875rem;
}

html[data-theme] .mp-ad-source-badge {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.625rem;
}

html[data-theme] .mp-ad-source-badge--express {
  background: var(--info-tint);
  border-color: var(--info-border);
  color: var(--info-text);
}

html[data-theme] .mp-p2p-trust,
html[data-theme] .mp-p2p-crypto-ribbon {
  background: var(--info-tint);
  border: 1px solid var(--info-border);
  color: var(--info-text);
  border-radius: var(--radius-pill);
}

html[data-theme] .mp-p2p-kyc {
  color: var(--text-faint);
  font-size: 0.6875rem;
}

html[data-theme] .mp-ads-live-badge {
  background: var(--ok-tint);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

html[data-theme] .mp-live-dot {
  background: var(--ok-text);
  /* La pulsation infinie est retirée. */
  animation: none;
  box-shadow: none;
}

html[data-theme] .mp-stars,
html[data-theme] .mp-stars i {
  color: var(--gold-text);
}


/* ----------------------------------------------------------------
   6. TABLEAU DU MARCHÉ P2P
   En-tête neutre, séparateurs neutres, sens de la ligne porté par un
   filet latéral de 3px. Plus de fond teinté par ligne.
   ---------------------------------------------------------------- */
html[data-theme] .mp-p2p-table-head {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-base);
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-theme] .mp-p2p-row {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-p2p-row:hover,
html[data-theme] .mp-p2p-row--clickable:hover {
  background: var(--surface-hover);
}

html[data-theme] .mp-p2p-row--buy {
  box-shadow: inset 3px 0 0 var(--ok-text);
}

html[data-theme] .mp-p2p-row--sell {
  box-shadow: inset 3px 0 0 var(--danger-text);
}

html[data-theme] .mp-p2p-row--own {
  background: var(--surface-subtle);
}

html[data-theme] .mp-p2p-trader-top,
html[data-theme] .mp-p2p-trader-meta,
html[data-theme] .mp-p2p-limit-label,
html[data-theme] .mp-p2p-price-meta,
html[data-theme] .mp-p2p-price-unit,
html[data-theme] .mp-p2p-limit-line {
  color: var(--text-faint);
  font-size: 0.75rem;
}

html[data-theme] .mp-p2p-price {
  color: var(--text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

html[data-theme] .mp-p2p-pay-name,
html[data-theme] .mp-p2p-pay-bar {
  color: var(--text-base);
  font-weight: 500;
}

html[data-theme] .mp-p2p-crypto-chip {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  color: var(--text-base);
  border-radius: var(--radius-pill);
}

html[data-theme] .mp-ad-username {
  color: var(--text-strong);
  font-weight: 500;
}

html[data-theme] .mp-ad-avatar {
  border: 1px solid var(--border-base);
}

html[data-theme] .mp-ad-empty-full,
html[data-theme] .mp-ad-empty {
  color: var(--text-muted);
}

html[data-theme] .mp-ad-empty-icon {
  color: var(--text-faint);
}

html[data-theme] .p2pm-spinner,
html[data-theme] .mp-ads-spinner {
  color: var(--brand-text);
}


/* ----------------------------------------------------------------
   7. ONGLETS ET SEGMENTS
   ---------------------------------------------------------------- */
html[data-theme] .mp-tab-nav {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
}

html[data-theme] .mp-tab-btn {
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-tab-btn:hover {
  color: var(--text-strong);
}

html[data-theme] .mp-tab-btn.active,
html[data-theme] .mp-tab-btn[aria-selected="true"] {
  background: var(--surface-card);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}

html[data-theme] .mp-ads-toolbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-base);
}

html[data-theme] .mp-ads-search-wrap,
html[data-theme] .mp-ads-search-grid {
  background: transparent;
}

html[data-theme] .mp-ads-section {
  border-bottom: 1px solid var(--border-subtle);
}

html[data-theme] .mp-p2p-sort-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}

html[data-theme] .mp-p2p-pagination {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

html[data-theme] .p2pm-toolbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-base);
}


/* ----------------------------------------------------------------
   8. EN-TÊTE ET NAVIGATION
   Blur uniquement une fois la page défilée.
   ---------------------------------------------------------------- */
html[data-theme] .mp-header {
  background: var(--surface-page);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-inout),
              border-color var(--dur-base) var(--ease-inout),
              box-shadow var(--dur-base) var(--ease-inout);
}

html[data-theme] .mp-header.scrolled {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-base);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme] .mp-nav > li > a,
html[data-theme] .mp-nav a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  transition: color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-nav > li > a:hover,
html[data-theme] .mp-nav > li.active > a,
html[data-theme] .mp-nav a:hover {
  color: var(--brand-text);
}

html[data-theme] .mp-nav > li.active > a,
html[data-theme] .mp-nav > li > a:hover {
  background: transparent;
}

html[data-theme] .mp-nav-icon {
  color: currentColor;
  opacity: 0.9;
}

html[data-theme] .mp-nav > li.active > a::before,
html[data-theme] .mp-nav > li > a::after {
  background: var(--brand-fill);
}

html[data-theme] .mp-dropdown {
  background: var(--surface-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

html[data-theme] .mp-dropdown li a {
  color: var(--text-muted);
}

html[data-theme] .mp-dropdown li a:hover {
  background: var(--surface-hover);
  color: var(--text-strong);
}

html[data-theme] .mp-lang-btn {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
}

html[data-theme] .mp-lang-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
}

/* Sélecteur de thème : piste neutre, pouce blanc. Le pouce doré
   lumineux est remplacé. */
html[data-theme] .mp-theme-track {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
}

html[data-theme] .mp-theme-thumb {
  background: var(--surface-card);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-base);
}

html[data-theme] .mp-icon-sun,
html[data-theme] .mp-icon-moon {
  color: var(--text-faint);
}

html[data-theme="light"] .mp-icon-sun { color: var(--gold-text); opacity: 1; }
html[data-theme="light"] .mp-icon-moon { opacity: 0.45; }
html[data-theme="dark"]  .mp-icon-moon { color: var(--text-base); opacity: 1; }
html[data-theme="dark"]  .mp-icon-sun  { opacity: 0.45; }

html[data-theme] .mp-hamburger span {
  background: var(--text-base);
}

html[data-theme] .mp-drawer-overlay {
  background: rgba(16, 24, 40, 0.42);
}

html[data-theme="dark"] .mp-drawer-overlay {
  background: rgba(0, 0, 0, 0.6);
}

html[data-theme] .mp-drawer-header {
  border-bottom: 1px solid var(--border-base);
}

html[data-theme] .mp-drawer-close {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

html[data-theme] .mp-header .mp-nav > li.menu_has_children .mp-dropdown {
  background: var(--surface-card);
  border: 1px solid var(--border-base);
}


/* ----------------------------------------------------------------
   9. PIED DE PAGE
   ---------------------------------------------------------------- */
html[data-theme] .mp-footer {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-base);
}

html[data-theme] .mp-footer-desc,
html[data-theme] .mp-footer-contact-static,
html[data-theme] .mp-copyright {
  color: var(--text-muted);
  font-size: 0.875rem;
}

html[data-theme] .mp-footer-col-title {
  color: var(--text-strong);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-theme] .mp-footer-links a,
html[data-theme] .mp-policy-links a,
html[data-theme] .mp-footer-contact a {
  color: var(--text-muted);
  font-size: 0.875rem;
  transition: color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-footer-links a:hover,
html[data-theme] .mp-policy-links a:hover,
html[data-theme] .mp-footer-contact a:hover {
  color: var(--brand-text);
}

html[data-theme] .mp-social-link {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout),
              border-color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-social-link:hover {
  background: var(--brand-fill);
  border-color: var(--brand-fill);
  color: var(--brand-on-fill);
}

html[data-theme] .mp-footer-bottom {
  border-top: 1px solid var(--border-base);
}


/* ----------------------------------------------------------------
   10. DIVERS
   ---------------------------------------------------------------- */
html[data-theme] .mp-preloader {
  background: var(--surface-page);
}

html[data-theme] .mp-preloader-bar {
  background: linear-gradient(90deg, var(--brand-fill), var(--gold-fill));
}

html[data-theme] .mp-hero {
  background: var(--surface-page);
}

html[data-theme] .mp-site-main {
  background: var(--surface-page);
}

html[data-theme] .mp-section {
  background: transparent;
}

html[data-theme] .mp-section-header {
  border-bottom: none;
}

/* Bandeau d'installation PWA */
html[data-theme] .mp-pwa-install-banner__title,
html[data-theme] .mp-pwa-appbar__title {
  color: var(--text-strong);
  font-weight: 600;
}

html[data-theme] .mp-pwa-install-banner__text,
html[data-theme] .mp-pwa-install-banner__steps {
  color: var(--text-muted);
}

html[data-theme] .mp-pwa-install-banner__btn {
  border-radius: var(--radius-md);
  font-weight: 500;
}

html[data-theme] .mp-pwa-install-banner__btn--primary {
  background: var(--brand-fill);
  border: 1px solid var(--brand-fill);
  color: var(--brand-on-fill);
}

html[data-theme] .mp-pwa-install-banner__btn--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

html[data-theme] .mp-pwa-install-banner__icon {
  background: var(--brand-tint);
  color: var(--brand-text);
  border-radius: var(--radius-sm);
}

html[data-theme] .mp-pwa-appbar {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-base);
}

html[data-theme] .mp-pwa-tabbar {
  background: var(--surface-page);
  border-top: 1px solid var(--border-base);
}

html[data-theme] .mp-pwa-tabbar__link {
  color: var(--text-faint);
}

html[data-theme] .mp-pwa-tabbar__item--active .mp-pwa-tabbar__link,
html[data-theme] .mp-pwa-tabbar__link.active {
  color: var(--brand-text);
}

html[data-theme] .mp-pwa-tabbar__label {
  font-size: 0.625rem;
  font-weight: 500;
}

html[data-theme] .mp-pwa-drawer {
  background: var(--surface-card);
}

html[data-theme] .mp-pwa-drawer-backdrop {
  background: rgba(16, 24, 40, 0.42);
}

html[data-theme="dark"] .mp-pwa-drawer-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

html[data-theme] .mp-pwa-drawer__section-title {
  color: var(--text-faint);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-theme] .mp-pwa-drawer__link {
  color: var(--text-muted);
}

html[data-theme] .mp-pwa-drawer__meta {
  border-top: 1px solid var(--border-base);
}

/* Encadré de sécurité P2P : la mise en page reste, la peinture suit
   les tokens. */
html[data-theme] .mp-p2p-safety__title {
  color: var(--text-strong);
  font-weight: 600;
}

html[data-theme] .mp-p2p-safety__subtitle,
html[data-theme] .mp-p2p-safety__text,
html[data-theme] .mp-p2p-safety__tips {
  color: var(--text-muted);
}

html[data-theme] .mp-p2p-safety__backdrop,
html[data-theme] .mp-hero-p2p-modal__backdrop {
  background: rgba(16, 24, 40, 0.45);
}

html[data-theme="dark"] .mp-p2p-safety__backdrop,
html[data-theme="dark"] .mp-hero-p2p-modal__backdrop {
  background: rgba(0, 0, 0, 0.62);
}

html[data-theme] .mp-p2p-safety__cta {
  background: var(--brand-fill);
  border: 1px solid var(--brand-fill);
  color: var(--brand-on-fill);
  border-radius: var(--radius-md);
  font-weight: 500;
}

html[data-theme] .mp-p2p-safety__close,
html[data-theme] .mp-hero-p2p-modal__close {
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

html[data-theme] .mp-p2p-safety__header,
html[data-theme] .mp-hero-p2p-modal__header {
  border-bottom: 1px solid var(--border-base);
}

html[data-theme] .mp-p2p-safety__footer {
  border-top: 1px solid var(--border-base);
}

html[data-theme] .mp-hero-p2p-modal__title {
  color: var(--text-strong);
  font-weight: 600;
}

/* Sélection d'actif du widget */
html[data-theme] .mp-hero-p2p-opt,
html[data-theme] .p2pm-opt,
html[data-theme] .p2pm-gw-opt {
  background: var(--surface-card);
  border: 1px solid var(--border-base);
  color: var(--text-muted);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-inout),
              background-color var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
}

html[data-theme] .mp-hero-p2p-opt:hover,
html[data-theme] .p2pm-opt:hover,
html[data-theme] .p2pm-gw-opt:hover {
  border-color: var(--border-strong);
  color: var(--text-strong);
}

html[data-theme] .mp-hero-p2p-opt--active,
html[data-theme] .p2pm-opt--active,
html[data-theme] .p2pm-gw-opt--active {
  border-color: var(--brand-text);
  background: var(--brand-tint);
  color: var(--brand-text);
  font-weight: 600;
}

html[data-theme] .mp-hero-p2p-opt-name,
html[data-theme] .mp-hero-p2p-opt-code,
html[data-theme] .mp-hero-p2p-trigger-text {
  color: var(--text-base);
}

html[data-theme] .p2pm-for-lbl,
html[data-theme] .mp-hero-p2p-amount-currency {
  color: var(--text-muted);
  font-weight: 500;
}

/* Champs de recherche internes au marché */
html[data-theme] .p2pm-drop-search input,
html[data-theme] .p2pm-gw-search input {
  background: var(--surface-card);
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  color: var(--text-base);
}

html[data-theme] .p2pm-caret {
  color: var(--text-faint);
}