/* /public_html/assets/css/profile/my-profile.tablet.css
   Mon profil — tablette >= 768px et < 1024px, hors paysage compact mobile
*/

@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #app-root,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-app-shell,
  body.is-dashboard-shell-visible:has(#my-profile-content) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .panel-body {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .panel-body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    min-height: 100vh;
    padding: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 6rem)
      max(1.15rem, var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)))
      calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 2rem)
      max(1.15rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px))) !important;
  }

  @supports (min-height: 100dvh) {
    body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
      min-height: 100dvh;
    }
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-loader-host {
    min-height: calc(100vh - var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) - 6rem);
    padding: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 6rem) 1.15rem 2rem;
  }

  .my-profile-panel,
  .my-profile-edit {
    max-width: min(52rem, 100%);
  }

  .my-profile-membership-grid,
  .my-profile-membership-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .my-profile-edit .form-vertical {
    gap: 1rem;
  }
}

/* V26.2.1 — Mon profil tablette : largeur de lecture centrée et stable */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  .my-profile-panel {
    --my-profile-read-section-max: 44rem;
    --my-profile-read-section-gutter: clamp(1.15rem, 3vw, 1.65rem);
  }
}

/* V26.2.2 — Mon profil : centrage optique tablette
   -------------------------------------------------
   Même principe que le mobile : le panel porte le coussin latéral,
   les blocs Adhésion/Santé prennent toute la largeur utile et restent
   vraiment centrés à l'écran. */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .panel-body,
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel {
    --my-profile-read-panel-max: 48rem;
    --my-profile-read-content-pad: clamp(1.25rem, 3vw, 1.75rem);
    width: min(100%, var(--my-profile-read-panel-max)) !important;
    max-width: min(100%, var(--my-profile-read-panel-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--my-profile-read-content-pad) !important;
    padding-right: var(--my-profile-read-content-pad) !important;
    box-sizing: border-box !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel .my-profile-membership-block,
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel > .student-view-health-block:not(.my-profile-membership-block) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* V26.3.1 — Mon profil : respiration initiale sous navbar tablette */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.35rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.35rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-loader-host {
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 7.35rem) !important;
  }
}

/* V26.4.1 — Mon profil : respiration sous navbar + marges édition tablette */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    padding-top: clamp(2.15rem, 4vw, 3rem) !important;
    box-sizing: border-box !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 8.55rem) !important;
    scroll-padding-top: calc(var(--edq-safe-area-top-effective, env(safe-area-inset-top, 0px)) + 8.55rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit {
    --my-profile-edit-side-pad: clamp(1.25rem, 3vw, 1.9rem);
    width: min(100%, 56rem) !important;
    max-width: min(100%, 56rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--my-profile-edit-side-pad) !important;
    padding-right: var(--my-profile-edit-side-pad) !important;
    box-sizing: border-box !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-edit .form-vertical {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* V49.2.17 — Mon profil moderne tablette */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    width: min(100%, 58rem) !important;
    max-width: min(100%, 58rem) !important;
    padding-inline: clamp(1.1rem, 3vw, 1.7rem) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern-form {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* V49.2.19 — Mon profil : tablette alignée Smart Panel */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > :not(.my-profile-hero):not(.my-profile-control-dock),
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock {
    width: min(100%, calc(100% - 2.2rem)) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(13.5rem, .36fr) !important;
  }

  .my-profile-hero.courses-panel-hero h1 {
    font-size: clamp(2.65rem, 6.4vw, 4rem) !important;
  }
}

/* V49.2.20 — Mon profil tablette : hero pleine largeur, contenu sous navbar */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    padding: 0 0 calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 2rem) !important;
    scroll-padding-top: var(--my-profile-nav-height, var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px))) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero.courses-panel-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 clamp(.85rem, 2vw, 1.1rem) !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    width: 100% !important;
    max-width: none !important;
    padding: calc(var(--my-profile-nav-height, var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px))) + clamp(1rem, 2.4vw, 1.8rem)) var(--courses-panel-right, max(1rem, env(safe-area-inset-right, 0px))) clamp(1.15rem, 2.6vw, 1.8rem) var(--courses-panel-left, max(1rem, env(safe-area-inset-left, 0px))) !important;
  }
}

/* V49.2.20 — marge interne tablette harmonisée */
@media (min-width: 768px) and (max-width: 980px) and (min-height: 521px),
  (min-width: 981px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-panel-shell {
    --my-profile-content-left: max(1.15rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)));
    --my-profile-content-right: max(1.15rem, var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)));
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    padding-left: var(--my-profile-content-left) !important;
    padding-right: var(--my-profile-content-right) !important;
  }
}

/* V49.2.21 — tablette : hero bord à bord dans la racine scrollable */
@media (min-width: 768px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#my-profile-content) #app-root,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-app-shell,
  body.is-dashboard-shell-visible:has(#my-profile-content) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view,
  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .panel-body,
  body.is-dashboard-shell-visible:has(#my-profile-content) #my-profile-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    overflow-x: visible !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .my-profile-panel-shell.my-profile-panel-root {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  @supports (min-height: 100dvh) {
    body.is-dashboard-shell-visible:has(#my-profile-content) #dashboard-view > .my-profile-panel-shell.my-profile-panel-root {
      min-height: 100dvh !important;
    }
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern {
    --my-profile-readable-left: max(1.15rem, var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px))) !important;
    --my-profile-readable-right: max(1.15rem, var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px))) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > .my-profile-hero.courses-panel-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 0 clamp(.85rem, 2vw, 1.1rem) !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-hero__inner.courses-panel-hero__inner {
    width: 100% !important;
    max-width: none !important;
    padding: calc(var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px)) + clamp(1rem, 2.4vw, 1.8rem))
      var(--my-profile-readable-right)
      clamp(1.15rem, 2.6vw, 1.8rem)
      var(--my-profile-readable-left) !important;
  }

  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-modern > :not(.my-profile-hero):not(.my-profile-control-dock),
  body.is-dashboard-shell-visible:has(#my-profile-content) .my-profile-control-dock.courses-control-dock {
    width: min(78rem, calc(100vw - var(--my-profile-readable-left) - var(--my-profile-readable-right))) !important;
    max-width: min(78rem, calc(100vw - var(--my-profile-readable-left) - var(--my-profile-readable-right))) !important;
    margin-left: var(--my-profile-readable-left) !important;
    margin-right: var(--my-profile-readable-right) !important;
  }
}