/*
 * responsive.css
 * Refonte responsive globale (mobile + tablette + desktop)
 * Breakpoints DSFR officiels : sm=576px, md=768px, lg=992px, xl=1248px
 *
 * Sections :
 *   1. RESET ET CONTAINER
 *   2. UTILITIES RESPONSIVE
 *   3. CORRECTIFS GLOBAUX
 *   4. CORRECTIFS PAR PAGE
 */

/* ============================================================
 * 1. RESET ET CONTAINER
 * ============================================================ */

/* Container adaptatif : 1400px desktop -> padding reduit mobile.
 * Cible aussi le selecteur specifique .fr-container.fr-my-4w utilise
 * dans base.html (max-width: 1400px override). */
@media (max-width: 992px) {
  .fr-container.fr-my-4w {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}
@media (max-width: 768px) {
  .fr-container,
  .fr-container.fr-my-4w {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}
@media (max-width: 576px) {
  .fr-container,
  .fr-container.fr-my-4w {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* Header service title : font adaptative pour eviter coupure sur mobile */
@media (max-width: 768px) {
  .fr-header__service-title { font-size: clamp(0.95rem, 3.5vw, 1.25rem); }
  .fr-header__service-tagline { font-size: 0.8rem; }
  .fr-header__tools .fr-btns-group { flex-wrap: wrap; gap: 4px; }
  .fr-header__tools .fr-btn { font-size: 0.8rem; padding: 4px 8px; }

  /* Dropdown "Parametres" custom : se comporte en sous-liste empilee
   * dans le menu burger mobile (sinon position:absolute -> hors ecran) */
  .nav-dropdown-custom .dropdown-menu-custom {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    min-width: 0 !important;
    padding: 0 0 0 1rem !important;
  }
  .nav-dropdown-custom.open .dropdown-menu-custom { display: block; }
}

/* ============================================================
 * 2. UTILITIES RESPONSIVE
 * ============================================================ */

/* Empile les enfants en colonne unique sous md (768px) */
@media (max-width: 768px) {
  .stack-md {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .stack-md > * {
    width: 100% !important;
  }
}

/* Empile les enfants en colonne unique sous lg (992px) */
@media (max-width: 992px) {
  .stack-lg {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .stack-lg > * {
    width: 100% !important;
  }
}

/* Wrapper qui rend une table scrollable horizontalement sous md */
.scroll-x-md {
  width: 100%;
}
@media (max-width: 768px) {
  .scroll-x-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  .scroll-x-md > table {
    min-width: max-content;
  }
}

/* Groupe de boutons d'actions : wrap automatique */
.actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Visibilite conditionnelle */
@media (max-width: 768px) {
  .hide-md { display: none !important; }
}
@media (min-width: 769px) {
  .show-md-only { display: none !important; }
}

/* ============================================================
 * 3. CORRECTIFS GLOBAUX
 * ============================================================ */

/* Tables : scroll horizontal automatique sous md (filet de sécurité) */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Inputs avec largeur fixe inline (concordance_colonnes : 60+ occurrences)
 * On force 100% sous md pour eviter le debordement.
 * A terme : remplacer les inline par des classes. */
@media (max-width: 768px) {
  input[style*="width:"],
  select[style*="width:"],
  textarea[style*="width:"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Panel d'analyse-indicator (base.html : position fixed top-right, 320px)
 * Sous md, on l'etale sur quasi-tout l'ecran */
@media (max-width: 768px) {
  #analyse-indicator-panel,
  .analyse-indicator-panel {
    width: calc(100vw - 2rem) !important;
    max-width: calc(100vw - 2rem) !important;
    right: 1rem !important;
    left: 1rem !important;
  }
}

/* Boutons : eviter le debordement sur petites largeurs */
@media (max-width: 576px) {
  .fr-btn,
  .fr-btns-group .fr-btn {
    white-space: normal;
    word-break: break-word;
  }
}

/* Forms : labels et inputs en pleine largeur sous md */
@media (max-width: 768px) {
  .fr-input,
  .fr-select,
  input.form-control,
  select.form-control {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
 * 4. CORRECTIFS PAR PAGE
 * ============================================================ */

/* ----- calculs.html ----- */
@media (max-width: 992px) {
  .filtres-row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .resume-stats { grid-template-columns: 1fr !important; }
  .resume-stat { padding: 15px; }
  .calcul-card { padding: 15px; }
}
@media (max-width: 576px) {
  .btn-preastreinte { padding: 10px 16px; font-size: 0.85rem; }
}

/* ----- sessions_calcul.html ----- */
@media (max-width: 768px) {
  .filters-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .per-page-bar {
    flex-wrap: wrap;
  }
  .sessions-table th,
  .sessions-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  .accordion-toggle-btn {
    padding: 12px 14px;
    font-size: 0.9rem;
  }
}

/* ----- erreurs_list.html (.err-page) + erreur_detail.html (.err-detail-page) ----- */
@media (max-width: 1440px) {
  .err-page,
  .err-detail-page { max-width: 100%; padding: 0 0.5rem; }
}
@media (max-width: 768px) {
  .err-filters select,
  .err-filters input[type=text] {
    min-width: 0 !important;
    width: 100% !important;
  }
  .err-filters .field-group,
  .err-filters .field-search { flex: 1 1 100%; }
  .err-table { font-size: 0.75rem; }
}

/* ----- pagination globale (utilisee dans plusieurs pages) ----- */
.pagination {
  flex-wrap: wrap !important;
}
@media (max-width: 576px) {
  .pagination a,
  .pagination span {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }
}

/* ----- concordance_colonnes.html ----- */
@media (max-width: 768px) {
  .actions-cell { flex-wrap: wrap; gap: 4px; }
  /* .form-row a deja flex-wrap, mais on force le full-width des form-group < md */
  .form-row .form-group { flex: 1 1 100%; }
}

/* ----- detail_jour_pa.html ----- */
@media (max-width: 768px) {
  /* Aligne le breakpoint local 600px sur DSFR md=768px */
  .dates-recap { grid-template-columns: 1fr !important; }
  .etape { flex-direction: column; gap: 8px; }
  .etape-num { width: 24px; height: 24px; font-size: 12px; }
  .detail-table { font-size: 11px; }
  .explication-card { padding: 12px; }
}

/* ----- monitoring_imports.html (.mon-page) ----- */
@media (max-width: 1440px) {
  .mon-page { max-width: 100%; padding: 0 0.5rem; }
}
@media (max-width: 768px) {
  .mon-page h1 { font-size: 1.4rem; }
  .mon-infra { grid-template-columns: 1fr !important; }
  .mon-section { padding: 0.75rem; }
  .mon-table th, .mon-table td { font-size: 0.75rem; padding: 0.4rem 0.4rem; }
  .mon-actions { flex-direction: column; align-items: stretch; }
  .mon-actions > * { width: 100%; }
}