/* Couche responsive globale AFMPRO — chargée après les styles des modules. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}

@media(max-width:800px){
  body{font-size:14px}
  .sidebar{width:min(86vw,310px);z-index:1000;overflow-y:auto;padding-bottom:max(20px,env(safe-area-inset-bottom));box-shadow:18px 0 45px rgba(0,0,0,.25)}
  .sidebar.open:after{content:"";position:fixed;inset:0 0 0 min(86vw,310px);background:rgba(7,35,15,.42);backdrop-filter:blur(2px)}
  .main{width:100%;min-width:0}
  .topbar{height:62px;padding:0 12px;gap:7px}
  .topbar-title{min-width:0;flex:1}
  .topbar-title img{width:50px!important;height:36px!important;object-fit:contain}
  .topbar-title span{min-width:0}
  .topbar-title strong{display:block;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px!important}
  .topbar-title small{display:none!important}
  .mobile-menu{flex:0 0 40px;width:40px;height:40px;margin-right:2px;font-size:20px}
  .dashboard-action-bar{margin:8px 10px 0!important;padding:8px!important;min-height:54px}
  .dashboard-action-bar .top-actions{gap:6px;overflow:visible}
  .dashboard-action-bar .primary-btn,.dashboard-action-bar .secondary-btn{min-height:40px;padding:9px 11px}
  .notification-panel{position:fixed!important;left:10px!important;right:10px!important;top:70px!important;width:auto!important;max-height:calc(100dvh - 85px);overflow:auto}
  .page{width:100%;padding:18px 12px 35px}
  .page-heading{gap:12px;margin-bottom:18px}
  .page-heading>div{min-width:0}
  .page-heading h1{font-size:23px;line-height:1.15;overflow-wrap:anywhere}
  .page-heading p{font-size:11px;line-height:1.45}
  .heading-actions,.list-output-actions,.form-actions,.panel-head,.table-tools{flex-wrap:wrap}
  .heading-actions{width:100%;gap:8px}
  .heading-actions>*{flex:1 1 140px}
  .panel{min-width:0;padding:15px;border-radius:12px}
  .table-panel{padding:0}
  .table-tools{align-items:stretch;gap:8px;padding:12px}
  .table-tools>*{flex:1 1 160px;width:auto!important;max-width:none!important}
  .table-scroll,.portal-table-wrap,.students-table-scroll,.grade-scale-scroll,.softskills-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .table-scroll:after,.portal-table-wrap:after{content:"Faites glisser horizontalement pour voir la suite";display:block;position:sticky;left:0;width:max-content;padding:7px 10px;color:#6c7e70;font-size:9px;font-weight:700}
  table{font-size:12px}
  th,td{white-space:nowrap}
  td{padding:11px 10px}
  .modal-backdrop{align-items:end;padding:0}
  .modal{width:100%;max-height:92dvh;overflow-y:auto;border-radius:20px 20px 0 0;padding:24px 16px max(22px,env(safe-area-inset-bottom))}
  .modal-close{position:sticky;z-index:2;float:right;top:0;width:40px;height:40px;border-radius:50%;background:#eef5ee}
  .form-grid{grid-template-columns:1fr!important}
  .form-grid .full{grid-column:auto!important}
  .form-grid input,.form-grid select,.form-grid textarea{min-height:44px;font-size:16px}
  .form-actions{gap:8px}
  .form-actions button{flex:1 1 130px;min-height:44px}
  .kpi-grid,.cards-grid,.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attendance-course{grid-template-columns:1fr;gap:10px}
  .attendance-course .progress{width:100%}
  .toast{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));text-align:center}
}

@media(max-width:560px){
  .kpi-grid,.cards-grid,.report-grid,.dashboard-grid,.two-cols{grid-template-columns:1fr!important}
  .mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .mini-kpis>div{padding:13px 11px}
  .page-heading{align-items:stretch!important}
  .page-heading>button,.page-heading>.secondary-btn{width:100%;min-height:44px}
  .panel-head{align-items:stretch!important;flex-direction:column;gap:10px}
  .search-small{width:100%}
  .chart-legend{gap:8px;flex-wrap:wrap}
  .bar-chart{overflow-x:auto}
  .login-panel{min-height:100dvh;padding:18px 12px!important;justify-content:center}
  .login-access-tabs{width:100%!important;margin-bottom:8px!important}
  .login-card{width:100%!important;padding:22px 17px!important;border-radius:18px!important}
  .login-card h2{font-size:28px!important}
  .login-card input,.login-card select{min-height:48px;font-size:16px!important}
  .login-submit{width:100%;min-height:48px}
  .external-portal-header{gap:8px;padding:9px 10px!important}
  .external-portal-header img{width:44px!important}
  .external-portal-header strong{font-size:12px!important}
  .external-portal-header small{font-size:9px}
  .external-portal-header button{padding:9px 10px;font-size:10px}
  #external-portal-content:has(.student-portal-shell),#external-portal-content{width:100%!important;margin:0!important;padding:10px}
  .student-portal-shell{gap:10px}
  .student-portal-menu{border-radius:14px}
  .student-portal-menu nav{gap:5px;padding:7px}
  .student-portal-menu button{padding:9px 10px;font-size:11px}
  .student-portal-menu button i{width:26px;height:26px}
  .student-welcome{min-height:auto;padding:19px 17px!important;border-radius:15px}
  .student-welcome h1{font-size:24px!important}
  .student-welcome-badge{width:100%;min-width:0}
  .portal-section-title{align-items:flex-start;flex-direction:column;margin:17px 2px 10px}
  .portal-section-title h2{font-size:21px}
  .portal-section-title button{width:100%}
  .portal-kpi-grid{grid-template-columns:1fr 1fr!important;gap:8px}
  .portal-kpi-grid article{min-height:125px;padding:13px}
  .portal-kpi-grid article>strong{font-size:22px}
  .portal-card{padding:15px;border-radius:14px}
  .portal-grade-terms{grid-template-columns:1fr!important;gap:7px}
  .portal-grade-terms>div{border-right:0;border-bottom:1px solid #dbe8dc}
  .portal-grade-terms>div:last-child{border-bottom:0}
  .softskills-intro{padding:19px 16px}
  .diploma-review-grid{gap:8px}
  .diploma-review-grid label{padding:12px}
  .diploma-consent{align-items:flex-start}
  .diploma-review .primary-btn{width:100%;min-height:46px}
  .diploma-actions{min-width:150px}
  .diploma-actions button{flex:1;min-height:38px}
}

@media(max-width:380px){
  .mini-kpis,.portal-kpi-grid{grid-template-columns:1fr!important}
  .topbar-title strong{max-width:38vw}
  .page{padding-inline:9px}
}