/* =============================================================================
   Web responsive — corrections ciblées (ne casse pas les layouts desktop)
   ============================================================================= */

/* =============================================================================
   Web responsive — corrections ciblées (ne casse pas les layouts desktop)
   ============================================================================= */

/* ===== Web platform chrome ===== */
html[data-platform="web"] .titlebar-controls {
  display: none !important;
}

html[data-platform="web"] .titlebar {
  -webkit-app-region: no-drag;
  padding-left: 8px;
  padding-right: 12px;
}

.web-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  margin-right: 6px;
  border: 0;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.web-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: #1a1a1a;
  border-radius: 2px;
}

.web-nav-backdrop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

body.web-nav-open .web-nav-backdrop {
  display: block;
}

html[data-platform="web"] .content {
  position: relative;
}

/* Pastilles présence visibles */
html[data-platform="web"] .avatar {
  overflow: visible;
}

html[data-platform="web"] .avatar img {
  border-radius: 50%;
}

html[data-platform="web"] .presence-badge,
html[data-platform="web"] .presence-badge.status-ico {
  left: auto;
  right: -1px;
  bottom: -1px;
  z-index: 4;
}

/* Anti-zoom iOS/Android */
html[data-platform="web"] input,
html[data-platform="web"] select,
html[data-platform="web"] textarea {
  font-size: 16px !important;
  touch-action: manipulation;
}

html[data-platform="web"] input[type="checkbox"],
html[data-platform="web"] input[type="radio"],
html[data-platform="web"] input[type="range"],
html[data-platform="web"] input[type="color"],
html[data-platform="web"] input[type="file"] {
  font-size: inherit !important;
}

/* =============================================================================
   ≤ 980px
   ============================================================================= */
