*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  background:#eef2f6;
  color:#0f172a;
}

.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0b1d39,#123b6d);
}

.login-card{
  width:400px;
  background:#ffffff;
  border-radius:20px;
  padding:34px;
  box-shadow:0 22px 60px rgba(0,0,0,.24);
}

.login-brand h1{
  margin:0 0 6px 0;
  color:#0f172a;
}

.login-brand p{
  margin:0 0 24px 0;
  color:#64748b;
}

.login-card label{
  display:block;
  margin:12px 0 6px;
  font-size:14px;
  font-weight:600;
}

.login-card input{
  width:100%;
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  outline:none;
  font-size:14px;
}

.login-card input:focus{
  border-color:#0ea5e9;
}

.login-card button{
  width:100%;
  margin-top:18px;
  padding:13px;
  border:none;
  border-radius:12px;
  background:#0f172a;
  color:white;
  font-weight:700;
  cursor:pointer;
}

.error-box{
  margin-top:14px;
  color:#b91c1c;
  font-size:14px;
}

.dashboard-shell{
  display:flex;
  min-height:100vh;
  align-items:stretch;
}

.sidebar{
  width:210px;
  flex-shrink:0;
  background:linear-gradient(180deg,#081a33 0%, #0a2242 100%);
  color:#fff;
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.main-area{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:100vh;
  padding:12px 18px 24px;
  background:#f3f6fb;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
  flex-shrink:0;
}

.topbar-left{
  min-width:0;
}

/* La fleche retour de la coquille — visible sur tout ecran atteint par navigation,
   masquee sur l'accueil ou il n'y a rien derriere. */
.topbar-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:9px;
  width:36px;
  height:36px;
  font-size:15px;
  color:#334155;
  cursor:pointer;
  margin-right:12px;
  flex-shrink:0;
  transition:background .12s ease, border-color .12s ease;
}
.topbar-back-btn:hover{ background:#f1f5f9; border-color:#94a3b8; }
.topbar-back-btn:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.topbar-back-btn[hidden]{ display:none !important; }

.topbar-left h1{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:#0f172a;
}

.topbar-left p{
  margin:4px 0 0;
  font-size:14px;
  color:#64748b;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}

.topbar-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}

.top-action-btn{
  width:42px;
  height:42px;
  border:1px solid #d9e2ec;
  background:#fff;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.15s ease;
  padding:0;
}

.top-action-btn:hover{
  background:#f8fafc;
  border-color:#bfc9d4;
}

.top-action-icon{
  width:20px;
  height:20px;
  display:block;
}

.topbar-user-card{
  background:#fff;
  border-radius:14px;
  padding:10px 14px;
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
  min-width:170px;
}

.topbar-user-name{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}

.topbar-user-role{
  font-size:13px;
  color:#64748b;
}

#page-content{
  display:block;
  width:100%;
  margin-top:0;
}

.sidebar-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.logo-box{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#15375f;
  font-size:22px;
}

.brand-text h2{
  margin:0;
  font-size:20px;
}

.brand-text span{
  display:inline-block;
  margin-top:4px;
  color:#93c5fd;
  font-size:12px;
  background:rgba(255,255,255,.08);
  padding:3px 8px;
  border-radius:999px;
}

.menu-section-title{
  margin:18px 8px 10px;
  font-size:11px;
  letter-spacing:.08em;
  color:#6fa0d6;
  font-weight:700;
}

.menu-list{
  list-style:none;
  padding:0;
  margin:0;
}

.menu-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0;
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  color:#dce9f8;
  transition:.2s ease;
  font-weight:600;
}

.menu-list li:hover{
  background:rgba(255,255,255,.08);
}

.menu-list li.active{
  background:#1d4ed8;
  color:white;
  box-shadow:0 10px 24px rgba(29,78,216,.26);
}

.menu-icon-wrap{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.menu-icon{
  width:18px;
  height:18px;
}

.sidebar-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}

.status-box{
  background:rgba(59,130,246,.12);
  color:#93c5fd;
  border:1px solid rgba(134,239,172,.18);
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  margin-bottom:14px;
}

.user-card{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.user-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#dbeafe;
  color:#1e3a8a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.user-name{
  font-weight:700;
  font-size:14px;
}

.user-role{
  font-size:12px;
  color:#a9c7ea;
}

.logout-btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
  background:#ffffff;
  color:#0b2545;
  font-weight:700;
  cursor:pointer;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-bottom:18px;
}

.kpi-card{
  background:#fff;
  border-radius:16px;
  padding:18px 16px;
  box-shadow:0 6px 16px rgba(15,23,42,0.06);
  border:1px solid #eef2f7;
}

.kpi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.kpi-value{
  font-size:28px;
  font-weight:800;
  color:#0f172a;
  line-height:1;
}

.kpi-label{
  margin-top:6px;
  font-size:14px;
  color:#64748b;
}

.kpi-icon-box{
  width:46px;
  height:46px;
  border-radius:12px;
  background:#f1f5f9;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.kpi-icon-svg{
  width:22px;
  height:22px;
  display:block;
}

svg{
  max-width:100%;
  max-height:100%;
}

.menu-icon,
.ui-icon,
.classroom-row-icon,
assignment-row-icon,
grade-row-icon,
message-row-icon,
kpi-icon-svg,
.top-action-icon{
  width:20px;
  height:20px;
  display:block;
  flex-shrink:0;
}

.dashboard-row{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

.panel{
  background:white;
  border-radius:16px;
  padding:16px;
  border:1px solid #e7edf5;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}

.panel h3{
  margin:0 0 16px 0;
  font-size:15px;
  font-weight:800;
}

.plan-chart{
  display:flex;
  align-items:flex-end;
  gap:18px;
  height:170px;
  padding:12px 8px 0;
}

.plan-bar-wrap{
  flex:1;
  text-align:center;
}

.plan-bar{
  width:100%;
  background:#bfdbfe;
  border-radius:10px 10px 0 0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  color:#0f172a;
  font-weight:800;
  padding-top:8px;
}

.plan-label{
  margin-top:8px;
  font-size:13px;
  color:#64748b;
}

.activity-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.activity-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid #edf2f7;
}

.activity-item:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.activity-left{
  display:flex;
  gap:12px;
}

.activity-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#334155;
}

.activity-icon-svg{
  width:18px;
  height:18px;
}

.activity-title{
  font-weight:700;
  font-size:14px;
}

.activity-sub{
  font-size:13px;
  color:#64748b;
  margin-top:4px;
}

.activity-time{
  font-size:12px;
  color:#64748b;
  white-space:nowrap;
}

