/* =====================================================================
   CHEMIN : /polyedres/polyedres.css
   NOM    : polyedres.css
   RÔLE   : Styles du moteur SC@LPA - Solides 3D et patrons articulés.
   ===================================================================== */

.polyedres-engine {
  --polyedres-viewer-height: clamp(430px, calc(100vh - 13rem), 820px);
  min-height: 100%;
  padding: 1rem;
  background:
    radial-gradient(circle at top left, rgba(13, 110, 253, .09), transparent 34rem),
    #f4f7fb;
}

.polyedres-engine,
.polyedres-engine * {
  box-sizing: border-box;
}

.polyedres-engine .viewer-card,
.polyedres-engine .control-panel {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.polyedres-engine .viewer-card {
  height: var(--polyedres-viewer-height);
}

.polyedres-engine #viewer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #eaf3ff 0%, #ffffff 55%, #edf3f8 100%);
  touch-action: none;
  cursor: grab;
}

.polyedres-engine #viewer:active {
  cursor: grabbing;
}

.polyedres-engine #viewer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.polyedres-engine #labels-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.polyedres-engine .vertex-label {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 1.65rem;
  padding: .12rem .34rem;
  border: 2px solid rgba(33, 37, 41, .76);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: #111827;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  box-shadow: 0 .15rem .35rem rgba(0, 0, 0, .16);
  transition: opacity .12s linear;
}

.polyedres-engine .viewer-help {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 5;
  max-width: calc(100% - 2rem);
  padding: .45rem .7rem;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .1);
  backdrop-filter: blur(6px);
  font-size: .86rem;
  pointer-events: none;
}

.polyedres-engine .control-panel {
  max-height: var(--polyedres-viewer-height);
  overflow-y: auto;
}

.polyedres-engine .info-value {
  font-weight: 700;
  color: #0d6efd;
}

.polyedres-engine .selection-name {
  font-size: 1.08rem;
  font-weight: 800;
}

.polyedres-engine .selection-kind {
  margin-top: .2rem;
  font-size: .94rem;
}

.polyedres-engine #netControls {
  background: rgba(13, 110, 253, .035);
}

.polyedres-engine #netControls.is-disabled {
  opacity: .58;
}

.polyedres-engine #netPercent {
  min-width: 3.5rem;
  text-align: center;
  font-weight: 700;
  color: #0d6efd;
}

.polyedres-engine .btn-check:checked + .btn {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
}

body.polyedres-embed {
  margin: 0;
  background: #f4f7fb;
}

body.polyedres-embed .polyedres-engine {
  --polyedres-viewer-height: clamp(500px, calc(100vh - 1rem), 780px);
  width: 100%;
  padding: .5rem;
}

body.polyedres-embed .polyedres-hero {
  display: none;
}

html.polyedres-embed,
html.polyedres-embed body {
  overflow-x: hidden;
}

@media (max-width: 991.98px) {
  .polyedres-engine {
    --polyedres-viewer-height: clamp(420px, 62vh, 680px);
  }

  .polyedres-engine .control-panel {
    max-height: none;
    overflow-y: visible;
  }

  body.polyedres-embed .polyedres-engine {
    --polyedres-viewer-height: clamp(440px, 62vh, 680px);
  }
}

@media (max-height: 700px) and (min-width: 992px) {
  .polyedres-engine {
    --polyedres-viewer-height: calc(100vh - 9.5rem);
  }

  body.polyedres-embed .polyedres-engine {
    --polyedres-viewer-height: calc(100vh - 1rem);
  }

  .polyedres-engine .polyedres-hero p {
    display: none;
  }
}


/* =====================================================================
   MODE EXERCICE JSON
   ===================================================================== */

.polyedres-engine .polyedres-exercise-panel {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
}

.polyedres-engine .polyedres-exercise-panel .card-body {
  padding: 1.1rem 1.25rem;
}

.polyedres-engine .polyedres-exercise-instruction {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  color: #1f2937;
}

.polyedres-engine .polyedres-exercise-score strong {
  color: #0d6efd;
  font-size: 1.25rem;
}

body.polyedres-exercise-mode .polyedres-engine {
  --polyedres-viewer-height: clamp(430px, calc(100vh - 15rem), 760px);
}

body.polyedres-embed.polyedres-exercise-mode .polyedres-engine {
  --polyedres-viewer-height: clamp(440px, calc(100vh - 10rem), 720px);
}

body.polyedres-exercise-mode .viewer-help {
  bottom: .75rem;
}

@media (max-width: 991.98px) {
  .polyedres-engine .polyedres-exercise-score {
    width: 100%;
    text-align: left !important;
  }

  body.polyedres-exercise-mode .polyedres-engine,
  body.polyedres-embed.polyedres-exercise-mode .polyedres-engine {
    --polyedres-viewer-height: clamp(410px, 58vh, 650px);
  }
}


/* =====================================================================
   EXPORTS PNG ET SVG
   ===================================================================== */

.polyedres-engine .polyedres-export-controls {
  background: rgba(25, 135, 84, .035);
}

.polyedres-engine .polyedres-export-controls .btn[aria-busy="true"] {
  position: relative;
  padding-left: 2.25rem;
}

.polyedres-engine .polyedres-export-controls .btn[aria-busy="true"]::before {
  position: absolute;
  top: 50%;
  left: .8rem;
  width: .9rem;
  height: .9rem;
  margin-top: -.45rem;
  border: .14rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: polyedres-export-spin .7s linear infinite;
}

@keyframes polyedres-export-spin {
  to {
    transform: rotate(360deg);
  }
}

@media print {
  .polyedres-engine .polyedres-export-controls {
    display: none !important;
  }
}


/* =====================================================================
   QUESTIONS V2 : NOMBRES, CHOIX ET RELATIONS ENTRE LES FACES
   ===================================================================== */

.polyedres-engine .polyedres-exercise-response {
  max-width: 760px;
}

.polyedres-engine .polyedres-number-form {
  align-items: end;
}

.polyedres-engine .polyedres-number-field {
  width: min(100%, 12rem);
}

.polyedres-engine .polyedres-number-field .form-control {
  text-align: center;
  font-weight: 800;
}

.polyedres-engine .polyedres-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.polyedres-engine .polyedres-choice-button {
  min-height: 3.25rem;
  white-space: normal;
  font-weight: 700;
}

.polyedres-engine .polyedres-reference-help {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 193, 7, .55);
  border-radius: .65rem;
  background: rgba(255, 193, 7, .12);
  color: #594500;
}

.polyedres-engine .polyedres-reference-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(89, 69, 0, .45);
  border-radius: .2rem;
  background: #ffc107;
}

body.polyedres-exercise-mode .polyedres-export-controls {
  display: none !important;
}

@media (max-width: 575.98px) {
  .polyedres-engine .polyedres-choice-grid {
    grid-template-columns: 1fr;
  }

  .polyedres-engine .polyedres-number-form {
    align-items: stretch;
  }

  .polyedres-engine .polyedres-number-field {
    width: 100%;
  }
}