/* ══════════════════════════════════════════════════════════════════
   DMMD PWA v2.0 — Refonte "Native App"
   Inspiré du modèle Playfair + Lato, palette violet mystique
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Palette principale */
  --purple:     #7b5ea7;
  --purple-dk:  #5a3f80;
  --purple-lt:  #f0ebfa;
  --purple-2:   #a678d4;

  /* Accents */
  --teal:       #4a9e8a;
  --teal-lt:    #e6f7f4;
  --gold:       #d4952a;
  --gold-lt:    #fef8ee;
  --green:      #4a9e6b;
  --green-lt:   #edfaf5;
  --red:        #c0392b;
  --red-lt:     #fff0ee;

  /* Surfaces */
  --bg:         #f5f0fe;
  --card:       #ffffff;
  --text:       #2d2240;
  --text-lt:    #7a6e8a;
  --border:     #e2d9f3;

  /* Layout PWA */
  --pwa-header-h:  72px;
  --pwa-nav-h:     72px;
  --radius:        16px;
  --radius-sm:     12px;
  --shadow:        0 4px 20px rgba(123,94,167,.10);
  --shadow-lg:     0 8px 32px rgba(123,94,167,.18);

  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ── Reset PWA mode ─────────────────────────────────────────────── */
.pwa-mode, .pwa-mode * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

.pwa-mode {
  background: var(--bg) !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.pwa-html, body.pwa-mode { width: 100%; max-width: 100vw; }

/* Masquer le chrome WordPress */
.pwa-mode .site-header,
.pwa-mode .site-footer,
.pwa-mode #wpadminbar,
.pwa-mode .entry-header,
.pwa-mode .page-header,
.pwa-mode nav.main-navigation,
.pwa-mode .widget-area,
.pwa-mode .breadcrumbs,
.pwa-mode .responsive-nav,
.pwa-mode footer { display: none !important; }

.pwa-mode #page,
.pwa-mode #content,
.pwa-mode .site-content,
.pwa-mode main,
.pwa-mode article,
.pwa-mode .entry-content,
.pwa-mode .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER — dégradé violet + cercles décoratifs mystiques
   ══════════════════════════════════════════════════════════════════ */
#dmmd-pwa-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--pwa-header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  padding-left: calc(22px + env(safe-area-inset-left, 0px));
  padding-right: calc(22px + env(safe-area-inset-right, 0px));
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  box-shadow: 0 4px 24px rgba(123,94,167,.30);
  overflow: hidden;
}

/* Cercles décoratifs en arrière-plan du header */
#dmmd-pwa-header::before,
#dmmd-pwa-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
#dmmd-pwa-header::before {
  width: 160px; height: 160px;
  top: -60px; right: -40px;
}
#dmmd-pwa-header::after {
  width: 100px; height: 100px;
  bottom: -40px; left: 30%;
  background: rgba(255,255,255,.06);
}

.pwa-header-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
  z-index: 1;
}
.pwa-header-logo .title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .01em;
}
.pwa-header-logo .sub {
  font-family: 'Lato', sans-serif;
  font-size: 11px;
  opacity: 0.85;
  font-weight: 300;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pwa-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}

.pwa-sub-badge {
  background: rgba(255,255,255,0.22);
  color: white;
  font-size: 10px;
  font-family: 'Lato', sans-serif;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.35);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.pwa-header-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.20);
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.pwa-header-avatar:active {
  background: rgba(255,255,255,0.35);
  transform: scale(.95);
}

/* ══════════════════════════════════════════════════════════════════
   ZONE DE CONTENU
   ══════════════════════════════════════════════════════════════════ */
#dmmd-pwa-content {
  padding-top: calc(var(--pwa-header-h) + var(--safe-top) + 20px);
  padding-bottom: calc(var(--pwa-nav-h) + var(--safe-bottom) + 24px);
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
  min-height: 100vh;
  min-height: 100dvh;
  animation: fadeUp .35s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — titres en Playfair Display
   ══════════════════════════════════════════════════════════════════ */
.pwa-mode h1, .pwa-mode h2, .pwa-mode .dmmd-h-title,
.pwa-mode .dmmd-auth-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--purple);
  letter-spacing: .01em;
}

.pwa-mode h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--purple-dk);
}

/* ══════════════════════════════════════════════════════════════════
   CARDS — composant unifié pour formulaires + sections
   ══════════════════════════════════════════════════════════════════ */
.pwa-mode .dmmd-app {
  max-width: 680px !important;
  margin: 0 auto !important;
}

.pwa-mode .dmmd-header { display: none !important; }

.pwa-mode .dmmd-form,
.pwa-mode .dmmd-section,
.pwa-mode .dmmd-plan,
.pwa-mode .dmmd-journal-entry,
.pwa-mode .dmmd-history-item,
.pwa-mode .dmmd-account-section,
.pwa-mode .dmmd-auth-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  border: 1px solid var(--border);
  animation: fadeUp .4s ease both;
}

