.blanks-widget{
  border-radius:10px;
  padding:0px 5px 5px 5px;
  background:#fff;
  max-width:100%;
  font-family:Arial, system-ui, sans-serif;

  position:relative;
  /*overflow:hidden; retire 03/05/26, pour ne pas rogner sur details*/
}


/* =========================
   Champs standards
   ========================= */
.blanks-widget .bw-input,
.blanks-widget .bw-select,
.blanks-widget math-field.bw-input{
  display:inline-block;
  box-sizing:border-box;
  width:20ch;
  /*min-width:120px;*/
  max-width:280px;
  margin:0 6px;
  border:2px solid #cfd9e6;
  border-radius:8px;
  font:inherit;
  font-size:1rem;
  outline:none;
  background:#fafcff;
  color:#0f172a;
}
.blanks-widget .bw-input,
.blanks-widget math-field.bw-input{ padding:0px 10px; }
.blanks-widget .bw-select{ padding:5px 10px; }

.blanks-widget .bw-input:focus,
.blanks-widget .bw-select:focus{
  border-color:#2b7bbb;
  background:#eef6ff;
}
.blanks-widget math-field.bw-input:focus-within{
  border-color:#2b7bbb;
  background:#eef6ff;
}

.blanks-widget .bw-input.ok,
.blanks-widget .bw-select.ok,
.blanks-widget math-field.bw-input.ok{
  border-color:#1aa34a;
  background:#eef9f1;
}
.blanks-widget .bw-input.ko,
.blanks-widget .bw-select.ko,
.blanks-widget math-field.bw-input.ko{
  border-color:#d64545;
  background:#fff0f0;
}

/* correction (style champ) */
.blanks-widget .bw-input.is-solution,
.blanks-widget .bw-select.is-solution,
.blanks-widget math-field.bw-input.is-solution{
  border:2px dashed #ffb913 !important;
  background:#fff5bf !important;
  color:#6a4d08 !important;
}

/* correction via wrapper (inclut faux select) */
.blanks-widget .bw-input-wrap.is-solution .bw-input,
.blanks-widget .bw-input-wrap.is-solution .bw-select,
.blanks-widget .bw-input-wrap.is-solution .bw-dd-btn{
  border:2px dashed #ffb913 !important;
  background:#fff5bf !important;
  color:#6a4d08 !important;
}

/* =========================
   Wrapper + badge “corr.”
   ========================= */
.blanks-widget .bw-input-wrap{
  position:relative;
  display:inline-block;
}
.blanks-widget .bw-corr{
  position:absolute;
  right:12px;
  top:25%;
  transform:translateY(-50%);
  z-index:10;
  pointer-events:none;
  user-select:none;
  display:none;
  line-height:1;
  font-size:10pt;
  color:#6a4d08;
  font-weight:normal;
  opacity:.20;
}

/* =========================
   MathLive
   ========================= */
.blanks-widget math-field::part(content){
  font-family:Arial, system-ui, sans-serif !important;
  font-size:1rem;
}
.blanks-widget math-field::part(content) .ML__cmr,
.blanks-widget math-field::part(content) .ML__text{
  font-family:Arial, system-ui, sans-serif !important;
}

.blanks-widget .bw-input-wrap.is-ml{
  display:inline-flex;
  align-items:center;
  gap:6px;
}


.blanks-widget .bw-input-wrap.is-ml .bw-ml-box{
  position:relative;
  display:inline-block;
}
.blanks-widget .bw-input-wrap.is-ml .bw-corr-ml{
  position:absolute;
  right:12px;
  top:25%;
  transform:translateY(-50%);
  z-index:10;
  pointer-events:none;
  user-select:none;
  display:none;
  line-height:1;
  font-size:10pt;
  color:#6a4d08;
  font-weight:normal;
  opacity:.20;
}

.blanks-widget .bw-input-wrap.is-ml .bw-ml-box math-field.is-solution ~ .bw-corr-ml{
  display:inline;
}
.blanks-widget .bw-input-wrap.is-ml .bw-corr{ display:none !important; }

.blanks-widget math-field::part(virtual-keyboard-toggle),
.blanks-widget math-field::part(menu-toggle){
  display:none !important;
}

/* bouton ×10^ */
.blanks-widget .bw-pow{
display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3pt;
  border-radius: 999px;
  border: 1px solid #cfd9e6;
  background: #f4f7fb;
  color: #0f4c5c;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  margin-left: 10px;
  font-size: 10pt;
  font-family: arial;
  font-weight: normal;
}
.blanks-widget .bw-pow:hover{ filter:brightness(0.97); }

.blanks-widget .bw-pow-one{
  margin-left:8px;
  vertical-align:middle;
}

/* =========================
   Actions + score
   ========================= */
.blanks-widget .bw-actions{
  padding-top: 12px;
  border-top: 1px solid #e7eef6;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.blanks-widget .bw-actions button{
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #0f6d86;
  background: #147e99;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 12pt;
  font-weight: normal;
  line-height: 1.1;
  font-family: arial;
}
.blanks-widget .bw-actions button:hover{ filter:brightness(0.95); }

