/**
 * Nonante Cinq · couche early-adopter foldable (iPhone Duo & co.)
 * Progressive : viewport-segments + device-posture + fallback JS.
 * Classes spanning : sur html ET body (le JS les synchronise).
 */
:root {
  --nc-fold-hinge: 0px;
  --nc-fold-seg0-w: 100vw;
  --nc-fold-seg1-w: 0px;
  --nc-fold-seg0-h: 100vh;
  --nc-fold-seg1-h: 0px;
}

html.nc-fold-ready {
  --nc-fold-capable: 1;
}

/* Sélecteurs unifiés (html et/ou body) */
html.nc-fold-spanning body,
body.nc-fold-spanning {
  --nc-fold-is-spanning: 1;
}

/* ——— Segments horizontaux (livre ouvert / Duo book) ——— */
@media (horizontal-viewport-segments: 2) {
  :root {
    --nc-fold-seg0-w: env(viewport-segment-width 0 0, 50vw);
    --nc-fold-seg1-w: env(viewport-segment-width 1 0, 50vw);
    --nc-fold-hinge: max(
      0px,
      calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw))
    );
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Site public */
  body.nc-fold-site .nc-fold-pane-left,
  body.nc-fold-site .nc-duo-left {
    width: var(--nc-fold-seg0-w);
    max-width: var(--nc-fold-seg0-w);
    box-sizing: border-box;
    padding-inline-end: max(0.75rem, calc(var(--nc-fold-hinge) * 0.35));
  }
  body.nc-fold-site .nc-fold-pane-right,
  body.nc-fold-site .nc-duo-right {
    width: var(--nc-fold-seg1-w);
    max-width: var(--nc-fold-seg1-w);
    margin-inline-start: auto;
    box-sizing: border-box;
    padding-inline-start: max(0.75rem, calc(var(--nc-fold-hinge) * 0.35));
  }

  html.nc-fold-spanning body.nc-fold-site .prop-above.max-w-7xl,
  body.nc-fold-site.nc-fold-spanning .prop-above.max-w-7xl {
    width: var(--nc-fold-seg0-w) !important;
    max-width: var(--nc-fold-seg0-w) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-inline: clamp(1rem, 2.5vw, 2rem) !important;
    box-sizing: border-box;
    text-align: left !important;
  }
  html.nc-fold-spanning body.nc-fold-site .prop-above.prop-offers,
  body.nc-fold-site.nc-fold-spanning .prop-above.prop-offers {
    width: var(--nc-fold-seg1-w) !important;
    max-width: var(--nc-fold-seg1-w) !important;
    margin: 1rem 0 0 calc(var(--nc-fold-seg0-w) + var(--nc-fold-hinge)) !important;
    padding-inline: clamp(1rem, 2.5vw, 2rem) !important;
    box-sizing: border-box;
  }
  html.nc-fold-spanning body.nc-fold-site .prop-logos,
  html.nc-fold-spanning body.nc-fold-site .prop-media-row,
  body.nc-fold-site.nc-fold-spanning .prop-logos,
  body.nc-fold-site.nc-fold-spanning .prop-media-row {
    width: var(--nc-fold-seg0-w);
    max-width: var(--nc-fold-seg0-w);
    margin-left: 0;
    box-sizing: border-box;
    padding-inline: clamp(1rem, 2.5vw, 2rem);
  }

  html.nc-fold-spanning body.nc-fold-site > header.fixed,
  html.nc-fold-spanning body.nc-fold-site header.fixed,
  body.nc-fold-site.nc-fold-spanning > header.fixed,
  body.nc-fold-site.nc-fold-spanning header.fixed {
    max-width: var(--nc-fold-seg0-w);
    left: 0;
    right: auto;
    width: var(--nc-fold-seg0-w);
  }
}