@media (max-width: 980px) {
  /* ----- Shell / menu ----- */
  html[data-platform="web"] body.web-on-dashboard .web-nav-toggle {
    display: inline-flex;
  }

  html[data-platform="web"] .dashboard-view {
    grid-template-columns: 1fr !important;
  }

  html[data-platform="web"] .side {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: var(--titlebar-h, 36px);
    left: 0;
    bottom: 0;
    width: min(300px, 86vw);
    max-height: calc(100dvh - var(--titlebar-h, 36px));
    z-index: 150;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  html[data-platform="web"] .side-brand,
  html[data-platform="web"] .side-user,
  html[data-platform="web"] .app-copyright-side {
    flex-shrink: 0;
  }

  html[data-platform="web"] .side-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body.web-nav-open .side {
    transform: translateX(0);
  }

  body.web-nav-open {
    overflow: hidden;
  }

  body.web-nav-open .side,
  body.web-nav-open .side-nav {
    touch-action: pan-y;
  }

  html[data-platform="web"] .titlebar-title {
    font-size: 0.72rem;
  }

  html[data-platform="web"] .app-copyright {
    display: none;
  }

  /* ----- Login : formulaires en flux (pas absolute + min-height 0) ----- */
  .auth-view {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
    align-items: stretch !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .auth-view .brand-panel {
    min-height: 160px !important;
    padding: 18px 12px;
  }

  .auth-view .brand-logo {
    width: min(140px, 42vw) !important;
  }

  .auth-view .panel {
    padding: 16px 14px !important;
    overflow: visible !important;
  }

  /* Critique : les .form sont absolute → il faut une vraie hauteur OU du flux */
  .auth-view .forms {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .auth-view .form {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none !important;
    overflow: visible !important;
    padding-right: 0;
  }

  .auth-view .form.is-active {
    display: flex !important;
  }

  /* ----- Chrome contenu (dashboard seulement) ----- */
  .dashboard-view .content-top {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 12px 8px !important;
    align-items: flex-start;
  }

  .dashboard-view .content-top h2 {
    font-size: 1.1rem !important;
  }

  .dashboard-view .status-chip {
    max-width: 100%;
    font-size: 0.8rem;
  }

  .dashboard-view .content-body {
    padding: 8px 12px 28px !important;
  }

  .dashboard-view .section-card,
  .dashboard-view .admin-card {
    padding: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .nav-btn {
    min-height: 44px;
    font-size: 0.95rem;
    touch-action: pan-y;
  }

  .btn {
    min-height: 42px;
  }

  .chip-opt {
    min-height: 40px;
  }

  .admin-tabs {
    flex-wrap: wrap;
    gap: 6px;
  }

  .admin-tab {
    min-height: 40px;
  }

  .admin-actions,
  .admin-mod-actions,
  .cand-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .field-grid,
  .stat-row,
  .donnees-vps-grid {
    grid-template-columns: 1fr !important;
  }

  .page-head,
  .content-header,
  .edt-header-row,
  .edt-toolbar,
  .settings-card-head,
  .anim-page-head,
  .office-title-row,
  .office-toolbar {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* Hauteurs pages : garder le scroll interne, juste passer en dvh */
  .page[data-page-view="admin"].is-active,
  .page[data-page-view="ma-demande"].is-active,
  .page[data-page-view="registre"].is-active,
  .page[data-page-view="office"].is-active,
  .page[data-page-view="staff"].is-active {
    height: calc(100dvh - var(--titlebar-h, 36px) - 76px) !important;
    max-height: calc(100dvh - var(--titlebar-h, 36px) - 76px) !important;
    overflow: hidden !important;
  }

  /* ----- Modals ----- */
  .modal-card,
  .security-notice-card,
  .event-card,
  .crop-card,
  .profile-pop,
  .office-crop-card,
  .report-card {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(90dvh, 900px) !important;
  }

  .crop-stage {
    width: min(280px, calc(100vw - 56px)) !important;
    height: min(280px, calc(100vw - 56px)) !important;
  }

  /* ----- Accueil membres ----- */
  .accueil-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  .accueil-main {
    width: 100%;
    min-width: 0;
    order: 2;
  }

  .hero-welcome {
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px !important;
  }

  .hero-welcome .avatar-lg {
    width: 72px;
    height: 72px;
  }

  .members-toggle {
    order: 1;
    position: relative !important;
    top: auto;
    right: auto;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 0.9rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  .members-panel {
    order: 3;
    position: fixed !important;
    top: var(--titlebar-h, 36px);
    right: 0;
    bottom: 0;
    width: min(340px, 92vw) !important;
    height: calc(100dvh - var(--titlebar-h, 36px));
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 160;
    display: flex;
    flex-direction: column;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0)) !important;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
  }

  .members-panel[hidden] {
    display: none !important;
  }

  .members-list,
  #members-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .member-row {
    grid-template-columns: 40px 1fr !important;
    gap: 4px 10px;
    padding: 10px 8px;
  }

  .member-presence {
    grid-column: 2;
    font-size: 0.78rem !important;
  }

  .accueil-live-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .accueil-live-chip {
    width: 76px;
    min-height: 88px;
  }

  .accueil-servers-grid,
  .accueil-links-grid {
    grid-template-columns: 1fr !important;
  }

  .accueil-admin-range,
  .spoil-admin-row {
    grid-template-columns: 1fr !important;
  }

  /* ----- EDT Staff : scroll latéral des jours ----- */
  .page[data-page-view="staff"].is-active .edt-card,
  .page.is-active[data-page-view="staff"] .edt-card {
    overflow: hidden !important;
  }

  .edt-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain;
    min-height: min(52dvh, 420px) !important;
  }

  .edt-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(132px, 1fr)) !important;
    min-width: 980px !important;
    width: max-content;
    max-width: none !important;
  }

  .edt-day {
    min-width: 132px;
  }

  /* ----- Absence calendrier ----- */
  .week-cal {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .week-cal-head,
  .week-cal-body {
    min-width: 720px;
  }

  .absence-motif-field {
    min-width: 0 !important;
    width: 100%;
  }

  .absence-toolbar,
  .absence-week-nav {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ----- Registre / Appel ----- */
  .registre-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .registre-table-wrap,
  .appel-table-wrap,
  .edt-scroll,
  .admin-scroll,
  .demande-scroll,
  .office-page-scroll,
  .ticket-view-scroll,
  .hierarchie-scroll,
  .aide-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .registre-table-head,
  .registre-row {
    min-width: 640px;
  }

  /* ----- Anim / Ticket / Recrutement ----- */
  .anim-list,
  .ticket-layout,
  .ticket-type-grid,
  .recrutement-grid,
  .cand-grid,
  .cand-grid-3,
  .cand-published-grid,
  .demande-type-picker,
  .demande-media-grid,
  .notions-grid {
    grid-template-columns: 1fr !important;
  }

  .ticket-chat-messages {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .ticket-chat-form {
    grid-template-columns: 1fr !important;
  }

  .ticket-chat-form .btn {
    width: 100%;
  }

  .cand-choice-row {
    flex-wrap: wrap;
  }

  .cand-submit {
    min-width: 0 !important;
    width: 100%;
  }

  .demande-view-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* ----- Office ----- */
  .office-paper {
    padding: 22px 16px 36px !important;
  }

  .office-select-font {
    min-width: 0 !important;
    flex: 1 1 140px;
  }

  .reglement-hero {
    padding: 16px !important;
  }

  .settings-avatar-block {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================================
   ≤ 560px
   ============================================================================= */
@media (max-width: 560px) {
  html[data-platform="web"] .titlebar-title {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-view .brand-panel {
    min-height: 120px !important;
  }

  .auth-view .brand-logo {
    width: min(110px, 38vw) !important;
  }

  .auth-view .brand-tag {
    letter-spacing: 0.12em;
    font-size: 0.6rem;
  }

  .loading-card {
    width: min(100%, calc(100vw - 24px));
    padding: 18px 14px;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions .btn {
    width: 100%;
  }

  .hero-welcome {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-view .status-chip {
    width: 100%;
    justify-content: flex-start;
  }

  .accueil-animations-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .accueil-animations-cta .btn,
  .accueil-animations-btn {
    width: 100%;
    min-width: 0 !important;
  }

  .members-panel {
    width: 100vw !important;
    left: 0;
    right: 0;
  }

  .edt-grid {
    grid-template-columns: repeat(7, minmax(120px, 1fr)) !important;
    min-width: 880px !important;
  }

  .edt-day {
    min-height: 200px !important;
    min-width: 120px;
  }

  .edt-header-row,
  .edt-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .appel-table-head {
    display: none;
  }

  .appel-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 12px;
  }

  .appel-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .appel-footer .btn {
    width: 100%;
  }

  .event-form-body {
    overflow-y: auto !important;
    max-height: min(65dvh, 520px) !important;
    -webkit-overflow-scrolling: touch;
  }

  .profile-banner {
    height: 120px !important;
    min-height: 120px !important;
  }

  .office-paper {
    padding: 16px 12px 28px !important;
  }

  .office-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .settings-buttons .btn {
    width: 100%;
  }

  .aide-grid {
    grid-template-columns: 1fr !important;
  }

  .media-lightbox-nav.is-prev {
    left: 6px;
  }

  .media-lightbox-nav.is-next {
    right: 6px;
  }
}

/* =============================================================================
   ≤ 380px
   ============================================================================= */
@media (max-width: 380px) {
  .accueil-live-chip {
    width: 64px;
    min-height: 76px;
  }

  .nav-btn {
    font-size: 0.88rem;
  }

  .registre-kpis {
    grid-template-columns: 1fr !important;
  }

  .week-cal-head,
  .week-cal-body {
    min-width: 640px;
  }
}

/* =============================================================================
   981–1200
   ============================================================================= */
@media (min-width: 981px) and (max-width: 1200px) {
  html[data-platform="web"] .dashboard-view {
    grid-template-columns: 220px 1fr;
  }
}

/* Touch */
@media (hover: none) and (pointer: coarse) {
  .nav-btn,
  .chip-opt,
  button.btn,
  .members-toggle,
  .accueil-live-chip,
  .member-row,
  .admin-tab {
    touch-action: manipulation;
  }

  .side-nav,
  .side-nav .nav-btn {
    touch-action: pan-y;
  }
}