.blanks-widget .bw-actions .bw-solution:hover,
.blanks-widget .bw-actions .bw-solution.is-active{
  background:rgba(255, 245, 191, 0.54);
  color:#6a4d08;
  border:2px solid #ffb913;
}
.blanks-widget .bw-actions .bw-retry{
  background:#f0f3f6;
  color:#0f4c5c;
  border-color:#cfd9e6;
}
.blanks-widget .bw-score{
  margin-left:auto;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  font-weight:800;
  color:#0f4c5c;
  font-family: arial;
  font-size: 12pt;
}

/* =========================
   Mobile
   ========================= */
@media (max-width:520px){
  /*.blanks-widget .bw-input,*/
  .blanks-widget .bw-select,
  .blanks-widget math-field.bw-input
  /*.blanks-widget .bw-dd-btn*/{
    min-width:110px;
  }
}

/* =========================================================
   FAUX SELECT KaTeX — V2 (propre)
   - ouverture: .bw-dd-wrap.open
   ========================================================= */
.blanks-widget .bw-dd-wrap{
  position:relative;
  display:inline-block;
  overflow:visible;
}

/* bouton */
.blanks-widget .bw-dd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  box-sizing:border-box;
  width:10ch;
  /*min-width:120px;*/
  max-width:280px;

  margin:0 6px;
  padding:0px 5px;

  border:2px solid #cfd9e6;
  border-radius:8px;
  background:#fafcff;
  color:#0f172a;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
  position:relative;
  
  text-transform: none;
}

/* choix rélaiser le taille l'input prend la taille du contenu; le padding est là pour gérer
la position de la flèche de sélectrion*/

.blanks-widget .is-filled .bw-dd-btn{
    width: max-content;
    padding: 0px 20px 0px 5px;
}

/* label (placeholder géré par JS, mais on garde l’aspect) */
.blanks-widget .bw-dd-label{
  opacity:.75;
}

/* focus */
.blanks-widget .bw-dd-btn:focus{
  outline:none;
  border-color:#2b7bbb;
  background:#eef6ff;
}

/* flèche UNIQUE (plus de span dans le JS) */
.blanks-widget .bw-dd-btn::after{
  content:"▾";
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  opacity:.75;
  pointer-events:none;
}

/* menu */
.blanks-widget .bw-dd-menu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  width:max(100%, 180px);

  max-height:240px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;

  z-index:999999;
  margin:0;
  padding:6px;
  list-style:none;

  border:2px solid #cfd9e6;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);

  display:none;
}

/* ouvert */
.blanks-widget .bw-dd-wrap.open .bw-dd-btn{
  border-color:#2b7bbb;
  background:#eef6ff;
}
.blanks-widget .bw-dd-wrap.open .bw-dd-menu{ display:block; }

/* ouvrir vers le haut (si tu le remets plus tard) */
.blanks-widget .bw-dd-wrap.open.up .bw-dd-menu{
  top:auto;
  bottom:calc(100% + 6px);
}

/* options */
.blanks-widget .bw-dd-opt{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  font:inherit;
  color:#0f172a;
  font-size:12pt;
  text-transform: none;
}
.blanks-widget .bw-dd-opt:hover,
.blanks-widget .bw-dd-opt:focus{
  outline:none;
  background:#eef6ff;
}

/* états OK/KO du faux select (via input hidden + sibling ~) */
.blanks-widget .bw-dd-wrap .bw-dd-value.ok ~ .bw-dd-btn{
  border-color:#1aa34a;
  background:#eef9f1;
  color:#0f172a;
}
.blanks-widget .bw-dd-wrap .bw-dd-value.ko ~ .bw-dd-btn{
  border-color:#d64545;
  background:#fff0f0;
  color:#0f172a;
}

/* correction */
.blanks-widget .bw-dd-wrap.is-solution .bw-dd-btn{
  border:2px dashed #ffb913 !important;
  background:#fff5bf !important;
  color:#6a4d08 !important;
}


/* =========================================================
   BLANKS V5 — dropdown en portal body
========================================================= */

/* Le menu original reste un modèle invisible dans le widget */
.blanks-widget .bw-dd-wrap > .bw-dd-menu:not(.bw-dd-portal) {
  display: none !important;
}

/* Menu téléporté dans body */
body > .bw-dd-portal.bw-dd-menu {
  display: block !important;
  position: fixed !important;
  z-index: 999999 !important;

  min-width: var(--bw-dd-width, 180px);
  max-width: min(360px, calc(100vw - 16px));
  max-height: 260px;
  overflow-y: auto;

  margin: 0;
  padding: 4px;
  list-style: none;

  background: #fff;
  border: 2px solid #cfd9e6;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* Lignes */
body > .bw-dd-portal.bw-dd-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Boutons d’option */
body > .bw-dd-portal.bw-dd-menu .bw-dd-opt {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;

  border: 0;
  border-radius: 7px;
  background: transparent;

  color: #111;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;

  text-transform: none; /* ou uppercase si tu veux garder l’ancien rendu */
}

/* Survol / focus */
body > .bw-dd-portal.bw-dd-menu .bw-dd-opt:hover,
body > .bw-dd-portal.bw-dd-menu .bw-dd-opt:focus {
  background: #eef5ff;
}