/* Labels uppercase comme dans le modèle */
.pwa-mode .dmmd-form label,
.pwa-mode .dmmd-auth-label span {
  font-family: 'Lato', sans-serif;
  color: var(--purple);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* Inputs */
.pwa-mode .dmmd-form select,
.pwa-mode .dmmd-form textarea,
.pwa-mode .dmmd-form input[type=text],
.pwa-mode .dmmd-form input[type=email],
.pwa-mode .dmmd-form input[type=password] {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s;
  background: var(--card);
  color: var(--text);
  -webkit-appearance: none;
}

.pwa-mode .dmmd-form select:focus,
.pwa-mode .dmmd-form textarea:focus,
.pwa-mode .dmmd-form input:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(123,94,167,.12);
}

.pwa-mode .dmmd-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════
   BOUTONS — pill, premium
   ══════════════════════════════════════════════════════════════════ */
.pwa-mode .dmmd-btn {
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: 30px;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 14px 32px;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  display: inline-block;
  touch-action: manipulation;
  box-shadow: 0 4px 14px rgba(123,94,167,.30);
}

.pwa-mode .dmmd-btn:hover { background: var(--purple-dk); }
.pwa-mode .dmmd-btn:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(123,94,167,.25); }

.pwa-mode .dmmd-btn--outline {
  background: transparent;
  border: 1.5px solid var(--purple);
  color: var(--purple);
  box-shadow: none;
}
.pwa-mode .dmmd-btn--outline:active { background: var(--purple-lt); }

.pwa-mode .dmmd-btn--sm { padding: 10px 22px; font-size: 13px; }

