/**
 * Gabarit mobile aligné sur dashboard.html — zone .main (≤720px) :
 * mêmes marges latérales, top safe-area, cartes et barre du haut type « Accueil ».
 */
html {
  touch-action: pan-x pan-y;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 720px) {
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  .wrap.app-subpage {
    display: block;
    width: 100%;
    max-width: 100% !important;
    margin: 0;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-top: max(12px, calc(env(safe-area-inset-top, 0px) + 6px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: 0;
    box-sizing: border-box;
  }

  /* Bloc actions / titre du haut — proche du .topbar dashboard mobile */
  .wrap.app-subpage .top-links,
  .wrap.app-subpage .topbar {
    border-radius: 16px;
    border: 1px solid rgba(245, 237, 224, 0.16);
    background: rgba(12, 10, 8, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
    padding: 12px;
    margin-bottom: 0;
  }

  .wrap.app-subpage .topbar {
    gap: 10px;
  }

  .wrap.app-subpage .btn {
    min-height: 44px;
  }

  .wrap.app-subpage .page-main,
  .wrap.app-subpage .profil-main,
  .wrap.app-subpage .app-subpage-main {
    margin-top: 10px;
    display: block;
    flex: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .wrap.app-subpage > .topbar + .card,
  .wrap.app-subpage > .topbar + .post-form,
  .wrap.app-subpage > .topbar + section,
  .wrap.app-subpage > .topbar + .insights,
  .wrap.app-subpage > .topbar + .app-subpage-main {
    margin-top: 10px;
  }

  .wrap.app-subpage > .card + .card,
  .wrap.app-subpage > .card + .links-row,
  .wrap.app-subpage .app-subpage-main > .card + .card {
    margin-top: 12px;
  }

  /* Cartes : rendu proche des .card du dashboard */
  .wrap.app-subpage .profil-card,
  .wrap.app-subpage > .card,
  .wrap.app-subpage .page-main > .card,
  .wrap.app-subpage .app-subpage-main > .card,
  .wrap.app-subpage .app-subpage-main > .profil-card {
    border-radius: 20px;
    border: 1px solid rgba(245, 237, 224, 0.12);
    background: linear-gradient(180deg, rgba(12, 10, 8, 0.38), rgba(12, 10, 8, 0.28));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
}

@media (min-width: 721px) {
  .wrap.app-subpage {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 18px;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    box-sizing: border-box;
  }
}

/**
 * Fond type Formation : dégradés sur le body + photo plein écran.
 * Image ancrée en bas (personnages visibles au-dessus de la barre d’onglets).
 * Pas d’assombrissement opaque en bas — évite la « bande noire » au-dessus du menu.
 */
html.app-bg-formation {
  background: #070504;
}

html.app-bg-formation body {
  background-color: #070504;
  background-image: radial-gradient(1100px 750px at 16% 12%, rgba(250, 204, 21, 0.14), transparent 58%),
    radial-gradient(800px 600px at 85% 15%, rgba(245, 158, 11, 0.12), transparent 50%),
    radial-gradient(700px 500px at 20% 80%, rgba(6, 182, 212, 0.1), transparent 45%),
    linear-gradient(180deg, #070504, #0d0a08);
}

html.app-bg-formation .bg {
  background-color: #050308;
  background-image: url('../assets/dashboard-home-bg.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: brightness(0.96) saturate(1.04);
}

html.app-bg-formation .bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Même principe que le dashboard : lisible en haut, illustration visible en bas */
  background: linear-gradient(to bottom, rgba(5, 4, 8, 0.86) 0%, rgba(5, 4, 8, 0.28) 40%, rgba(5, 4, 8, 0.12) 52%, rgba(5, 4, 8, 0.42) 100%);
}