/* responsive.css — couche mobile / tablette (toutes pages du dossier) */

/* ---- Safe areas & navigation ---- */
@media (max-width: 900px) {
  .sidebar-toggle {
    top: max(10px, env(safe-area-inset-top, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
  }
  .site-main {
    padding-top: max(56px, calc(44px + env(safe-area-inset-top, 0px)));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .site-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  nav.sections a {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .sidebar-foot .top-auth-btn,
  .sidebar-presence .dm-presence-btn {
    min-height: 44px;
  }
  /* Ne pas clipper .site-main : overflow-x: clip force overflow-y:auto et bloque le scroll page (corpus). */
  .atelier-pane.active,
  .enq-pane {
    overflow-x: clip;
  }
}

@media (max-width: 480px) {
  .site-main {
    padding-top: max(52px, calc(40px + env(safe-area-inset-top, 0px)));
  }
}

/* ---- Corpus : scroll page (tableau sans max-height interne) ---- */
#corpus .corp-table-wrap,
#corpus .explo-table-card .corp-table-wrap {
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

@media (max-width: 900px) {
  .site-main {
    overflow-x: visible;
    overflow-y: visible;
  }
}

/* ---- Tableaux : défilement horizontal + repères visuels ---- */
@media (max-width: 760px) {
  .corp-table-wrap,
  .wr-bk-table-wrap,
  .dm-presence-body,
  .explo-table-card .corp-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .corp-table-card {
    position: relative;
  }
  .corp-table-card::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 22px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.96) 0%, transparent 100%);
    border-radius: 0 14px 14px 0;
    opacity: 0.9;
  }
  .corp-table {
    min-width: 720px !important;
  }
  .wr-bk-table {
    min-width: 640px !important;
  }
  .explo-table {
    min-width: 560px !important;
  }
  .wr-bk-table th:nth-child(5),
  .wr-bk-table td:nth-child(5) {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .corp-table {
    min-width: 520px !important;
  }
}

/* ---- Présence DM ---- */
@media (max-width: 760px) {
  .dm-presence-body {
    overflow-x: auto;
  }
  .dm-presence-table th,
  .dm-presence-table td {
    white-space: normal;
    word-break: break-word;
  }
}

/* ---- Modals & popups ---- */
@media (max-width: 760px) {
  .modal-bg {
    padding: 6px 4px !important;
    align-items: flex-start !important;
  }
  .modal:not(.wr-struct-modal) {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }
  .wr-bk-modal-bg {
    padding: 8px 6px !important;
    align-items: flex-start !important;
  }
  .wr-bk-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .wr-zotero-pop {
    min-width: min(280px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
  .wr-zotero-pop button {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #wr-mob-modal.wr-bk-modal-bg {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #wr-mob-modal .wr-bk-modal {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100dvh;
    border-radius: 0 !important;
    margin: 0;
  }
}

/* ---- Rédaction : barres d'outils scrollables ---- */
@media (max-width: 760px) {
  .wr-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .wr-toolbar::-webkit-scrollbar {
    display: none;
  }
  .wr-toolbar button,
  .wr-toolbar select {
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }
  .wr-toolbar .wr-sel-apa,
  .wr-toolbar .wr-sel-font,
  .wr-toolbar .wr-sel-lh {
    min-width: 108px;
  }
  .wr-icon-btn,
  .wr-bar-actions .btn.wr-icon-btn {
    min-height: 40px;
  }
  .wr-editor {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .wr-bar-actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wr-bar-actions::-webkit-scrollbar {
    display: none;
  }
}

/* ---- Pages outils : grilles & en-têtes ---- */
@media (max-width: 900px) {
  body.atelier-page .atelier-shell,
  body.outil-fixed .atelier-shell {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  body.atelier-page .bn-app,
  body.outil-fixed .bn-app {
    grid-template-columns: 1fr !important;
  }
  body.atelier-page .bn-sidebar,
  body.outil-fixed .bn-sidebar {
    max-height: min(240px, 38vh) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--trait, #e2e8ec);
  }
}

@media (max-width: 760px) {
  body.atelier-page .wrap,
  body.outil-fixed .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.atelier-page .atelier-top,
  body.outil-fixed .atelier-top {
    padding-left: 48px !important;
    padding-top: 12px !important;
  }
}

/* ---- Assistant : éviter le viewport figé sur mobile ---- */
@media (max-width: 900px) {
  html:has(body.outil-fixed[data-outil="assistant"]) {
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
  }
  body.outil-fixed[data-outil="assistant"] {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.outil-fixed[data-outil="assistant"] .site-main {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: calc(100dvh - 56px) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.outil-fixed[data-outil="assistant"] .atelier-pane.active[data-pane="assistant"] {
    min-height: calc(100dvh - 56px) !important;
  }
  body.outil-fixed[data-outil="assistant"] .atelier-shell {
    min-height: calc(100dvh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    max-height: none !important;
  }
}

/* ---- Fil rouge / flowchart ---- */
@media (max-width: 760px) {
  .flow {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .lanes {
    min-width: 640px;
  }
}

/* ---- Chat directrice ---- */
@media (max-width: 760px) {
  .chat-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    border-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    max-height: min(88vh, 640px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chat-panel-close {
    width: 40px;
    height: 40px;
  }
}

/* ---- Touch : zones tactiles & retours visuels ---- */
@media (hover: none) {
  .asst-hist-rename,
  .asst-hist-del {
    opacity: 0.75 !important;
    pointer-events: auto !important;
  }
}

@media (hover: none) and (max-width: 900px) {
  .corp-table tbody tr.corp-row:active td {
    background: rgba(47, 93, 120, 0.08);
  }
  .wr-bk-act,
  .m-close,
  .sidebar-toggle,
  .chat-panel-close,
  .ft-modal .m-close {
    min-width: 44px;
    min-height: 44px;
  }
  .tk-del {
    width: 40px;
    height: 40px;
  }
}

/* ---- Titres fluides (dossier + outils, toutes pages) ---- */

.hero .eyebrow,
.sec-head .eyebrow,
.fr-lead-head .eyebrow,
.atelier-head .eyebrow,
.dm-head .eyebrow,
.cadre-focus .eyebrow,
.eyebrow {
  white-space: nowrap;
  font-size: clamp(0.62rem, 2.8vw, 0.72rem);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero .eyebrow::-webkit-scrollbar,
.sec-head .eyebrow::-webkit-scrollbar,
.fr-lead-head .eyebrow::-webkit-scrollbar,
.atelier-head .eyebrow::-webkit-scrollbar,
.eyebrow::-webkit-scrollbar {
  display: none;
}

.hero h1,
.sec-head h2,
.fr-lead-head h2,
#outil-pane-title,
.page-section-title,
.wr-page-title,
.enq-hero-card .sec-head h2 {
  max-width: none;
  line-height: 1.22;
  text-wrap: balance;
  font-weight: 600;
  font-size: clamp(1.05rem, 4.2vw, 2.2rem);
}

#outil-pane-title,
.page-section-title {
  margin-top: 8px;
  color: var(--encre, var(--text-primary));
}

.axes-block-head h3,
.cadre-focus h3,
.dm-head h3,
.plan-head,
.concept h3,
.enq-main-head h3,
.asst-page-title,
.bn-sidebar-head h3,
.tk-head h3,
.cmp-form-head h3,
.cmp-form-modal-head h3,
.wr-bk-modal-head h3,
.wr-zotero-head h3,
.corp-zotero-edit-head h3,
.corp-fiche-edit-head h3,
.m-head h3,
.auth-card h2,
.dm-presence-head h2,
.ft-modal .ft-m-head h2 {
  max-width: none;
  line-height: 1.25;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .sec-head,
  .fr-lead-head,
  .enq-hero-card .sec-head {
    max-width: none;
  }

  .hero h1,
  .sec-head h2,
  .fr-lead-head h2,
  #outil-pane-title,
  .page-section-title,
  .enq-hero-card .sec-head h2,
  .wr-page-title {
    font-size: clamp(0.95rem, 3.8vw, 1.85rem);
  }

  .axes-block-head h3,
  .cadre-focus h3,
  .dm-head h3,
  .concept h3,
  .plan-head,
  .enq-main-head h3,
  .asst-page-title,
  .bn-sidebar-head h3,
  .tk-head h3,
  .cmp-form-head h3,
  .cmp-form-modal-head h3,
  .m-head h3,
  .auth-card h2,
  .dm-presence-head h2 {
    font-size: clamp(0.92rem, 3.4vw, 1.15rem);
  }

  .plan-part .ptitle {
    font-size: clamp(0.9rem, 3.2vw, 1.12rem);
  }

  .tl-sum h4 {
    font-size: clamp(0.88rem, 3.2vw, 1.05rem);
    line-height: 1.28;
  }

  .cadre-chain h4 {
    font-size: clamp(0.88rem, 3.1vw, 1rem);
    line-height: 1.3;
  }

  .refl-title {
    font-size: clamp(0.85rem, 3vw, 0.92rem);
  }

  .enq-full-sec-head {
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  .enq-full-sec-head h3,
  .enq-full-sec-head h4 {
    font-size: clamp(0.92rem, 3.4vw, 1.1rem);
    line-height: 1.25;
  }
}

@media (max-width: 640px) {
  .cmp-modal-bg {
    padding: 8px 6px !important;
  }
  .cmp-form-head,
  .cmp-form-body,
  .cmp-form-foot {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}