/*
 * Charte D3DIA / DuoLocal — socle visuel global
 * Fond officiel D3DIA : #DBDBD3
 * Chargé après les bundles afin de centraliser les choix de marque.
 */

:root {
    --d3dia-bg: #DBDBD3;
    --d3dia-surface: #FFFFFF;
    --d3dia-surface-soft: #F5F5F1;
    --d3dia-text: #2D2D2D;
    --d3dia-text-muted: #686863;
    --d3dia-border: #C9C9C2;
    --d3dia-shadow: 0 12px 32px rgba(45, 45, 45, .09);
    --d3dia-shadow-soft: 0 7px 20px rgba(45, 45, 45, .07);
    --d3dia-radius-sm: 14px;
    --d3dia-radius: 20px;
    --d3dia-radius-lg: 28px;

    /* Compatibilité avec les composants existants. */
    --background: var(--d3dia-bg);
    --surface: var(--d3dia-surface);
    --text: var(--d3dia-text);
    --text-light: var(--d3dia-text-muted);
    --border: var(--d3dia-border);
    --shadow-small: var(--d3dia-shadow-soft);
    --shadow: var(--d3dia-shadow);
}

html {
    background: var(--d3dia-bg);
}

body,
body.admin-page,
body[class*="admin"] {
    background-color: var(--d3dia-bg);
}

/* Les zones principales héritent du fond officiel sans écraser les héros
   et panneaux qui possèdent volontairement leur propre univers graphique. */
main,
#main-content,
.site-main,
.page-shell,
.admin-main,
.admin-content {
    --page-background: var(--d3dia-bg);
}

/* Socle commun des surfaces de contenu. Les sélecteurs restent volontairement
   génériques et sans !important afin de préserver les cartes thématiques. */
.card,
.panel,
.content-card,
.admin-card,
.form-card,
.dashboard-card,
.module-card {
    border-color: color-mix(in srgb, var(--d3dia-border) 78%, transparent);
}

/* Repli pour les navigateurs ne prenant pas encore color-mix en charge. */
@supports not (border-color: color-mix(in srgb, #000 50%, transparent)) {
    .card,
    .panel,
    .content-card,
    .admin-card,
    .form-card,
    .dashboard-card,
    .module-card {
        border-color: var(--d3dia-border);
    }
}

::selection {
    background: rgba(123, 45, 67, .20);
    color: var(--d3dia-text);
}

/* PATCH 215 — navigation membre mobile + fluidité Radio du Monde */
@media (max-width: 1120px) {
  body:not(.admin-page) .site-nav-v4.is-open {
    max-height: calc(100dvh - var(--p4-header-height, 84px) - 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 12px;
    padding-bottom: 28px;
  }

  body:not(.admin-page) .member-nav-dropdown[open] > .nav-dropdown-panel {
    position: static !important;
    inset: auto !important;
    width: calc(100% - 14px) !important;
    max-height: none !important;
    margin: 8px 0 10px 14px !important;
    padding: 8px !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body:not(.admin-page) .member-nav-dropdown[open] > .nav-dropdown-panel > a:first-child {
    display: flex !important;
    min-height: 46px;
    margin-top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Sur téléphone, les halos, flous et animations de dizaines de points radio
   sollicitent fortement le GPU pendant le défilement. On garde le design,
   mais on retire uniquement les effets coûteux sur petit écran. */
@media (max-width: 760px) {
  .page-radio .radio-world-hero,
  .page-radio .radio-world-toolbar,
  .page-radio .radio-world-map-card,
  .page-radio .radio-player-card,
  .page-radio .radio-world-results,
  .page-radio .radio-station-card,
  .page-radio .duo-radio-dock {
    box-shadow: 0 6px 18px rgba(31, 18, 24, .08) !important;
  }

  .page-radio .radio-world-plan,
  .page-radio .duo-radio-dock {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .page-radio .radio-glow-point,
  .page-radio .radio-map-marker,
  .page-radio .radio-map-legend i,
  .page-radio .radio-player-signal i,
  .page-radio .radio-player-tuner span {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  .page-radio .radio-station-card {
    content-visibility: auto;
    contain-intrinsic-size: 86px;
    transform: none !important;
    transition: none !important;
  }

  .page-radio .leaflet-marker-icon,
  .page-radio .leaflet-marker-shadow,
  .page-radio .leaflet-pane {
    filter: none !important;
  }
}