/* ============================================================
   remind-r.eu -- Responsive (systeme canonique 6 breakpoints)
   Echelle officielle (spec Gilles 06/06/2026) :
     480 / 768 / 1024 / 1280 / 1440 / 1920
   Fluide ENTRE les paliers (clamp) -> rendu correct a toute taille.
   App-shell partage (backoffice + entreprise via main.css). Les espaces
   formateur / employe reprennent les MEMES paliers dans leur CSS dedie.
   ============================================================ */

/* --- Base fluide : respire a toute largeur, sans palier --- */
:root {
  --content-pad: clamp(1rem, 2.5vw, 2rem);
}
.content { padding: var(--content-pad); }
.content-inner,
.content > .container { max-width: var(--content-max-w); margin-inline: auto; }

/* Grilles fluides par defaut : s'adaptent sans attendre un palier. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ============================================================
   1) >= 1920px : tres grands ecrans / ultra-wide
   On borne la lecture et on densifie un peu les KPI.
   ============================================================ */
@media (min-width: 1920px) {
  :root { --content-max-w: 1600px; }
  .kpi-grid { grid-template-columns: repeat(5, 1fr); }
  .content { padding: 2.25rem 2.5rem; }
  body { font-size: 1.0625rem; }
}

/* ============================================================
   2) <= 1440px : grand desktop (cible confort par defaut)
   ============================================================ */
@media (max-width: 1440px) {
  :root { --content-max-w: 1320px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   3) <= 1280px : desktop compact -- KPI 2 colonnes, sidebar plus fine
   ============================================================ */
@media (max-width: 1280px) {
  :root { --sidebar-w: 232px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   4) <= 1024px : tablette paysage -- sidebar en tiroir (drawer)
   ============================================================ */
@media (max-width: 1024px) {
  .app-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "content";
  }

  .sidebar {
    position: fixed;
    left: -300px;
    top: 0;
    width: 280px;
    height: 100vh;
    z-index: var(--z-overlay);
    transition: left var(--dur-3, 0.3s) var(--ease-out-soft, ease);
  }
  .sidebar.is-open { left: 0; box-shadow: var(--shadow-xl); }

  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 64, 0.45);
    z-index: var(--z-overlay);
    display: none;
  }
  .sidebar-overlay.is-open { display: block; }

  .topbar-hamburger { display: flex; }

  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }

  .topbar-search { width: 180px; }
}

/* ============================================================
   5) <= 768px : tablette portrait / mobile
   ============================================================ */
@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr; }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .content-header-actions { width: 100%; display: flex; gap: 0.5rem; }
  .content-header-actions .btn { flex: 1; }

  .topbar { padding: 0 1rem; }
  .topbar-search { display: none; }

  .form-row { grid-template-columns: 1fr; }

  .modal {
    max-width: 100%;
    border-radius: var(--radius-lg);
    margin: 0.5rem;
  }

  .data-table { font-size: 0.8125rem; }
  .data-table thead th,
  .data-table tbody td { padding: 0.5rem 0.625rem; }

  /* Actions de ligne toujours visibles au tactile (pas de hover) */
  .row-actions { opacity: 1; }

  /* Co-branding : empile remind-r / idewe pour ne pas deborder */
  .cobrand { gap: 0.6rem; }
  .cobrand-sep { height: 1.5rem; }

  /* Cibles tactiles >= 44px (accessibilite mobile) */
  .btn, .icon-btn, .tab, .nav-link { min-height: 44px; }
}

/* ============================================================
   6) <= 480px : petit mobile
   ============================================================ */
@media (max-width: 480px) {
  :root { --content-pad: 0.875rem; }

  .login-card { padding: 1.5rem 1.25rem; }
  .login-sso-grid { grid-template-columns: 1fr; }

  /* Wordmark remind-r masque dans le lockup : on garde les deux marques + idewe */
  .cobrand .brand-word-rmr { display: none; }
  .cobrand { gap: 0.5rem; }
  .cobrand-eyebrow { display: none; }

  .content-header h1,
  .page-title { font-size: 1.125rem; }

  /* Tables denses : scroll horizontal plutot que casse de layout */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}