/* ——— Vaisseau Soft UI : menu gauche | contenu droite (natif + fallback) ——— */
/* Spécificité > Soft UI .navbar-vertical.navbar-expand-xs { max-width: 15.625rem !important } */
html.nc-fold-spanning body.nc-duo-app.g-sidenav-show #sidenav-main.navbar-vertical.navbar-expand-xs,
html.nc-fold-spanning body.nc-duo-app.g-sidenav-show #sidenav-main.sidenav,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show #sidenav-main.navbar-vertical.navbar-expand-xs,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show #sidenav-main.sidenav,
html.nc-fold-spanning body.nc-duo-app.g-sidenav-show #sidenav-main,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show #sidenav-main {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  inset: 0 auto 0 0 !important;
  width: var(--nc-fold-seg0-w) !important;
  max-width: var(--nc-fold-seg0-w) !important;
  min-width: 0 !important;
  margin: 0 !important;
  /* Soft UI mobile : translateX(-17.125rem) quand non pinned */
  transform: none !important;
  -webkit-transform: none !important;
  translate: none !important;
  border-radius: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  z-index: 1050 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

html.nc-fold-spanning body.nc-duo-app.g-sidenav-show #sidenav-main.navbar-vertical.navbar-expand-xs:hover,
html.nc-fold-spanning body.nc-duo-app.g-sidenav-show #sidenav-main.sidenav:hover,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show #sidenav-main.navbar-vertical.navbar-expand-xs:hover,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show #sidenav-main.sidenav:hover {
  max-width: var(--nc-fold-seg0-w) !important;
  width: var(--nc-fold-seg0-w) !important;
}

/* Liens / collapse : pleine largeur du volet */
html.nc-fold-spanning body.nc-duo-app #sidenav-main .navbar-collapse,
body.nc-duo-app.nc-fold-spanning #sidenav-main .navbar-collapse {
  height: auto !important;
  max-height: none !important;
}

html.nc-fold-spanning body.nc-duo-app.g-sidenav-show .main-content,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show .main-content,
html.nc-fold-spanning body.nc-duo-app.g-sidenav-show .sidenav.fixed-start ~ .main-content,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show .sidenav.fixed-start ~ .main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: var(--nc-fold-seg1-w) !important;
  max-width: var(--nc-fold-seg1-w) !important;
  margin-inline-start: calc(var(--nc-fold-seg0-w) + var(--nc-fold-hinge)) !important;
  margin-inline-end: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

html.nc-fold-spanning body.nc-duo-app.g-sidenav-show .navbar-main,
body.nc-duo-app.nc-fold-spanning.g-sidenav-show .navbar-main {
  max-width: calc(var(--nc-fold-seg1-w) - 1.5rem);
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

/* Burger inutile : le menu est déjà docké à gauche */
html.nc-fold-spanning body.nc-duo-app #vaisseau-burger-host,
html.nc-fold-spanning body.nc-duo-app .vaisseau-top-tools #iconNavbarSidenav,
body.nc-duo-app.nc-fold-spanning #vaisseau-burger-host,
body.nc-duo-app.nc-fold-spanning .vaisseau-top-tools #iconNavbarSidenav {
  display: none !important;
}

/* Croix de fermeture Soft UI : ne pas proposer de « ranger » le menu en spanning */
html.nc-fold-spanning body.nc-duo-app #sidenav-main #iconSidenav,
body.nc-duo-app.nc-fold-spanning #sidenav-main #iconSidenav {
  display: none !important;
}

html.nc-fold-spanning body.nc-duo-app .table-responsive,
html.nc-fold-spanning body.nc-duo-app .card,
body.nc-duo-app.nc-fold-spanning .table-responsive,
body.nc-duo-app.nc-fold-spanning .card {
  max-width: 100%;
}

/* Contenu : respirer dans le volet droit */
html.nc-fold-spanning body.nc-duo-app .main-content > .container-fluid,
html.nc-fold-spanning body.nc-duo-app .main-content .container-fluid.py-4,
body.nc-duo-app.nc-fold-spanning .main-content > .container-fluid,
body.nc-duo-app.nc-fold-spanning .main-content .container-fluid.py-4 {
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
}

html.nc-fold-spanning body.nc-duo-app .card.card-body.blur.shadow-blur.mx-4,
body.nc-duo-app.nc-fold-spanning .card.card-body.blur.shadow-blur.mx-4 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

/* Floating tools : rester dans le volet droit */
html.nc-fold-spanning body.nc-duo-app .vaisseau-top-tools.is-floating,
body.nc-duo-app.nc-fold-spanning .vaisseau-top-tools.is-floating {
  right: 12px;
  left: auto;
}