.pwa-mode .dmmd-btn--logout {
  background: transparent;
  border: 1.5px solid var(--red);
  color: var(--red);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════
   SECTIONS RÉSULTAT — colorées par catégorie
   ══════════════════════════════════════════════════════════════════ */
.pwa-mode .dmmd-section {
  border-left: 4px solid var(--purple);
}
.pwa-mode .dmmd-section h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.pwa-mode .dmmd-section p,
.pwa-mode .dmmd-section li {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
}
.pwa-mode .dmmd-section ul { margin: 0; padding-left: 20px; }

.pwa-mode .dmmd-section--teal   { border-left-color: var(--teal); background: linear-gradient(135deg, var(--card), var(--teal-lt) 200%); }
.pwa-mode .dmmd-section--gold   { border-left-color: var(--gold); background: linear-gradient(135deg, var(--card), var(--gold-lt) 200%); }
.pwa-mode .dmmd-section--green  { border-left-color: var(--green); background: linear-gradient(135deg, var(--card), var(--green-lt) 200%); }
.pwa-mode .dmmd-section--purple { border-left-color: var(--purple); background: linear-gradient(135deg, var(--purple-lt), #ede5fa); }
.pwa-mode .dmmd-section--purple h3 { color: var(--purple-dk); }

/* Message + disclaimer + affirmation */
.pwa-mode .dmmd-message {
  background: var(--purple-lt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.75;
  margin-bottom: 14px;
  color: var(--purple-dk);
  font-family: 'Playfair Display', Georgia, serif;
}

.pwa-mode .dmmd-disclaimer {
  background: var(--gold-lt);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 12.5px;
  color: #6b5320;
  margin-bottom: 16px;
  line-height: 1.5;
}

.pwa-mode .dmmd-affirmation {
  background: linear-gradient(135deg, var(--green-lt) 0%, #d9f0e4 100%);
  border: 1.5px solid var(--green);
  border-radius: var(--radius);
  padding: 20px;
  margin: 18px 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(74,158,107,.15);
}
.pwa-mode .dmmd-affirmation-icon { font-size: 2rem; flex-shrink: 0; }
.pwa-mode .dmmd-affirmation p {
  font-size: 1rem;
  font-style: italic;
  color: #2d6b47;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  font-family: 'Playfair Display', serif;
}

/* Spécialités — scroll horizontal */
.pwa-mode .dmmd-specialties {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.pwa-mode .dmmd-specialties::-webkit-scrollbar { display: none; }

.pwa-mode .dmmd-spec-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--card);
  transition: all .2s;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  min-width: 84px;
  flex-shrink: 0;
  color: var(--text-lt);
  scroll-snap-align: start;
  font-family: 'Lato', sans-serif;
  touch-action: manipulation;
}
.pwa-mode .dmmd-spec-btn span.icon { font-size: 24px; }
.pwa-mode .dmmd-spec-btn.active,
.pwa-mode .dmmd-spec-btn:active {
  border-color: var(--purple);
  background: var(--purple-lt);
  color: var(--purple);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════════
   PLANS / ABONNEMENTS
   ══════════════════════════════════════════════════════════════════ */
.pwa-mode .dmmd-plan {
  text-align: center;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
}
.pwa-mode .dmmd-plan:active { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pwa-mode .dmmd-plan--featured {
  border: 2px solid var(--purple);
  background: linear-gradient(135deg, var(--card), var(--purple-lt) 200%);
}
.pwa-mode .dmmd-plan .price  {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--purple);
}
.pwa-mode .dmmd-plan .period { font-size: 12px; color: var(--text-lt); margin-bottom: 14px; }
.pwa-mode .dmmd-plan .label  { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }

.pwa-mode .dmmd-plans { display: flex; flex-direction: column; gap: 14px; }

/* Spinner */
.pwa-mode .dmmd-spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: dmmd-spin 1s linear infinite;
  margin: 0 auto 12px;
}

/* Notices */
.pwa-mode .dmmd-notice {
  background: var(--purple-lt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 16px;
}
.pwa-mode .dmmd-notice--info  { border-color: var(--teal); background: var(--teal-lt); color: #2a6358; }
.pwa-mode .dmmd-notice--error { border-color: var(--red); background: var(--red-lt); color: var(--red); }

/* Historique / Journal items */
.pwa-mode .dmmd-history-item,
.pwa-mode .dmmd-journal-entry {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  transition: transform .15s;
}
.pwa-mode .dmmd-history-item:active,
.pwa-mode .dmmd-journal-entry:active { transform: scale(.98); }

.pwa-mode .dmmd-history-item .symptom { font-weight: 700; color: var(--purple); font-size: 14.5px; }
.pwa-mode .dmmd-history-item .meta,
.pwa-mode .dmmd-journal-entry .date {
  font-size: 11px;
  color: var(--text-lt);
  font-family: 'Lato', sans-serif;
  letter-spacing: .03em;
}

.pwa-mode .dmmd-mood span { font-size: 24px; }

/* Section MTC + Martel — identique au modèle */
.pwa-mode .dmmd-section--mtc {
  background: linear-gradient(135deg, #f0f9f0, #e8f4f8);
  border-left: 4px solid var(--green);
}
.pwa-mode .dmmd-section--mtc h3 { color: #1a5c3a; }
.pwa-mode .dmmd-mtc-block {
  background: rgba(255,255,255,0.80);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(74,158,107,.20);
}
.pwa-mode .dmmd-mtc-block h4 {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a5c3a;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(74,158,107,.3);
}
.pwa-mode .dmmd-acup-code { background: var(--red); color: #fff; font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 4px; font-family: monospace; }
.pwa-mode .dmmd-mtc-code  { background: #5b9bd5; color: #fff; font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 4px; font-family: monospace; }

/* Actions */
.pwa-mode .dmmd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════════
   BOTTOM NAV — GLASSMORPHISM
   ══════════════════════════════════════════════════════════════════ */
#dmmd-pwa-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--pwa-nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(226,217,243,.6);
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  z-index: 9999;
  box-shadow: 0 -4px 24px rgba(123,94,167,.10);
}

.pwa-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-lt);
  text-decoration: none;
  padding: 0 4px;
  transition: color .18s, transform .18s;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.pwa-nav-item.active { color: var(--purple); }

.pwa-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 22px;
  height: 3px;
  background: var(--purple);
  border-radius: 3px;
  transform: translateX(-50%);
  animation: navUnderline .35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes navUnderline {
  from { width: 0; opacity: 0; }
  to   { width: 22px; opacity: 1; }
}

.pwa-nav-icon {
  font-size: 22px;
  line-height: 1;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pwa-nav-item.active .pwa-nav-icon { transform: scale(1.18) translateY(-2px); }

/* Bouton central "Consulter" — FAB-like */
.pwa-nav-center { position: relative; flex: 1.1; }
.pwa-nav-center .pwa-nav-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-top: -22px;
  margin-bottom: 2px;
  box-shadow: 0 6px 18px rgba(123,94,167,.45);
  border: 3px solid var(--card);
  color: #fff;
  transform: none !important;
}
.pwa-nav-center.active::after { display: none; }
.pwa-nav-center.active .pwa-nav-icon,
.pwa-nav-center:active .pwa-nav-icon {
  box-shadow: 0 8px 24px rgba(123,94,167,.6);
  background: linear-gradient(135deg, var(--purple-dk) 0%, var(--purple) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   AUTH — Tabs
   ══════════════════════════════════════════════════════════════════ */
.pwa-mode .dmmd-auth-wrap { padding: 0; }
.pwa-mode .dmmd-auth-card { padding: 0; overflow: hidden; }
.pwa-mode .dmmd-auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--purple-lt);
}
.pwa-mode .dmmd-auth-tab {
  flex: 1;
  padding: 16px;
  border: none;
  background: transparent;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-lt);
  cursor: pointer;
  transition: color .2s, background .2s;
}
.pwa-mode .dmmd-auth-tab.active {
  color: var(--purple);
  background: var(--card);
  box-shadow: inset 0 -2px 0 var(--purple);
}
.pwa-mode .dmmd-auth-card form { padding: 22px; }

.pwa-mode .dmmd-auth-title {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin: 0 0 18px;
  color: var(--purple);
}

/* ══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════════════════════ */
#dmmd-toast-container {
  position: fixed;
  top: calc(var(--pwa-header-h) + var(--safe-top) + 14px);
  left: 16px;
  right: 16px;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dmmd-toast {
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-14px);
  opacity: 0;
  transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: all;
  border-left: 4px solid var(--purple);
}
.dmmd-toast.show { transform: translateY(0); opacity: 1; }
.dmmd-toast.dmmd-toast--success { border-left-color: var(--green); }
.dmmd-toast.dmmd-toast--error   { border-left-color: var(--red); }
.dmmd-toast.dmmd-toast--warning { border-left-color: var(--gold); }
.dmmd-toast .toast-icon { font-size: 18px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   INSTALL BANNER
   ══════════════════════════════════════════════════════════════════ */
#dmmd-install-banner {
  position: fixed;
  bottom: calc(var(--pwa-nav-h) + var(--safe-bottom) + 14px);
  left: 16px; right: 16px;
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  color: white;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9997;
  box-shadow: 0 12px 36px rgba(123,94,167,.40);
  transform: translateY(130%);
  transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#dmmd-install-banner.show { transform: translateY(0); }
#dmmd-install-banner .banner-icon  { font-size: 32px; flex-shrink: 0; }
#dmmd-install-banner .banner-text  { flex: 1; }
#dmmd-install-banner .banner-text strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  margin-bottom: 3px;
  font-weight: 600;
}
#dmmd-install-banner .banner-text span {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  opacity: 0.92;
}
#dmmd-install-banner .banner-actions { display: flex; flex-direction: column; gap: 6px; }
#dmmd-install-banner button {
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
#dmmd-install-banner .btn-install { background: white; color: var(--purple); }
#dmmd-install-banner .btn-dismiss { background: rgba(255,255,255,.18); color: white; }

/* ══════════════════════════════════════════════════════════════════
   LOADER PLEIN ÉCRAN
   ══════════════════════════════════════════════════════════════════ */
#dmmd-pwa-loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
#dmmd-pwa-loader.visible { opacity: 1; pointer-events: all; }
#dmmd-pwa-loader .loader-spinner {
  width: 50px; height: 50px;
  border: 4px solid var(--border);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: dmmd-spin 1s linear infinite;
}
#dmmd-pwa-loader p {
  color: var(--text-lt);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  margin: 0;
}

/* Bannière "ouvrir en app" sur desktop */
.dmmd-pwa-open-banner {
  border-radius: var(--radius) !important;
  margin-bottom: 18px !important;
}

@keyframes dmmd-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   SPLASH — premier rendu avant injection JS
   ══════════════════════════════════════════════════════════════════ */
#dmmd-pwa-splash {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-2) 100%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
  font-family: 'Playfair Display', serif;
  transition: opacity .4s ease, visibility .4s;
}
#dmmd-pwa-splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#dmmd-pwa-splash .splash-logo {
  width: 90px; height: 90px;
  border-radius: 28px;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  box-shadow: 0 12px 36px rgba(0,0,0,.20);
  animation: splashPulse 1.6s ease-in-out infinite;
}
#dmmd-pwa-splash h1 {
  font-size: 22px; margin: 8px 0 0; font-weight: 600;
  letter-spacing: .02em;
}
#dmmd-pwa-splash p {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  opacity: .85;
  margin: 0;
  letter-spacing: .15em;
  text-transform: uppercase;
}
@keyframes splashPulse {
  0%,100% { transform: scale(1); box-shadow: 0 12px 36px rgba(0,0,0,.20); }
  50%     { transform: scale(1.06); box-shadow: 0 16px 44px rgba(0,0,0,.30); }
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE (≥ 600px) — tablette / desktop centré
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  #dmmd-pwa-content { padding-left: 28px; padding-right: 28px; }
  .pwa-mode .dmmd-app { max-width: 680px !important; margin: 0 auto !important; }
  .pwa-mode .dmmd-form { padding: 30px !important; }
  .pwa-mode .dmmd-specialties { flex-wrap: wrap; overflow-x: visible; }
  .pwa-mode .dmmd-plans { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .pwa-mode .dmmd-plan  { min-width: 200px; max-width: 240px; }
  #dmmd-install-banner { max-width: 480px; left: 50%; transform: translateX(-50%) translateY(130%); }
  #dmmd-install-banner.show { transform: translateX(-50%) translateY(0); }
}