/* ============================================================
   Diagnostic CHAMPION® — correctifs responsive mobile & tablette
   Chargé uniquement sur la page diagnostic, APRÈS main.css.
   ============================================================ */

.dgnew-page { overflow-x: clip; }
.dgnew-page *,
.dgnew-page *::before,
.dgnew-page *::after { box-sizing: border-box; }

/* ---------- Header fixe du site : ne pas masquer la barre de progression ----------
   --dg-hh = hauteur réelle du header (calculée en JS dans page-diagnostic.php).
   Tablette/desktop : header toujours visible → la barre se colle juste dessous.
   Mobile (≤768px) : main.js masque le header au scroll → la barre se colle en haut. */
.dgnew-app { padding-top: var(--dg-hh, 73px); }
.dgnew-topbar { top: var(--dg-hh, 73px); }
.dgnew-result-section { padding-top: calc(var(--dg-hh, 73px) + 8px); }
@media (max-width: 768px) {
  .dgnew-topbar { top: 0; }
}

/* ---------- Barre du haut : ne jamais déborder ---------- */
.dgnew-topbar { min-width: 0; }
.dgnew-topbar-logo,
.dgnew-topbar-count { flex-shrink: 0; }
.dgnew-progress-wrap { min-width: 0; }

/* ---------- Onboarding (formulaire « Parlez-nous de votre entreprise ») ---------- */
#dgnew-onboard .dgnew-app-inner {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  min-height: calc(100vh - 56px - var(--dg-hh, 73px));
}
#dgnew-onboard .dgnew-onboard-wrap { max-width: 640px; width: 100%; }
#dgnew-onboard .dgnew-onboard-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px;
}
#dgnew-onboard .dgnew-onboard-field { min-width: 0; }
#dgnew-onboard .dgnew-onboard-field input,
#dgnew-onboard .dgnew-onboard-field select {
  width: 100%; min-width: 0; max-width: 100%;
}
#dgnew-onboard .dgnew-onboard-submit {
  margin-top: 8px; width: 100%;
  justify-content: center; border-radius: 12px;
}

/* ---------- Questions : éviter qu'un contenu long élargisse la grille ---------- */
.dgnew-q-wrap > * { min-width: 0; }
.dgnew-q-text { overflow-wrap: break-word; }
.dgnew-opt { min-width: 0; }
.dgnew-opt-text { min-width: 0; overflow-wrap: break-word; }

/* Question finale (pilier prioritaire) */
.dgnew-q-wrap.dgnew-q-wrap--single { grid-template-columns: minmax(0, 1fr); }
.dgnew-q-content.dgnew-q-content--prio { padding: 48px; }

/* ---------- Résultat ---------- */
.dgnew-result-body > *,
.dgnew-result-bottom > * { min-width: 0; }
.dgnew-bar-meta { flex-wrap: wrap; row-gap: 4px; }
.dgnew-bar-name { min-width: 0; }

/* ============================================================
   TABLETTE (769px → 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .dgnew-intro-content { padding: 0 32px; }
  .dgnew-intro-top {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }
  .dgnew-intro-radar { width: 300px; height: 300px; }
  .dgnew-baobab-wrap { flex: none; transform: scale(.72); }
  .dgnew-intro-sub { max-width: 100%; }

  #dgnew-onboard .dgnew-app-inner { padding: 32px 24px; }
  #dgnew-onboard .dgnew-onboard-wrap { padding: 40px 36px; }

  .dgnew-app-inner { padding: 32px 20px; }
  .dgnew-q-wrap { grid-template-columns: 220px minmax(0, 1fr); }
  .dgnew-q-pilier { min-height: 340px; padding: 24px 18px; }
  .dgnew-q-content { padding: 36px 28px; }
  .dgnew-q-content.dgnew-q-content--prio { padding: 36px 28px; }

  .dgnew-result-content { padding: 48px 24px; }
  .dgnew-result-body { gap: 24px; padding: 24px; }
  .dgnew-after-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* ============================================================
   MOBILE (jusqu'à 768px)
   ============================================================ */
@media (max-width: 768px) {
  .dgnew-topbar { padding: 0 14px; gap: 10px; }
  .dgnew-topbar-count { font-size: 12px; }

  #dgnew-onboard .dgnew-app-inner {
    padding: 16px 12px 32px;
    align-items: flex-start;
    min-height: calc(100vh - 56px - var(--dg-hh, 73px));
    min-height: calc(100svh - 56px - var(--dg-hh, 73px));
  }
  #dgnew-onboard .dgnew-onboard-wrap { padding: 28px 20px; border-radius: 16px; }
  #dgnew-onboard .dgnew-onboard-header { margin-bottom: 22px; }

  /* 16px minimum : évite le zoom automatique d'iOS au focus */
  #dgnew-onboard .dgnew-onboard-field input,
  #dgnew-onboard .dgnew-onboard-field select {
    font-size: 16px; min-height: 46px; padding: 11px 14px;
  }
  #dgnew-onboard .dgnew-onboard-field label { line-height: 1.3; }

  .dgnew-q-content.dgnew-q-content--prio { padding: 24px 16px; }
  .dgnew-opts-prio { gap: 8px; }

  .dgnew-expert-field input,
  .dgnew-expert-field textarea { font-size: 16px; }
}

/* ---------- Téléphone : une seule colonne ---------- */
@media (max-width: 640px) {
  #dgnew-onboard .dgnew-onboard-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
  }
  #dgnew-onboard .dgnew-onboard-form { gap: 14px; }
}

@media (max-width: 560px) {
  .dgnew-expert-popup { max-height: 92vh; padding: 26px 18px; }
  .dgnew-contact-modes .dgnew-mode-btn { flex: 1 1 100%; text-align: center; }
  .dgnew-bar-val { flex-basis: 100%; padding-left: 34px; }
  .dgnew-result-score { flex-shrink: 0; }
}

/* ---------- Très petits écrans (≤ 380px) ---------- */
@media (max-width: 380px) {
  .dgnew-topbar-logo { font-size: 12px; }
  #dgnew-onboard .dgnew-onboard-wrap { padding: 24px 16px; }
  .dgnew-q-text { font-size: 16px; }
  .dgnew-intro-title { letter-spacing: -.5px; }
}