/* CPS Classroom — bruitomètre compact par défaut, projection sur demande */

/* Vue normale : intégrée à la page Outils, jamais plein écran par défaut. */
.noise-screen.open:not(.projection-mode){
  position:relative!important;
  inset:auto!important;
  z-index:auto!important;
  display:block!important;
  width:100%!important;
  margin:14px 0 18px!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
.noise-screen.open:not(.projection-mode) .noise-screen-shell{
  width:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:14px!important;
  border:1px solid var(--border,#dce3ea)!important;
  border-radius:16px!important;
  background:var(--surface,#fff)!important;
  box-shadow:0 8px 24px rgba(24,39,58,.08)!important;
}

/* En-tête compact : le mode projection reste un choix explicite. */
.noise-screen.open:not(.projection-mode) .noise-screen-header{
  gap:10px!important;
  padding:0 0 10px!important;
  border-bottom:1px solid var(--border,#dde3ea)!important;
}
.noise-screen.open:not(.projection-mode) .noise-screen-header .eyebrow{display:none!important}
.noise-screen.open:not(.projection-mode) .noise-screen-header h1{
  margin:0!important;
  font-size:21px!important;
  line-height:1.1!important;
}
.noise-screen.open:not(.projection-mode) .noise-class-name{
  margin-top:2px!important;
  font-size:13px!important;
}
.noise-screen.open:not(.projection-mode) .noise-screen-header-actions{
  display:flex!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
}
.noise-screen.open:not(.projection-mode) .noise-screen-header-actions .btn{
  min-height:38px!important;
  padding:7px 10px!important;
  font-size:13px!important;
}
.noise-screen.open:not(.projection-mode) #noiseProjectionBtn{
  background:var(--m)!important;
  border-color:var(--m3,var(--m))!important;
  color:#fff!important;
}

/* Consigne présente mais beaucoup moins haute. */
.noise-screen.open:not(.projection-mode) .noise-instruction-card{
  width:100%!important;
  margin:10px 0 0!important;
  padding:9px 11px!important;
  border-left-width:4px!important;
  box-shadow:none!important;
}
.noise-screen.open:not(.projection-mode) .noise-instruction-card>span{
  display:inline-block!important;
  margin:0 8px 0 0!important;
  font-size:11px!important;
}
.noise-screen.open:not(.projection-mode) .noise-instruction-card textarea{
  min-height:30px!important;
  max-height:58px!important;
  margin-top:3px!important;
  font-size:16px!important;
  line-height:1.25!important;
}

/* Lecture immédiate : jauge à gauche, commandes essentielles à droite. */
.noise-screen.open:not(.projection-mode) .noise-screen-content{
  display:grid!important;
  grid-template-columns:minmax(250px,.85fr) minmax(320px,1.15fr)!important;
  gap:14px!important;
  align-items:stretch!important;
  margin-top:10px!important;
}
.noise-screen.open:not(.projection-mode) .noise-stage{
  min-height:300px!important;
  padding:8px!important;
  border:1px solid var(--border,#dde3ea)!important;
  border-radius:14px!important;
  background:var(--surface-2,#f8fafc)!important;
}
.noise-screen.open:not(.projection-mode) .noise-halo{
  width:min(300px,78%)!important;
}
.noise-screen.open:not(.projection-mode) .noise-gauge{
  width:220px!important;
  padding:11px!important;
  box-shadow:0 9px 26px rgba(24,39,58,.10)!important;
}
.noise-screen.open:not(.projection-mode) .noise-gauge::after{inset:6px!important}
.noise-screen.open:not(.projection-mode) .noise-crest{
  width:64px!important;
  height:70px!important;
}
.noise-screen.open:not(.projection-mode) .noise-value{
  font-size:48px!important;
}
.noise-screen.open:not(.projection-mode) .noise-value-label{
  margin-top:4px!important;
  font-size:10px!important;
}
.noise-screen.open:not(.projection-mode) .noise-status{
  min-width:170px!important;
  margin-top:10px!important;
  padding:8px 13px!important;
  font-size:15px!important;
  box-shadow:none!important;
}
.noise-screen.open:not(.projection-mode) .noise-scale-note{
  margin-top:6px!important;
  font-size:12px!important;
}

/* Panneau professeur : moins de blocs, seulement l'essentiel visible. */
.noise-screen.open:not(.projection-mode) .noise-controls-panel{
  align-self:stretch!important;
  justify-content:flex-start!important;
  gap:9px!important;
  padding:11px!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.noise-screen.open:not(.projection-mode) .noise-control-label{
  font-size:11px!important;
}
.noise-screen.open:not(.projection-mode) .noise-traffic-buttons,
.noise-screen.open:not(.projection-mode) .noise-mode-grid{
  gap:6px!important;
}
.noise-screen.open:not(.projection-mode) .noise-mode-grid button{
  min-height:48px!important;
  padding:7px!important;
}
.noise-screen.open:not(.projection-mode) .noise-mode-grid button b{font-size:13px!important}
.noise-screen.open:not(.projection-mode) .noise-mode-grid button small{font-size:11px!important}

/* Défi : une ligne repliée tant qu'on n'a pas besoin de ses réglages. */
.noise-screen.open:not(.projection-mode) .noise-challenge-panel{
  margin:0!important;
  border-radius:10px!important;
}
.noise-screen.open:not(.projection-mode) .noise-challenge-summary{
  min-height:48px!important;
  padding:8px 10px!important;
}
.noise-screen.open:not(.projection-mode) .noise-challenge-summary b{font-size:14px!important}
.noise-screen.open:not(.projection-mode) .noise-challenge-summary small{font-size:11px!important}
.noise-screen.open:not(.projection-mode) .noise-challenge-body{
  padding:8px 10px 10px!important;
}
.noise-screen.open:not(.projection-mode) .noise-challenge-settings{
  gap:6px!important;
}

/* Tous les réglages secondaires sont regroupés dans un seul tiroir. */
.noise-more-settings{
  margin:0!important;
  border:1px solid var(--border,#dde3ea)!important;
  border-radius:10px!important;
  background:var(--surface-2,#f8fafc)!important;
}
.noise-more-settings>summary{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:42px!important;
  padding:8px 10px!important;
  cursor:pointer!important;
  list-style:none!important;
  color:var(--text,#243447)!important;
  font-size:13px!important;
  font-weight:900!important;
}
.noise-more-settings>summary::-webkit-details-marker{display:none!important}
.noise-more-settings>summary::after{content:"⌄";color:var(--muted,#667689)}
.noise-more-settings[open]>summary::after{transform:rotate(180deg)}
.noise-more-settings-body{
  display:grid!important;
  gap:8px!important;
  padding:0 8px 8px!important;
}
.noise-more-settings .noise-settings-disclosure,
.noise-more-settings .noise-alert-box,
.noise-more-settings .noise-privacy-disclosure{
  margin:0!important;
}
.noise-more-settings .noise-alert-box{
  padding:8px!important;
}

.noise-screen.open:not(.projection-mode) .noise-toggle-btn{
  min-height:42px!important;
  margin-top:0!important;
  font-size:14px!important;
}

/* Défi actif : visible, mais sans transformer la vue normale en panneau géant. */
.noise-screen.open:not(.projection-mode) .noise-challenge-live{
  width:min(96%,420px)!important;
  margin-top:8px!important;
  padding:9px!important;
}

/* Mobile : lecture compacte dans la page, sans hauteur 100vh forcée. */
@media(max-width:760px){
  .noise-screen.open:not(.projection-mode){
    margin:10px 0 14px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-screen-shell{
    min-height:0!important;
    padding:10px!important;
    border-radius:14px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-screen-header{
    align-items:center!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-screen-header-actions{
    width:auto!important;
    display:flex!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-screen-header-actions .btn{
    padding:6px 8px!important;
    font-size:12px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-screen-content{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-stage{
    min-height:240px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-gauge{
    width:178px!important;
    padding:9px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-crest{
    width:48px!important;
    height:53px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-value{font-size:40px!important}
  .noise-screen.open:not(.projection-mode) .noise-status{
    margin-top:7px!important;
    padding:7px 11px!important;
    font-size:14px!important;
  }
  .noise-screen.open:not(.projection-mode) .noise-controls-panel{
    width:100%!important;
    margin:0!important;
    padding:9px!important;
    gap:7px!important;
  }
}

/* Projection : on laisse volontairement la mise en page plein écran existante. */
.noise-screen.projection-mode{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  margin:0!important;
}