/* ── Compte desktop (≥1024px) — sections en grille de cards ────────────────
   Même traitement visuel que le dashboard "Aujourd'hui" (liseret dégradé
   animé, voir dashboard.css) : Mon profil / Zone géographique / Connexion
   réseaux sociaux / Stratégie en grille 2x2, Récaps mensuels (ajoutée par
   recap.js) en card panoramique qui occupe la ligne du dessous
   (grid-column: 1/-1). Rien ici en dehors de la media query : sur mobile
   .config-grid reste un simple conteneur de flux, les sections gardent leur
   apparence plate d'origine. */
@media (min-width: 1024px) {
  #screen-config { padding: 20px 24px; }
  .config-update-section { text-align: center; }

  .config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
  }
  .config-card {
    position: relative;
    /* Glass panel (voir glass.css .glass-panel) — même traitement que les
       cadrans du dashboard "Aujourd'hui" (dashboard.css), pour laisser
       deviner le fond de #main-app à travers. */
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    aspect-ratio: 1 / 1;
    /* La card ne défile PAS elle-même : c'est .config-card-body qui défile (même structure
       que .dash-panel + .dash-story-content, dashboard.css). Un ::before en position:absolute
       à l'intérieur d'un conteneur qui défile fait partie du contenu défilable et remonte avec
       lui — le liseret se décollait donc de la card dès qu'on scrollait. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .config-card-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .config-card-wide { grid-column: 1 / -1; aspect-ratio: auto; }

  /* Liseret dégradé animé — même technique que .dash-panel::before
     (dashboard.css) : double masque (mask-composite: exclude), angle animé
     via la custom property --dash-border-angle déjà déclarée là-bas. */
  .config-card::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--dash-border-angle),
      var(--card-border-base) 0%, var(--card-border-base) 42%,
      var(--card-border-shine) 50%, var(--card-border-base) 58%, var(--card-border-base) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: dash-border-spin 12s linear infinite;
    pointer-events: none;
  }

  /* Contenu resserré pour tenir dans le carré sans ascenseur (voir aussi les
     margin-top inline réduits dans index.html pour les mêmes éléments —
     spécificité inline, pas overridable ici). */
  .config-card .section-title { margin-bottom: 6px; }
  .config-card .config-group { margin-bottom: 6px; }
  .config-card .config-label { margin-bottom: 3px; }
  .config-card .config-input, .config-card .form-select {
    padding: 7px 10px; font-size: 12px;
  }
  .config-card .btn-full {
    display: block; width: max-content; max-width: 100%;
    padding: 8px 12px; font-size: 12px; margin-top: 6px;
  }
  .config-card .network-card { padding: 8px; gap: 6px; margin-bottom: 6px; }
  .config-card .network-card-head { gap: 8px; }
  .config-card .network-card-head .si-svg { width: 26px; height: 26px; border-radius: 7px; }
  .config-card .network-card-name { font-size: 12px; }
  .config-card .network-card-status { font-size: 10px; }
}