/* Overlay Soft UI (mobile pin) : inutile en split Duo */
html.nc-fold-spanning body.nc-duo-app .sidenav-overlay,
html.nc-fold-spanning body.nc-duo-app #sidenav-overlay,
body.nc-duo-app.nc-fold-spanning .sidenav-overlay,
body.nc-duo-app.nc-fold-spanning #sidenav-overlay {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ——— Pressroom client ——— */
html.nc-fold-spanning body.nc-fold-pressroom .container-fluid,
html.nc-fold-spanning body.nc-fold-pressroom .main-content,
html.nc-fold-spanning body.nc-fold-pressroom .container,
body.nc-fold-pressroom.nc-fold-spanning .container-fluid,
body.nc-fold-pressroom.nc-fold-spanning .main-content,
body.nc-fold-pressroom.nc-fold-spanning .container {
  max-width: var(--nc-fold-seg1-w);
  width: var(--nc-fold-seg1-w);
  margin-left: calc(var(--nc-fold-seg0-w) + var(--nc-fold-hinge));
  margin-right: 0;
  box-sizing: border-box;
}
html.nc-fold-spanning body.nc-fold-pressroom .nc-duo-rail,
html.nc-fold-spanning body.nc-fold-pressroom .admin-bar,
html.nc-fold-spanning body.nc-fold-pressroom #navbarBlur.navbar-blur,
body.nc-fold-pressroom.nc-fold-spanning .nc-duo-rail,
body.nc-fold-pressroom.nc-fold-spanning .admin-bar,
body.nc-fold-pressroom.nc-fold-spanning #navbarBlur.navbar-blur {
  width: var(--nc-fold-seg0-w);
  max-width: var(--nc-fold-seg0-w);
}

/* ——— Segments verticaux ——— */
@media (vertical-viewport-segments: 2) {
  :root {
    --nc-fold-seg0-h: env(viewport-segment-height 0 0, 50vh);
    --nc-fold-seg1-h: env(viewport-segment-height 0 1, 50vh);
    --nc-fold-hinge: max(
      0px,
      calc(env(viewport-segment-top 0 1, 50vh) - env(viewport-segment-bottom 0 0, 50vh))
    );
  }

  html.nc-fold-spanning-v body.nc-duo-app #sidenav-main,
  body.nc-duo-app.nc-fold-spanning-v #sidenav-main {
    max-height: var(--nc-fold-seg0-h);
    overflow: auto;
  }
  html.nc-fold-spanning-v body.nc-duo-app .main-content,
  body.nc-duo-app.nc-fold-spanning-v .main-content {
    margin-top: calc(var(--nc-fold-seg0-h) + var(--nc-fold-hinge));
  }
}

@media (device-posture: folded) {
  html.nc-fold-ready body {
    --nc-fold-posture: folded;
  }
}

/*
 * Densage dashboard : Bootstrap coupe sur le viewport, pas sur le volet.
 * Sur Duo ouvert (ou fenêtre étroite + menu), le contenu est ~50vw alors
 * que xl/lg croient être en desktop → colonnes trop serrées / vide à droite.
 */
body.nc-duo-app .main-content {
  container-type: inline-size;
  container-name: nc-vaisseau-main;
}

@container nc-vaisseau-main (max-width: 920px) {
  .home-dash-row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .home-dash-row > [class*="col-"] + [class*="col-"] {
    margin-top: 1rem !important;
  }
  .home-chart-card.mx-3 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }
  .home-chart-canvas {
    min-height: 280px !important;
  }
  .mois-grid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

@container nc-vaisseau-main (min-width: 921px) {
  .home-chart-card.mx-3 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
  }
  .home-chart-canvas {
    min-height: 300px !important;
  }
}

/* Duo spanning : graphe un cran plus présent dans le volet droit */
html.nc-fold-spanning body.nc-duo-app .home-chart-canvas,
body.nc-duo-app.nc-fold-spanning .home-chart-canvas {
  min-height: 300px !important;
}
html.nc-fold-spanning body.nc-duo-app .home-chart-card .card-header,
body.nc-duo-app.nc-fold-spanning .home-chart-card .card-header {
  width: 100%;
}
html.nc-fold-spanning body.nc-duo-app .stats-30j,
body.nc-duo-app.nc-fold-spanning .stats-30j {
  justify-content: flex-end;
  flex: 1 1 auto;
}