.large-panel{
  background:white;
  border-radius:16px;
  padding:16px;
  border:1px solid #e7edf5;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}

.large-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.large-panel-header h3{
  margin:0;
  font-size:15px;
  font-weight:800;
}

.link-btn{
  border:1px solid #1d4ed8;
  color:#1d4ed8;
  background:white;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
}

.table-wrap{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th, td{
  text-align:left;
  padding:14px 12px;
  border-bottom:1px solid #edf2f7;
  font-size:14px;
}

th{
  color:#64748b;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:#f8fafc;
}

.school-name-cell{
  display:flex;
  align-items:center;
  gap:12px;
}

.school-logo-mini{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#bfdbfe;
  color:#1e3a8a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:13px;
}

.school-name-main{
  font-weight:700;
}

.school-name-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.badge{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.badge-plan-standard{
  background:#dbeafe;
  color:#1d4ed8;
}

.badge-plan-starter{
  background:#fef3c7;
  color:#b45309;
}

.badge-plan-premium{
  background:#e9d5ff;
  color:#7e22ce;
}

.badge-status-active{
  background:#dcfce7;
  color:#15803d;
}

.badge-status-inactive{
  background:#fee2e2;
  color:#b91c1c;
}

.simple-panel{
  background:white;
  border-radius:16px;
  padding:16px;
  border:1px solid #e7edf5;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
}

.simple-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-bottom:16px;
}

.simple-card{
  background:white;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:16px;
}

.option-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.option-chip{
  background:#eff6ff;
  color:#1e3a8a;
  border:1px solid #a7f3d0;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

pre.json-box{
  background:#081529;
  color:#f8fafc;
  padding:16px;
  border-radius:12px;
  overflow:auto;
  font-size:13px;
}

@media (max-width:1200px){
  .kpi-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

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

@media (max-width:900px){
  .dashboard-shell{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
  }

  .topbar-right{
    width:100%;
    justify-content:space-between;
  }
}

.course-cell{
  display:flex;
  align-items:center;
  gap:12px;
}

.course-color-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  flex-shrink:0;
}

.course-name-main{
  font-weight:700;
}

.course-name-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.assignment-cell{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.assignment-icon-box{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#eef2ff;
  color:#4338ca;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.assignment-row-icon{
  width:18px;
  height:18px;
}

.assignment-name-main{
  font-weight:700;
}

.assignment-name-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
  max-width:420px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.grade-cell{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.grade-icon-box{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#eff6ff;
  color:#1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.grade-row-icon{
  width:18px;
  height:18px;
}

.grade-name-main{
  font-weight:700;
}

.grade-name-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.performance-chart{
  display:flex;
  align-items:flex-end;
  gap:18px;
  height:170px;
  padding:12px 8px 0;
}

.performance-high{
  background:#bbf7d0;
}

.performance-mid{
  background:#fde68a;
}

.performance-low{
  background:#fecaca;
}

.message-cell{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.message-icon-box{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#ecfeff;
  color:#0f766e;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.message-row-icon{
  width:18px;
  height:18px;
}

.message-subject-main{
  font-weight:700;
}

.message-subject-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
  max-width:420px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.message-summary-grid{
  display:grid;
  gap:12px;
}

.message-summary-item{
  padding:12px;
  border:1px solid #e7edf5;
  border-radius:12px;
  background:#f8fafc;
}

.message-summary-label{
  font-size:12px;
  color:#64748b;
  margin-bottom:6px;
}

.message-summary-value{
  font-weight:700;
  color:#0f172a;
}

.classroom-cell{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.classroom-icon-box{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#eff6ff;
  color:#166534;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.classroom-row-icon{
  width:18px;
  height:18px;
}

.classroom-name-main{
  font-weight:700;
}

.classroom-name-sub{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.empty-state{
  background:white;
  border-radius:16px;
  padding:40px;
  text-align:center;
  color:#64748b;
  border:1px solid #e7edf5;
}

.modal-open {
  overflow: hidden;
}

.modal-sm {
  max-width: 420px;
}

.modal-md {
  max-width: 680px;
}

.modal-lg {
  max-width: 860px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e7edf5;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;
}

.modal-close-btn {
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}

/* ── L'ECHELLE DES COUCHES DE GOGGA ──────────────────────────────────────────
   Elle est ecrite ICI parce qu'elle a deja ete cassee en silence, et qu'un
   z-index isole ne dit jamais a quoi il se compare :

     100000+   bandeau hors-ligne et brouillons — au-dessus de TOUT
      10050    toasts — ils doivent rester lisibles PAR-DESSUS une modale,
               sinon un message d'erreur declenche dans un formulaire modal
               s'affiche derriere l'ecran qui l'a provoque
      10000    modales
       9600    panneau de messages de la reunion
       9500    panneau d'appel  (son propre commentaire annonce « sous les
               modales (10000) » — c'est ce contrat-la qui etait rompu)

   `.modal-overlay` etait declaree DEUX fois dans ce fichier, et la seconde —
   un bloc « MODAL IMPROVEMENTS » qui ne parlait pourtant que d'apparence — la
   ramenait a 200. Toute boite de dialogue ouverte pendant un appel s'affichait
   donc SOUS le panneau d'appel : invisible, et le clic partait dans le vide.
   Les deux declarations portent desormais la meme valeur, pour qu'en supprimer
   une ne reintroduise pas le defaut. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  overflow-y: auto;
}

.modal-card {
  width: 100%;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
  border: 1px solid #e7edf5;
  overflow: hidden;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-body {
  padding: 22px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
}

.gogga-form {
  display: grid;
  gap: 16px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

.form-grid.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-group {
  display: grid;
  gap: 8px;
}

.form-group label {
  font-weight: 600;
  color: #334155;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #123b6d;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-error-box {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.primary-btn,
.secondary-btn,
.danger-btn {
  border: none;
  border-radius: 12px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 600;
}

.primary-btn {
  background: #123b6d;
  color: white;
}

.secondary-btn {
  background: #eef2f7;
  color: #0f172a;
}

.danger-btn {
  background: #dc2626;
  color: white;
}

.toast-box {
  position: fixed;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 10px;
  z-index: 10050;   /* AU-DESSUS des modales — voir l'echelle des couches */
}

.toast-item {
  min-width: 240px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 12px;
  color: white;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  font-size: 14px;
}

.toast-success {
  background: #16a34a;
}

.toast-error {
  background: #dc2626;
}

@media (max-width: 1024px) {
  .form-grid.two-cols {
    grid-template-columns: 1fr;
  }

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

.form-grid.three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .form-grid.three-cols {
    grid-template-columns: 1fr;
  }
}

.clickable-message-row {
  cursor: pointer;
}

.clickable-message-row:hover {
  background: #f8fafc;
}

.message-detail-box {
  display: grid;
  gap: 16px;
}

.message-detail-meta {
  padding: 14px;
  border: 1px solid #e7edf5;
  border-radius: 12px;
  background: #f8fafc;
}

.message-detail-meta p {
  margin: 0 0 8px 0;
}

.message-detail-meta p:last-child {
  margin-bottom: 0;
}

.message-detail-body {
  min-height: 120px;
  padding: 16px;
  border: 1px solid #e7edf5;
  border-radius: 12px;
  background: white;
  color: #0f172a;
  line-height: 1.6;
}

.helper-text {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.small-btn {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.clickable-notification-row:hover {
  background: #f8fafc;
}

.clickable-classroom-row {
  cursor: pointer;
}

.clickable-classroom-row:hover {
  background: #f8fafc;
}

.clickable-course-row {
  cursor: pointer;
}

.clickable-course-row:hover {
  background: #f8fafc;
}

.clickable-assignment-row {
  cursor: pointer;
}

.clickable-assignment-row:hover {
  background: #f8fafc;
}

.clickable-student-row {
  cursor: pointer;
}

.clickable-student-row:hover {
  background: #f8fafc;
}

.search-user-row,
.search-classroom-row,
.search-course-row {
  cursor: pointer;
}

.search-user-row:hover,
.search-classroom-row:hover,
.search-course-row:hover {
  background: #f8fafc;
}

.clickable-user-row {
  cursor: pointer;
}

.clickable-user-row:hover,
.clickable-user-row:focus-visible {
  background: #f8fafc;
}

.clickable-user-row:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.login-extra-actions {
  margin-top: 10px;
  text-align: right;
}

.text-link-btn{
  background:none;
  border:none;
  color:#123b6d;
  cursor:pointer;
  font-size:14px;
  padding:0;
}

.text-link-btn:hover{
  text-decoration:underline;
}

.panel-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-title h3 {
  margin: 0;
}

.panel-subtitle {
  font-size: 13px;
  color: #123b6d;
}

.table-actions {
  display: flex;
  gap: 8px;
}

.table-wrap a {
  color: #123b6d;
  text-decoration: none;
}

.table-wrap a:hover {
  text-decoration: underline;
}

.course-page-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.course-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.view-toggle-group {
  display: inline-flex;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.view-toggle-btn {
  border: none;
  background: #fff;
  min-width: 44px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  padding: 0 12px;
}

.view-toggle-btn.active {
  background: #0f6cbd;
  color: #fff;
}

.course-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.course-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.course-card-banner {
  height: 120px;
  position: relative;
}

.course-card-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px;
  width: 36px;
  height: 36px;
}

.course-card-body {
  padding: 14px 16px 10px;
}

.course-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.course-card-code {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

.course-card-meta {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 5px;
}

.course-card-footer {
  padding: 0 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.media-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.media-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.media-card-thumb {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.media-type-video {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.media-type-audio {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.media-type-document {
  background: linear-gradient(135deg, #059669, #047857);
}

.media-type-link {
  background: linear-gradient(135deg, #ea580c, #c2410c);
}

.media-card-type-label {
  font-size: 12px;
  background: rgba(255,255,255,0.18);
  padding: 4px 8px;
  border-radius: 999px;
}

.media-card-body {
  padding: 14px;
}

.media-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
}

.media-card-desc {
  font-size: 13px;
  color: #4b5563;
  min-height: 38px;
}

.media-card-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

.media-card-footer {
  padding: 0 14px 14px;
}

.modal-container {
  max-width: 900px;
  width: 90%;
  margin: auto;
}

.modal-container.modal-lg {
  max-width: 900px;
}

.modal-container.modal-xl {
  max-width: min(1180px, calc(100vw - 32px));
}

.modal-container.modal-md {
  max-width: 700px;
}

.pdf-preview-frame {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  height: min(76vh, 900px);
  overflow: hidden;
}

.pdf-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.conduct-print-frame {
  width: 100%;
  height: min(76vh, 900px);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.classroom-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.classroom-card {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.classroom-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.classroom-card-banner {
  height: 110px;
  background: linear-gradient(135deg, #0f6cbd, #1d4ed8);
  position: relative;
  padding: 14px 16px;
  display: flex;
  align-items: flex-end;
}

.classroom-card-banner-title {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.classroom-card-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px;
  width: 36px;
  height: 36px;
}

.classroom-card-body {
  padding: 14px 16px 10px;
}

.classroom-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 6px;
}

.classroom-card-meta {
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 5px;
}

.classroom-card-footer {
  padding: 0 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.content-area{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  min-width:0;
  min-height:0;
  padding:0;
}

#page-content {
  display: block;
  width: 100%;
  margin-top: 18px;
}

.announcement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.announcement-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.announcement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.announcement-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.announcement-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.announcement-card-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.announcement-card-date {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.announcement-card-body {
  font-size: 14px;
  color: #374151;
  min-height: 72px;
}

.announcement-card-footer {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.announcement-author {
  font-size: 12px;
  color: #6b7280;
}

.announcement-popover{
  position:absolute;
  top:52px;
  right:0;
  width:360px;
  max-height:480px;
  overflow-y:auto;
  background:#fff;
  border:1px solid #d9e2ec;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(15,23,42,0.14);
  z-index:50;
  padding:12px;
}

.announcement-popover.hidden{
  display:none;
}

.announcement-popover-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.announcement-popover-title{
  font-size:16px;
  font-weight:700;
  color:#111827;
}

.announcement-popover-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.announcement-popover-item{
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  transition:background 0.15s ease;
}

.announcement-popover-item:hover{
  background:#f8fafc;
}

.announcement-popover-item-title{
  font-size:14px;
  font-weight:700;
  color:#111827;
  margin-bottom:4px;
}

.announcement-popover-item-meta{
  font-size:12px;
  color:#6b7280;
  margin-bottom:6px;
}

.announcement-popover-item-body{
  font-size:13px;
  color:#374151;
}

.announcement-empty{
  padding:18px 10px;
  text-align:center;
  color:#6b7280;
}

.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #475569;
}

.calendar-grid-header > div {
  background: #eef2f7;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.calendar-day {
  min-height: 130px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.calendar-day.empty {
  background: transparent;
  border: none;
  box-shadow: none;
}

.calendar-day.today {
  border: 2px solid #0f6cbd;
}

.calendar-day-number {
  font-weight: 800;
  margin-bottom: 8px;
  color: #0f172a;
}

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-event-pill {
  font-size: 12px;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-more {
  font-size: 12px;
  color: #64748b;
}

.calendar-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-upcoming-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}

.calendar-upcoming-item:hover {
  background: #f8fafc;
}

.calendar-upcoming-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.calendar-upcoming-meta {
  font-size: 12px;
  color: #6b7280;
}
/* ━━━ SCHOOL BRANDING VARIABLES ━━━ */
:root {
  --school-primary: #1d4ed8;
}

/* ━━━ LOGIN IMPROVEMENTS ━━━ */
.login-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: none;
  color: #fff;
  font-weight: 800;
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.login-logo.login-user-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #eff6ff;
  border: 3px solid #dbeafe;
  overflow: hidden;
}

.login-logo.login-user-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.login-preview-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-weight: 800;
  font-size: 24px;
}

.login-brand {
  text-align: center;
}

.login-brand p {
  margin: -2px 0 18px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}

.login-user-preview {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  line-height: 1.35;
}

.login-user-preview strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.login-user-preview span {
  color: #475569;
}

.login-submit-btn {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: var(--school-primary);
  color: white;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.login-submit-btn:hover {
  opacity: 0.9;
}

.login-extra-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.link-btn {
  background: none;
  border: none;
  color: #3b82f6;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.link-btn:hover {
  text-decoration: underline;
}

.install-app-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e5e7eb;
}

.install-app-btn {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  cursor: pointer;
}

.install-app-btn:hover {
  background: #eef2ff !important;
  border-color: #93c5fd !important;
}

.install-app-help {
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

/* ━━━ ATTENDANCE STYLES ━━━ */
.att-status-P { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.att-status-A { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.att-status-R { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.att-status-E { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

.att-radio-group {
  display: flex;
  gap: 8px;
}

.att-radio-group label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

/* ━━━ PAYMENT BADGES ━━━ */
.badge-plan-standard {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
}

/* ━━━ MOBILE RESPONSIVE ━━━ */
.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 18px;
  cursor: pointer;
  margin-right: 12px;
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 240px;
  }

  .sidebar.sidebar-open,
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
  }

  .sidebar-overlay.active {
    display: block;
  }

  .main-area {
    width: 100%;
  }

  .mobile-menu-btn {
    display: block;
  }

  .topbar-user-card {
    display: none;
  }

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

  .form-grid.two-cols {
    grid-template-columns: 1fr !important;
  }

  .dashboard-row {
    flex-direction: column !important;
  }

  .modal-card {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .large-panel-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start !important;
  }

  .course-toolbar-actions,
  .panel-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .classroom-card-grid,
  .course-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ━━━ TOAST IMPROVEMENTS ━━━ */
/* Seconde declaration de `.toast-box` — c'est ELLE qui l'emporte (position en
   bas a droite, et non en haut). Sa valeur doit rester au-dessus des modales. */
.toast-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast-item {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  animation: toastSlideIn 0.3s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  max-width: 400px;
}

.toast-success { background: #16a34a; }
.toast-error { background: #dc2626; }
.toast-info { background: #2563eb; }

@keyframes toastSlideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ━━━ FORM ERROR BOX ━━━ */
.form-error-box {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin: 12px 0;
}

/* ━━━ GOGGA TABLE (standardized) ━━━ */
.gogga-table {
  width: 100%;
  border-collapse: collapse;
}

.gogga-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
  background: #f8fafc;
}

.gogga-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13.5px;
}

.gogga-table tr:hover td {
  background: #eff6ff;
}

.table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.table-empty {
  text-align: center;
  color: #94a3b8;
  padding: 20px;
}

/* ━━━ GOGGA FORM ━━━ */
.gogga-form input,
.gogga-form select,
.gogga-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}

.gogga-form input:focus,
.gogga-form select:focus,
.gogga-form textarea:focus {
  border-color: var(--school-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.gogga-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}

.gogga-form .form-group {
  margin-bottom: 16px;
}

.form-grid.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ━━━ CALENDAR IMPROVEMENTS ━━━ */
.calendar-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #e2e8f0;
}

.calendar-day {
  background: #fff;
  min-height: 80px;
  padding: 6px;
  position: relative;
}

.calendar-day.empty {
  background: #f8fafc;
}

.calendar-day.today {
  background: #eff6ff;
}

.calendar-day.today .calendar-day-number {
  background: var(--school-primary);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-day-number {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.calendar-event-pill {
  background: var(--school-primary);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-more {
  font-size: 10px;
  color: #64748b;
}

.calendar-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.calendar-upcoming-item {
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.calendar-upcoming-item:hover {
  background: #eff6ff;
}

.calendar-upcoming-title {
  font-weight: 600;
  font-size: 13px;
}

.calendar-upcoming-meta {
  font-size: 11px;
  color: #64748b;
}

/* ━━━ MEDIA CARDS ━━━ */
.media-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.media-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.media-card-thumb {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.media-type-document { background: #3b82f6; }
.media-type-video { background: #ef4444; }
.media-type-audio { background: #8b5cf6; }
.media-type-link { background: #f59e0b; }

.media-card-type-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
}

.media-card-body {
  padding: 10px;
}

.media-card-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.media-card-desc {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 4px;
}

.media-card-meta {
  font-size: 10px;
  color: #94a3b8;
}

.media-card-footer {
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
}

/* ━━━ VIEW TOGGLE ━━━ */
.view-toggle-group {
  display: flex;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.view-toggle-btn {
  padding: 6px 12px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}

.view-toggle-btn.active {
  background: var(--school-primary);
  color: #fff;
}

/* ━━━ CLASSROOM CARDS ━━━ */
.classroom-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.classroom-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.classroom-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.classroom-card-banner {
  background: var(--school-primary);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.classroom-card-banner-title {
  font-weight: 700;
  font-size: 15px;
}

.classroom-card-menu-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.classroom-card-body {
  padding: 14px 16px;
}

.classroom-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.classroom-card-meta {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 3px;
}

.classroom-card-footer {
  padding: 10px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ━━━ COURSE CARDS ━━━ */
.course-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.course-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.course-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.course-card-banner {
  color: #fff;
  padding: 18px 16px;
  position: relative;
}

.course-card-banner-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.course-card-banner-name {
  font-weight: 700;
  font-size: 16px;
}

.course-card-banner-sub {
  font-size: 12px;
  opacity: 0.8;
}

.course-card-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.course-card-body {
  padding: 14px 16px;
}

.course-card-footer {
  padding: 10px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ━━━ COURSE PAGE TOOLBAR ━━━ */
.course-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.course-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ━━━ MESSAGE DETAIL ━━━ */
.message-detail-box {
  padding: 0;
}

.message-detail-meta p {
  margin-bottom: 6px;
  font-size: 13px;
  color: #475569;
}

.message-detail-body {
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
}

/* ━━━ MESSAGE SUMMARY GRID ━━━ */
.message-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.message-summary-item {
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
}

.message-summary-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.message-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--school-primary);
}

/* ━━━ MODAL IMPROVEMENTS ━━━ */
/* z-index : voir l'echelle des couches, plus haut dans ce fichier. Ce bloc
   portait 200 et l'emportait sur les 9999 de la premiere declaration — d'ou
   des modales invisibles pendant un appel. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}

.modal-sm { max-width: 400px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 780px; }

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 24px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

body.modal-open {
  overflow: hidden;
}

/* ━━━ CONFIRM BOX ━━━ */
.confirm-box p {
  margin-bottom: 16px;
  font-size: 14px;
}

/* ━━━ ANNOUNCEMENT POPOVER ━━━ */
.announcement-popover {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  z-index: 50;
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
}

.announcement-popover.hidden {
  display: none;
}

/* ━━━ SCROLLBAR ━━━ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


.password-input-wrap { position: relative; display: flex; align-items: center; }
.password-input-wrap input { width: 100%; padding-right: 48px; }
.password-toggle-btn { position: absolute; right: 10px; border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; opacity: 0.8; }

/* ━━━ PROFILE & SCHOOL SETTINGS CLICKABLE ELEMENTS ━━━ */
#user-avatar,
#sidebar-user-name,
#sidebar-user-role {
  cursor: pointer;
  transition: opacity 0.15s;
}

#user-avatar:hover,
#sidebar-user-name:hover {
  opacity: 0.75;
}

#sidebar-school-name {
  cursor: pointer;
  transition: opacity 0.15s;
}

#sidebar-school-name:hover {
  opacity: 0.75;
}

/* Tooltip hint */
#user-avatar::after {
  content: "Voir profil";
  position: absolute;
  left: 52px;
  background: #0f172a;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
}

#user-avatar:hover::after {
  opacity: 1;
}

.user-card {
  position: relative;
}

/* ━━━ MOBILE TOPBAR + SIDEBAR FIXES ━━━ */
@media (max-width: 1024px) {
  .dashboard-shell {
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 240px;
    max-width: 82vw;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  .sidebar.sidebar-open,
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar-top {
    flex-shrink: 0;
  }

  .menu-section-title,
  .menu-list,
  .sidebar-bottom {
    flex-shrink: 0;
  }

  .sidebar-bottom {
    margin-top: auto;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .main-area {
    width: 100%;
    min-width: 0;
    padding: 10px 12px 20px;
  }

  .topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .topbar-left > div {
    min-width: 0;
  }

  .topbar-left h1 {
    font-size: 20px;
    line-height: 1.15;
  }

  .topbar-left p {
    font-size: 12px;
  }

  .topbar-right {
    width: auto;
    min-width: auto;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
  }

  .topbar-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
  }

  .top-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex: 0 0 36px;
  }

  .top-action-icon {
    width: 18px;
    height: 18px;
  }

  .topbar-user-card {
    display: none;
  }

  .announcement-popover {
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: min(60vh, 420px);
    overflow-y: auto;
    border-radius: 12px;
  }

  .toast-box {
    right: 12px;
    left: 12px;
    bottom: 12px;
  }

  .toast-item {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE FIXES — 2026-04-24 (v2, minimal)
   ═══════════════════════════════════════════════════════════════════
   The inline <style> in index.html is the primary source of truth for
   layout: sidebar is position:fixed with width var(--sidebar-width),
   and .main-content has margin-left: var(--sidebar-width).
   Here we only add small safety overrides and legacy cleanup.
   ═══════════════════════════════════════════════════════════════════ */

/* Global box-sizing — cheap insurance */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; width: 100%; min-height: 100vh; }

/* The legacy .dashboard-shell flex wrapper is unused when sidebar is
   position:fixed. Make sure it doesn't fight the inline layout. */
.dashboard-shell {
  display: block;      /* was flex — but .sidebar is fixed, flex is useless */
  min-height: 100vh;
  width: 100%;
}

/* Ensure page content can shrink properly on narrow screens */
#page-content {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
#page-content > * { max-width: 100%; }
#page-content > div[style*="max-width"],
#page-content > section[style*="max-width"],
#page-content [style*="max-width:900px"],
#page-content [style*="max-width:1100px"],
#page-content [style*="max-width:820px"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#page-content table {
  max-width: 100%;
  width: 100%;
  display: table;
}
#page-content .table-wrap,
#page-content [style*="overflow-x:auto"],
#page-content [style*="overflow-x: auto"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.gogga-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll !important;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  scroll-behavior: auto;
  touch-action: pan-x pan-y;
  cursor: grab;
  padding-bottom: 10px;
  will-change: scroll-position;
  scrollbar-width: thin;
}

.gogga-table-scroll > table {
  width: 100%;
  max-width: none;
  min-width: var(--gogga-table-min-width, 720px);
}

.gogga-table-scroll.is-dragging,
.gogga-table-scroll.is-drag-ready {
  cursor: grabbing;
  user-select: none;
}

.gogga-table-scroll::-webkit-scrollbar {
  height: 10px;
}

.gogga-table-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}

.gogga-table-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.finance-filter-card,
.finance-results-card {
  border: 1px solid #e2e8f0;
}

.finance-filter-grid {
  align-items: end;
}

.finance-field {
  min-width: 0;
}

.finance-helper {
  line-height: 1.45;
}

.finance-quick-actions .secondary-btn {
  justify-content: center;
}

@media (max-width: 1024px) {
  .topbar {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  .topbar-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 154px) !important;
    overflow: hidden !important;
  }
  .topbar-left .mobile-menu-btn {
    position: relative !important;
    z-index: 5 !important;
    flex: 0 0 40px !important;
  }
  .topbar-left > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-left h1,
  .topbar-left p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .topbar-right {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    align-self: flex-start !important;
    justify-content: flex-end !important;
    max-width: 154px !important;
    position: relative !important;
    z-index: 4 !important;
  }
  .topbar-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: 154px !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .topbar-left {
    max-width: calc(100% - 160px) !important;
  }
  .topbar-right,
  .topbar-actions {
    max-width: 160px !important;
  }
}

@media (max-width: 900px) {
  .parent-dashboard > div:first-child {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 560px) {
  .parent-dashboard > div:first-child,
  .parent-dashboard [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* Extra-small phones — pad less, let modals fill */
@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .modal-card, .modal-md, .modal-lg {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone-first polish for dense school workflows.  Most Gogga pages are built
   from shared panels, inline grids and tables, so these rules improve the
   whole app without having to rewrite every role-specific view. */
@media (max-width: 680px) {
  html,
  body {
    overflow-x: hidden;
  }

  .main-content,
  .main-area {
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-content {
    padding: 10px !important;
    overflow-x: hidden;
  }

  #page-content > * {
    min-width: 0 !important;
  }

  .topbar {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 10px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left)) !important;
    min-height: 58px;
  }

  .topbar-left {
    max-width: calc(100% - 126px) !important;
    gap: 8px !important;
  }

  .topbar-left h1 {
    font-size: clamp(17px, 5vw, 20px) !important;
    line-height: 1.15 !important;
  }

  .topbar-left p {
    display: none !important;
  }

  .topbar-right,
  .topbar-actions {
    max-width: 118px !important;
    gap: 4px !important;
  }

  .topbar-actions .top-action-btn,
  .topbar-actions .btn-selector,
  .topbar-actions .impersonation-widget,
  .top-action-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }

  .mobile-menu-btn {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  .large-panel,
  .simple-panel,
  .simple-card,
  .stat-card,
  .course-card,
  .classroom-card,
  .media-card,
  .announcement-card,
  .calendar-upcoming-item {
    border-radius: 10px !important;
    padding: 12px !important;
  }

  .large-panel-header,
  .course-page-toolbar {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .panel-actions,
  .course-toolbar-actions,
  .modal-actions,
  .table-actions,
  .option-list {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .panel-actions > *,
  .course-toolbar-actions > *,
  .modal-actions > *,
  .table-actions > * {
    flex: 1 1 140px;
    min-width: 0;
  }

  button,
  .link-btn,
  .primary-btn,
  .secondary-btn,
  .text-link-btn,
  .view-toggle-btn,
  .logout-button {
    min-height: 42px;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    min-width: 0;
  }

  .kpi-grid,
  .simple-cards,
  .course-card-grid,
  .classroom-card-grid,
  .media-card-grid,
  .announcement-grid,
  .message-summary-grid,
  #page-content [style*="grid-template-columns:repeat(auto-fit"],
  #page-content [style*="grid-template-columns: repeat(auto-fit"],
  #page-content [style*="grid-template-columns:repeat(2"],
  #page-content [style*="grid-template-columns: repeat(2"],
  #page-content [style*="grid-template-columns:repeat(3"],
  #page-content [style*="grid-template-columns: repeat(3"],
  #page-content [style*="grid-template-columns:1fr 1fr"],
  #page-content [style*="grid-template-columns: 1fr 1fr"],
  #page-content [style*="grid-template-columns:minmax"] {
    grid-template-columns: 1fr !important;
  }

  .calendar-grid,
  .calendar-grid-header {
    min-width: 680px;
  }

  .calendar-day {
    min-height: 96px;
    padding: 8px;
  }

  .modal-overlay {
    padding: 8px !important;
    align-items: flex-start !important;
  }

  .modal-card,
  .modal-container,
  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 12px !important;
  }

  .modal-body {
    max-height: calc(100dvh - 130px) !important;
  }

  .gogga-table-scroll.gogga-mobile-card-wrapper {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    cursor: default !important;
  }

  table.gogga-mobile-card-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  table.gogga-mobile-card-table thead {
    display: none !important;
  }

  table.gogga-mobile-card-table tbody {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  table.gogga-mobile-card-table tr {
    display: block !important;
    width: 100% !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
  }

  table.gogga-mobile-card-table td {
    display: grid !important;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    border-bottom: 1px solid #edf2f7 !important;
    font-size: 13px !important;
    word-break: break-word !important;
  }

  table.gogga-mobile-card-table td:last-child {
    border-bottom: 0 !important;
  }

  table.gogga-mobile-card-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  table.gogga-mobile-card-table td[data-label=""],
  table.gogga-mobile-card-table td:not([data-label]) {
    grid-template-columns: 1fr !important;
  }

  table.gogga-mobile-card-table td[data-label=""]::before,
  table.gogga-mobile-card-table td:not([data-label])::before {
    display: none !important;
  }

  table.gogga-mobile-card-table .table-actions,
  table.gogga-mobile-card-table td:last-child > div {
    justify-content: stretch !important;
  }

  .finance-page-shell {
    gap: 12px !important;
  }

  .finance-filter-card {
    padding: 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08) !important;
  }

  .finance-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .finance-field label {
    color: #334155 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .finance-field input,
  .finance-field select {
    min-height: 46px !important;
    padding: 12px 13px !important;
    border-radius: 10px !important;
    border-color: #cbd5e1 !important;
    background: #fff !important;
    color: #0f172a !important;
    font-size: 16px !important;
  }

  .finance-field input:focus,
  .finance-field select:focus {
    border-color: var(--school-primary, #1d4ed8) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12) !important;
  }

  .finance-helper {
    margin-top: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12.5px !important;
  }

  .finance-quick-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .finance-quick-actions .secondary-btn {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 9px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 13px !important;
  }

  #econResults.finance-results-card {
    padding: 0 !important;
    text-align: left !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.07) !important;
  }

  #econResults.finance-results-card > div[style*="text-align:center"] {
    padding: 24px 16px !important;
    text-align: center !important;
  }

  .finance-balance-header {
    padding: 14px !important;
  }

  .finance-status-row {
    align-items: stretch !important;
    padding: 12px !important;
  }

  .finance-status-pills {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .finance-status-pill {
    width: 100% !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
  }

  .finance-results-card table.gogga-mobile-card-table tr {
    border-radius: 12px !important;
  }

  .finance-results-card table.gogga-mobile-card-table td {
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr) !important;
    text-align: left !important;
  }

  .finance-results-card table.gogga-mobile-card-table td:last-child {
    padding: 10px !important;
  }

  .finance-results-card table.gogga-mobile-card-table td:last-child .primary-btn,
  .finance-results-card table.gogga-mobile-card-table td:last-child .secondary-btn,
  .finance-results-card table.gogga-mobile-card-table td:last-child button {
    width: 100% !important;
    min-height: 40px !important;
    margin: 4px 0 0 !important;
  }
}

@media (max-width: 380px) {
  .topbar-left {
    max-width: calc(100% - 112px) !important;
  }

  .topbar-right,
  .topbar-actions {
    max-width: 106px !important;
  }

  .topbar-actions .top-action-btn,
  .topbar-actions .btn-selector,
  .topbar-actions .impersonation-widget,
  .top-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-basis: 32px !important;
  }

  table.gogga-mobile-card-table td {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .finance-quick-actions,
  .finance-status-pills {
    grid-template-columns: 1fr !important;
  }
}

.gogga-offline-banner {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 100000;
  width: min(680px, calc(100vw - 24px));
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  background: #fffbeb;
  color: #78350f;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  transition: opacity 160ms ease, transform 160ms ease;
}

.gogga-offline-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.gogga-offline-banner.online {
  border-color: #22c55e;
  background: #ecfdf5;
  color: #065f46;
}

.gogga-offline-drafts-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 100001;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.gogga-offline-drafts-modal {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.58);
  padding: 48px 18px;
}

.gogga-offline-drafts-card {
  width: min(820px, 100%);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

.gogga-offline-drafts-head,
.gogga-offline-drafts-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.gogga-offline-drafts-head h2 {
  margin: 0;
  font-size: 20px;
  color: #0f172a;
}

.gogga-offline-drafts-head p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.gogga-offline-close {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.gogga-offline-drafts-card [data-offline-drafts-body] {
  display: grid;
  gap: 10px;
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 16px 20px;
}

.gogga-offline-draft {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.gogga-offline-draft strong {
  color: #0f172a;
}

.gogga-offline-draft p {
  margin: 4px 0;
  color: #334155;
  font-size: 13px;
}

.gogga-offline-draft small {
  color: #64748b;
}

.gogga-offline-draft-error {
  margin-top: 8px;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
}

.gogga-offline-draft-actions {
  display: flex;
  gap: 8px;
}

.gogga-offline-drafts-foot {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #e5e7eb;
  border-bottom: 0;
}

body.has-gogga-offline-drafts .gogga-offline-banner {
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px);
}

.gogga-offline-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #64748b;
  padding: 20px;
  text-align: center;
}

@media (max-width: 640px) {
  .gogga-offline-drafts-btn {
    left: 12px;
    right: 12px;
    justify-content: center;
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .gogga-offline-banner {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 54px);
  }
  .gogga-offline-draft {
    grid-template-columns: 1fr;
  }
  .gogga-offline-draft-actions {
    flex-wrap: wrap;
  }
}

/* ── Mobile polish pass (phones) ──────────────────────────────────────────────
   Most users are on phones. App-like finishing touches applied globally, without
   editing the per-view inline styles. */
@media (max-width: 640px) {
  /* 16px on form controls stops iOS Safari from ZOOMING the page when a field is
     focused (the SPA's inline styles use 13–14px) and gives a comfortable target.
     The single most noticeable phone-UX fix for a form-heavy app. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  /* Comfortable thumb targets for the app's labelled action buttons (the tiny
     inline icon chips use bare <button style=…> and are left untouched). */
  .primary-btn, .secondary-btn, .danger-btn, button.btn, .btn-primary {
    min-height: 42px;
  }
  /* Modals: use nearly the full width on a phone. */
  .modal-card { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; }
  /* Breathing room above the phone gesture bar so the last control isn't clipped. */
  #page-content { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* Printable briefs (national dashboard "Imprimer" + any print view): drop the
   app chrome and interactive-only controls so a clean one-page brief prints. */
.print-only { display: none; }
@media print {
  .no-print, .sidebar, .topbar, #login-screen { display: none !important; }
  .print-only { display: block !important; }
  .gogga-seal { border-bottom: 2px solid #0f2d52; margin-bottom: 16px; padding-bottom: 8px; }
  #app, .dashboard-shell, #page-content { margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
  body { background: #fff !important; }
}

/* ── Top-bar actions collapse into a single ⋮ menu on the responsive shell ──
   Mirrors how the left sidebar collapses behind the ☰ button: on phones/tablets
   (≤1024px — the same breakpoint the sidebar uses) the action icons hide behind
   a single ⋮ button and open as a dropdown, freeing the title row so the icons
   no longer block the view. High specificity + !important so these win over the
   earlier .topbar rules regardless of stylesheet source order. */
.topbar-more-btn { display: none; }

@media (max-width: 1024px) {
  .topbar-right > .topbar-more-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex: 0 0 38px;
    padding: 0;
    border: 1px solid #d9e2ec;
    background: #fff;
    border-radius: 10px;
    color: #334155;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  .topbar-right > .topbar-more-btn:hover { background: #f8fafc; border-color: #bfc9d4; }

  /* The icon cluster becomes a dropdown anchored under the ⋮ button. */
  .topbar-right { position: relative !important; }
  .topbar-right > .topbar-actions {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 58px !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18) !important;
    z-index: 70 !important;
  }
  .topbar-right > .topbar-actions.open {
    display: inline-flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .topbar-right > .topbar-actions.open .top-action-btn,
  .topbar-right > .topbar-actions.open .btn-selector {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px !important;
  }
  /* The role/impersonation widget (4th control for recteur/préfet/promoteur)
     is injected inside .topbar-actions, so it collapses into the dropdown too. */
  .topbar-right > .topbar-actions.open .impersonation-widget {
    width: 42px !important;
    min-width: 42px !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }
  /* Keep the announcements popover anchored within/near the dropdown. */
  .topbar-right > .topbar-actions .announcement-popover {
    right: 0 !important;
    left: auto !important;
  }
  /* When the year selector is shown for a role, render it full-width as the
     last row of the open ⋮ dropdown (it stays hidden otherwise — we don't force
     its display, so inactive roles never see it). */
  .topbar-right > .topbar-actions.open #year-selector-wrap {
    width: 100% !important;
    margin: 4px 0 0 !important;
    gap: 6px !important;
    justify-content: space-between !important;
  }
  .topbar-right > .topbar-actions.open #year-selector {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Course « Cotes » action bar (Exporter / Valider / Soumettre / Saisir une cote).
   Desktop: content-sized, right-aligned. Phone: equal-width buttons that fill the
   row evenly (2 per row, a lone odd one spans full width) instead of wrapping
   raggedly. */
.course-action-bar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.course-action-bar > button { white-space: nowrap; }

@media (max-width: 680px) {
  .course-action-bar {
    width: 100%;
    justify-content: stretch;
  }
  .course-action-bar > button {
    flex: 1 1 140px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RÉUNIONS & COURS EN LIGNE — le bandeau d'appel (static/assets/js/meetings.js)

   Ce bloc est posé en position fixe et accroché à <body>, PAS à #page-content.
   C'est ce qui permet de naviguer dans Gogga — consulter des cotes, faire
   l'appel, écrire un message — sans que la réunion se coupe. Réduit, il occupe
   un coin de l'écran ; agrandi, il prend la scène.
   ══════════════════════════════════════════════════════════════════════════ */
/* LE PLAFOND NE RETIENT PLUS QUE L'ÉCRAN. `max-height: min(78vh, 760px)`
   écrêtait TOUTE hauteur posée par la poignée de redimensionnement : sur un
   écran de 900 px, demander 860 px de haut en rendait 702 — mesuré. Le panneau
   s'élargissait donc jusqu'au bord de l'écran mais refusait de grandir vers le
   bas, et la grande image finissait en bande de 2,7:1. La borne épouse
   désormais celle de `Call.appliquerTaille` (16 px du bord) pour que feuille et
   JavaScript ne se contredisent jamais ; la hauteur de départ, elle, reste
   celle du contenu. */
.gogga-call-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(680px, calc(100vw - 36px));
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  background: #0f172a;
  color: #f8fafc;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  z-index: 9500;          /* au-dessus de la page, sous les modales (10000) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
}
.gogga-call-dock.minimized {
  width: 268px;
  max-height: none;
}

/* LE PANNEAU SE DEPLACE — il etait cloue en bas a droite et masquait
   definitivement ce qui se trouvait dessous. On le prend par sa barre de titre
   (voir `Call.rendreDeplacable` dans meetings.js) ; `left/top` remplacent alors
   `right/bottom`. Le curseur le DIT, sinon personne ne devine qu'on peut. */
.gogga-call-dock .gcall-bar,
.gogga-call-dock .gcall-stage { cursor: grab; user-select: none; }
.gogga-call-dock .gcall-bar button,
.gogga-call-dock .gcall-stage button,
.gogga-call-dock .gcall-stage video { cursor: pointer; }
.gogga-call-dock.gcall-saisi,
.gogga-call-dock.gcall-saisi .gcall-bar,
.gogga-call-dock.gcall-saisi .gcall-stage { cursor: grabbing; }
.gogga-call-dock.gcall-saisi { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }

/* ── LES ICÔNES QUE LA POLICE HÉBERGÉE N'A PAS ────────────────────────────────
   `icones.css` ne porte qu'un sous-ensemble de Font Awesome. `fa-video-slash`
   n'en fait pas partie : le bouton « caméra coupée » n'affichait donc RIEN,
   précisément au moment où il fallait comprendre que la caméra était éteinte.
   On trace la barre nous-mêmes — un trait, pas un glyphe à télécharger. */
.gcall-ico { position: relative; display: inline-block; line-height: 1; }
.gcall-ico.barree::after {
  content: '';
  position: absolute;
  left: -12%;
  top: 50%;
  width: 124%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: rotate(-45deg);
  transform-origin: center;
  box-shadow: 0 -2px 0 0 rgba(15, 23, 42, .9);   /* détache le trait du dessin */
}

/* Les deux actions d'ORGANISATEUR portent le même micro que le bouton personnel :
   la pastille dit qu'elles valent pour la salle entière, pas pour soi. */
.gcall-btn-hote { position: relative; }
.gcall-pastille {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 9px;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  background: #0f172a;
  color: #cbd5e1;
}
.gcall-btn-hote.on .gcall-pastille,
.gcall-btn-hote:hover .gcall-pastille { color: #f8fafc; }

.gcall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.gcall-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcall-count, .gcall-hands {
  background: rgba(255, 255, 255, .12);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.gcall-hands { background: #f59e0b; color: #1f2937; }

.gcall-status {
  padding: 7px 12px;
  background: #78350f;
  color: #fde68a;
  font-size: 12.5px;
}

.gcall-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
/* La grande tuile : celle qui partage son écran, ou la personne épinglée.
   `object-fit: contain` est délibéré — un écran partagé rogné coupe justement
   la ligne de tableau qu'on essayait de montrer. */
.gcall-main {
  flex: 1;
  min-height: 190px;
  display: flex;
}
.gcall-main .gcall-tile { width: 100%; }
/* `.gcall-main video` PERDAIT LE DUEL. Il pèse exactement autant que
   `.gcall-tile video { object-fit: cover }` déclaré plus bas (une classe + un
   élément), et à poids égal c'est le DERNIER qui gagne : la grande image était
   donc ROGNÉE, pas contenue — un écran partagé de 640×360 étiré dans une boîte
   de 1276×472 y perdait 34 % de sa hauteur, mesuré au navigateur. On ajoute le
   parent au sélecteur : deux classes battent une classe, quel que soit l'ordre. */
.gcall-main video,
.gcall-main .gcall-tile video { object-fit: contain; background: #000; }

.gcall-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  flex: 0 0 auto;
}
.gcall-strip .gcall-tile {
  flex: 0 0 128px;
  height: 78px;
}

.gcall-tile {
  position: relative;
  background: #1e293b;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s ease;
}
.gcall-tile.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  min-height: 190px;
}
/* Qui parle. Une bordure verte plutôt qu'un réagencement des tuiles : dans une
   discussion vive, réordonner la grille à chaque prise de parole donne le mal
   de mer et fait perdre la personne qu'on suivait des yeux. */
.gcall-tile.speaking { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }

.gcall-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b1220;
}
.gcall-tile video.mirror { transform: scaleX(-1); }

.gcall-avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: #cbd5e1;
  background: linear-gradient(135deg, #334155, #1e293b);
}
.gcall-main .gcall-avatar { font-size: 40px; }

.gcall-name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  right: 6px;
  font-size: 11.5px;
  background: rgba(0, 0, 0, .55);
  border-radius: 6px;
  padding: 3px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcall-name .off { color: #f87171; }

.gcall-badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.gcall-badge {
  background: rgba(0, 0, 0, .6);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10.5px;
}
.gcall-badge.host { color: #fbbf24; }
.gcall-badge.share { color: #38bdf8; }
.gcall-badge.hand { background: #f59e0b; color: #1f2937; }
.gcall-badge.muted-host { color: #f87171; }

.gcall-tile-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s ease;
}
.gcall-tile:hover .gcall-tile-actions,
.gcall-tile:focus-within .gcall-tile-actions { opacity: 1; }
/* Sur mobile il n'y a PAS de survol : sans cette règle, les commandes de
   l'organisateur seraient invisibles sur téléphone — c'est-à-dire pour la
   moitié des directions d'établissement. */
@media (hover: none) {
  .gcall-tile-actions { opacity: 1; }
}

.gcall-icon {
  background: rgba(255, 255, 255, .12);
  border: none;
  color: #f8fafc;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
/* Les boutons du coin haut-droit (plein écran, réduire, quitter). Ils n'avaient
   aucune règle : deux suffisaient à se toucher, trois se collaient. */
.gcall-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.gcall-icon.sm { width: 26px; height: 26px; font-size: 11px; }
.gcall-icon.danger { background: rgba(239, 68, 68, .75); }
.gcall-icon:hover { background: rgba(255, 255, 255, .22); }

.gcall-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  background: rgba(0, 0, 0, .25);
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.gcall-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #f8fafc;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
}
.gcall-btn:hover { background: rgba(255, 255, 255, .24); }
.gcall-btn.on { background: #2563eb; }
.gcall-btn.disabled { opacity: .45; }
.gcall-btn.hangup { background: #dc2626; }
.gcall-btn.end { background: #7f1d1d; }

@media (max-width: 720px) {
  .gogga-call-dock {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    /* Même correction qu'en grand : une borne d'écran, pas un écrêtage. `dvh`
       tient compte de la barre d'adresse qui se replie — `vh` ne la voit pas et
       laissait les commandes sous le bord bas du téléphone. */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .gogga-call-dock.minimized {
    left: auto;
    width: 220px;
  }
  .gcall-btn { width: 42px; height: 42px; }
}

/* Mention du décalage de la rediffusion (palier amphithéâtre) : l'auditeur doit
   savoir que ces quelques secondes sont voulues, pas une panne. */
.gcall-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .08);
  border-radius: 20px;
  padding: 6px 12px;
  align-self: center;
}

/* ── LE MOT ÉCRIT PENDANT LA RÉUNION ─────────────────────────────────────────
   Panneau FRÈRE du dock, jamais son enfant. `Call.render()` fait
   `dock.innerHTML = html` dès que la présence ou l'état change — soit toutes
   les une à trois secondes : un champ de saisie posé dedans perdrait son
   contenu PENDANT LA FRAPPE.

   9600 n'est pas un caprice. Le dock est à 9500 et `.modal-overlay` vaut 200
   (déclaré deux fois dans ce fichier, la seconde l'emporte) : une modale
   ordinaire s'afficherait SOUS l'appel. On pose donc la valeur en clair. */
.gcall-mots {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(340px, calc(100vw - 36px));
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  z-index: 9600;
  font-size: 13.5px;
  overflow: hidden;
}
.gcall-mots-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-weight: 600;
}
.gcall-mots-fil { flex: 1; overflow-y: auto; padding: 10px 12px; }
.gcall-mots-vide { color: #94a3b8; padding: 10px 0; }
.gcall-mot { margin-bottom: 10px; }
.gcall-mot-qui { color: #93c5fd; font-size: 12px; font-weight: 600; }
.gcall-mot.mien .gcall-mot-qui { color: #86efac; }
.gcall-mot-prive {
  margin-left: 6px;
  color: #fbbf24;
  font-weight: 500;
}
.gcall-mot-texte { white-space: pre-wrap; word-break: break-word; }
.gcall-mots-pied {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.gcall-mots-pied select { grid-column: 1 / -1; }
.gcall-mots-pied select,
.gcall-mots-pied textarea {
  width: 100%;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #f8fafc;
  font: inherit;
  resize: none;
}
.gcall-mots-pied textarea::placeholder { color: #94a3b8; }
/* Le champ de saisie doit rester sélectionnable : la prise du panneau ignore
   déjà `input` et `select`, mais ce composeur vit HORS du dock, donc rien ne
   l'atteint. La règle est ici pour qui déplacerait un jour le composeur. */
.gcall-mots textarea, .gcall-mots select { cursor: auto; user-select: text; }

/* Le badge du bouton : « il y a du nouveau », rien de plus. */
.gcall-btn { position: relative; }
.gcall-nonlus {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* Ce qui suit ne vous concerne plus VOUS mais la salle entière. */
.gcall-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 3px;
  background: rgba(255, 255, 255, .18);
}

@media (max-width: 720px) {
  .gcall-mots { right: 8px; left: 8px; width: auto; max-height: 52vh; }
}

/* ── LE PANNEAU D'APPEL SE REDIMENSIONNE ─────────────────────────────────────
   On emploie le `resize` NATIF plutôt qu'une poignée maison : une poignée
   écrite dans le HTML du panneau serait détruite à chaque battement par
   `dock.innerHTML`, et posée dans la barre de titre ou la zone des images elle
   serait avalée par le glissement. La poignée native prend appui sur le panneau
   lui-même, que la prise du déplacement ne reconnaît pas.

   `overflow: hidden` ne l'empêche pas — la spécification demande seulement que
   `overflow` diffère de `visible`. Ce qui l'empêchait, c'est `max-height`, que
   le JavaScript neutralise en même temps qu'il pose la hauteur. */
.gogga-call-dock { resize: both; min-width: 300px; min-height: 220px; }
/* Replié, il n'y a plus rien à redimensionner : la poignée ne ferait
   qu'inviter à coincer le panneau dans un état sans issue. */
.gogga-call-dock.minimized { resize: none; min-height: 0; }

/* Le bouton plein écran, en haut à droite de la grande tuile — là où tous les
   lecteurs vidéo le posent. Discret tant qu'on ne survole pas l'image. */
.gcall-plein {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  opacity: .55;
  transition: opacity .15s;
}
.gcall-tile:hover .gcall-plein,
.gcall-plein:focus { opacity: 1; }

/* ── LE PLEIN ÉCRAN PORTE LE PANNEAU, PLUS LA SEULE IMAGE ────────────────────
   C'ÉTAIT LA TUILE QUI PASSAIT EN PLEIN ÉCRAN — `.gcall-tile.main`, une simple
   boîte à vidéo. Or la barre de commandes (`.gcall-controls`) est sa SŒUR, pas
   sa fille : micro, caméra, PARTAGE D'ÉCRAN, main levée, messages, raccrocher,
   tout cela restait hors de la couche supérieure, donc invisible et injoignable
   pendant tout le plein écran. On agrandit désormais le panneau ENTIER, ce qui
   emmène la barre avec l'image — comme Zoom.

   La classe fait le travail, pas `:fullscreen`. Trois raisons, toutes vécues :
    · une liste `.x:fullscreen, .x:-webkit-full-screen` est jetée EN ENTIER par
      un moteur qui ne connaît pas l'un des deux — les vieux WebView Android
      perdraient toute la règle ;
    · la classe sert aussi au repli « plein cadre », quand l'API manque
      (Safari iPhone ne connaît le plein écran que sur un <video>) ;
    · elle est posée par `Call.surChangementPleinEcran`, qui lit l'état réel du
      document : la classe ne peut donc pas mentir. */
.gogga-call-dock.gcall-en-plein-ecran {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;          /* le téléphone, barre d'adresse repliée ou non */
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  resize: none;            /* on ne redimensionne pas ce qui remplit l'écran */
  background: #000;
}
/* La scène prend tout ce qui reste entre la barre de titre et les commandes :
   c'est `min-height: 0` qui l'autorise à se réduire ET à s'étendre dans un
   parent en colonne — sans lui, un flex enfant refuse de descendre sous la
   hauteur de son contenu. */
.gogga-call-dock.gcall-en-plein-ecran .gcall-stage {
  padding: 14px;
  gap: 12px;
  min-height: 0;
}
.gogga-call-dock.gcall-en-plein-ecran .gcall-main { min-height: 0; }
.gogga-call-dock.gcall-en-plein-ecran .gcall-tile { border-radius: 8px; }
/* Sur un écran entier, une vignette de 128 px ne dit plus qui est là. */
.gogga-call-dock.gcall-en-plein-ecran .gcall-strip .gcall-tile {
  flex: 0 0 196px;
  height: 118px;
}
/* Les commandes sont la RAISON de ce plein écran : elles ne se rétrécissent
   pas, et le bouton de sortie reste visible sans survol. */
.gogga-call-dock.gcall-en-plein-ecran .gcall-controls {
  padding: 14px 10px;
  background: rgba(0, 0, 0, .55);
  flex: 0 0 auto;
}
.gogga-call-dock.gcall-en-plein-ecran .gcall-plein {
  opacity: 1;
  top: 14px;
  right: 14px;
}
/* Le fond derrière l'élément agrandi : sans cela le navigateur peint son propre
   blanc, qui déborde en liseré autour d'une image 4:3 sur un écran 16:9. */
.gogga-call-dock:fullscreen { background: #000; }
.gogga-call-dock:fullscreen::backdrop { background: #000; }