/* ─────────────────────────────────────────────────────────────────────────────
   CM Platform - Module Paramètres compte - Responsive
   Fichier : /frontend/modules/settings/css/settings-responsive.css
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   9. Responsive tablette
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .cm-settingsLayout {
    grid-template-columns: 1fr;
  }

  .cm-settingsSidebar {
    min-height: auto;
  }

  .cm-settingsNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Responsive mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .cm-settingsContent {
    padding: 16px;
  }

  .cm-settingsBox {
    padding: 16px;
  }

  .cm-settingsFormGrid,
  .cm-settingsInfoGrid,
  .cm-subscriptionInfoGrid {
    grid-template-columns: 1fr;
  }

  .cm-field--span2 {
    grid-column: auto;
  }

  .cm-settingsNav {
    grid-template-columns: 1fr;
  }

  .cm-settingsProfileHeader {
    align-items: flex-start;
  }

  .cm-settingsAvatarPreview {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 16px;
  }

  .cm-payCardTop,
  .cm-affiliateHead,
  .cm-subscriptionPanelTop {
    flex-direction: column;
    align-items: flex-start;
  }

  .cm-subscriptionPanelHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Très petits écrans
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .cm-settingsLayout {
    gap: 14px;
  }

  .cm-settingsSidebar,
  .cm-settingsContent {
    border-radius: 16px;
  }

  .cm-settingsSectionHead h3 {
    font-size: 20px;
  }

  .cm-settingsProfileHeader {
    padding: 14px;
  }

  .cm-settingsActions,
  .cm-payActions,
  .cm-subscriptionPanelActions {
    flex-direction: column;
  }

  .cm-settingsContent .cm-btn,
  .cm-settingsContent .cm-btnPrimary {
    width: 100%;
  }
}