/* ===== UPC Administration / Bulletins - correctifs responsive v12.6 =====
   Chargé EN DERNIER (après pro.css / premium.css). N'agit que sur les écrans <= 900px :
   l'affichage ordinateur (> 900px) n'est PAS modifié. */
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body{flex-direction:column}
  main{min-width:0;max-width:100%;width:100%}
  /* ----- Menu latéral : il devient un tiroir (ouvert avec « ☰ Menu »), il ne prend plus de place en haut ----- */
  aside{position:relative!important;z-index:60!important;width:0!important;height:0!important;min-height:0!important;
    padding:0!important;margin:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
  aside>.brand{display:none!important}
  aside>.nav-toggle{display:none!important;position:fixed;top:12px;left:12px;z-index:70;
    background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:9px 14px}
  body:has(nav.open) aside>.nav-toggle{display:inline-flex!important}
  nav{width:min(84vw,320px)!important;max-width:320px;padding-top:64px!important;-webkit-overflow-scrolling:touch}
  nav button{min-height:46px}
  /* ----- En-tête : bouton Menu + titre sur la 1re ligne, actions ensuite, recherche en dessous ----- */
  header{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 10px!important;padding:10px 12px!important}
  header #openNavBtn{order:1;flex:0 0 auto;display:inline-flex!important;align-items:center;min-height:42px;margin:0}
  header .header-title-block{order:2;flex:1 1 0!important;min-width:0!important;display:flex;align-items:center;gap:10px}
  header .header-title-block h1{font-size:18px;line-height:1.2;margin:0;overflow-wrap:anywhere}
  header .header-title-block p{display:none}
  header .header-brand-logo{flex:0 0 auto}
  header .header-brand-logo img{width:38px;height:38px;object-fit:contain}
  header .top-actions{order:3;flex:1 0 100%;width:100%;display:flex!important;flex-wrap:wrap!important;gap:6px!important;justify-content:flex-start!important;align-items:center}
  header .top-actions>*{flex:0 1 auto;min-width:0;max-width:100%}
  header .top-actions button,header .top-actions select{min-height:40px;font-size:12.5px;padding:7px 11px;white-space:nowrap}
  header .top-actions #addStudentBtn{flex:1 1 auto}
  header .global-search{order:4;flex:1 0 100%;width:100%!important;max-width:100%!important;margin:0!important;display:flex;align-items:center;gap:6px}
  header .global-search input{flex:1;min-width:0;height:42px;font-size:16px!important}
  .user-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* ----- Contenu ----- */
  .page,#app{max-width:100%;min-width:0}
  .panel,.card,.toolbar,.modal .box{min-width:0;max-width:100%}
  .toolbar{display:flex;flex-wrap:wrap;gap:8px}
  .toolbar>*,.filters-row>*{flex:1 1 150px;min-width:0}
  .filters-row{display:flex;flex-wrap:wrap;gap:8px;width:100%;box-sizing:border-box;max-width:100%;padding-right:2px}
  .filters-row>*{box-sizing:border-box;flex:1 1 100%!important}
  .filters-row select,.filters-row input{width:100%;min-width:0!important;max-width:100%}
  /* cartes empilées des tableaux : le contenu ne déborde plus de la carte */
  table.table.pr-stack tr{box-sizing:border-box;width:100%!important}
  table.table.pr-stack td{box-sizing:border-box;width:auto!important;max-width:100%;overflow-wrap:anywhere}
  .toolbar input,.toolbar select{min-width:0!important;width:100%}
  .toolbar input{flex:1 1 100%}
  .table-wrap,.tablewrap,.table-scroll,.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .panel{overflow-x:auto}
  img,svg,canvas,video{max-width:100%}
  .modal{padding:8px!important;align-items:flex-start!important;overflow-y:auto!important}
  .modal .box{width:100%!important;max-width:100%!important;max-height:none;margin:0 auto;border-radius:14px}
  .form-grid,.grid-2,.grid-3,.config-grid{grid-template-columns:minmax(0,1fr)!important}
  .actions-cell{min-width:0!important;flex-wrap:wrap}
  .app-footer{max-width:100%;overflow:hidden}
  #footerMarquee{max-width:100%}
  /* évite le zoom automatique d'iPhone dans les champs */
  input,select,textarea{font-size:16px}
  .center-toast{padding:12px}
  .ct-box{width:100%!important;max-width:100%}
}
@media (min-width:560px) and (max-width:900px){
  .filters-row>*{flex:1 1 180px!important}
}
@media (max-width:700px){
  header .top-actions #prModel{display:none}      /* choix du modèle visuel : réservé aux grands écrans */
  .cards{grid-template-columns:minmax(0,1fr)!important}
  .report-kpis,.promo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .si-layout,.dash-charts{grid-template-columns:minmax(0,1fr)!important}
  .page{padding:14px 12px!important}
  .upc-hero{padding:18px!important}
  .tabs,.sub-tabs,.tab-row{flex-wrap:wrap}
}
@media (max-width:420px){
  header .top-actions .switch-app-btn,header .top-actions .cross-app-btn{flex:1 1 auto}
  header .top-actions #themeBtn{flex:1 1 auto}
  .cards,.report-kpis,.promo-kpis{grid-template-columns:minmax(0,1fr)!important}
  .page{padding:12px 9px!important}
  .panel{padding:12px!important}
}
/* Tablettes en portrait (768) : même confort, 2 colonnes pour les cartes */
@media (min-width:601px) and (max-width:900px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  header .top-actions{justify-content:flex-end!important}
  header .header-title-block p{display:block;font-size:11.5px}
}
/* Paysage téléphone (peu de hauteur) */
@media (max-height:480px) and (orientation:landscape){
  .modal{align-items:flex-start!important}
}