.vdict-wrap{--vb-pink:#F9C8FF;--vb-blue:#1A73D9;--vb-green:#34A86E;--vb-yellow:#FFC80B;--vb-dark:#1d2735;--vb-muted:#f5f7fb;
    font-family: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--vb-muted); border: 1px solid #e7ebf3; border-radius: 16px; padding: 16px; box-shadow: 0 6px 18px rgba(10,20,40,.06)}
.vdict-title{font-size:20px; font-weight:700; margin-bottom:8px; color:var(--vb-dark)}
.vdict-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.vdict-dots{display:flex; gap:6px}
.vdict-dot{width:10px; height:10px; border-radius:999px; background:#d9e1f2; box-shadow: inset 0 0 0 2px #fff}
.vdict-dot.active{background:var(--vb-pink)}
.vdict-controls{display:flex; gap:8px}


.vdict-btn.loading{opacity:.75; cursor:progress}
/* removed prev/next */{background:#c9d6ea; color:#16355f; padding:10px 14px}

.vdict-actions{display:flex; gap:8px; margin-top:10px}


.vdict-label{display:block; font-weight:700; color:#1d2735; margin-bottom:6px}
.vdict-input{width:100%; border:2px solid #e0e6f2; border-radius:14px; padding:12px 14px; font-size:16px; outline:none; background:#fff}
.vdict-input:focus{border-color:var(--vb-blue)}
.vdict-feedback{margin-top:8px; font-weight:700}
.vdict-feedback.good{color:var(--vb-green)}
.vdict-feedback.close{color:#c58f00}
.vdict-feedback.bad{color:#d33535}
.vdict-footer{margin-top:8px; font-size:14px; color:#3a4a62}
.vdict-toast{position:relative; margin-top:8px; font-size:14px; color:#2a2a2a; opacity:0; transform:translateY(-4px); transition:.2s ease; font-weight:600}
.vdict-toast.show{opacity:1; transform:translateY(0)}




/* --- VerbaDrop-aligned buttons for VerbaDictee --- */
.vdict-btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 18px;
  cursor:pointer;
  font-weight:600;
  font-size:14px !important;
  line-height:1.4;
  transition:none;
}

/* Vérifier = primary blue */
.vdict-btn.vdict-check{
  background: var(--vb-primary, #1A73D9);
  color:#fff;
  border-color: var(--vb-primary, #1A73D9);
}

/* Réinitialiser & Écouter = grey with hover shadow */
.vdict-btn.vdict-reset,
.vdict-btn.vdict-play{
  background:#f2f5fb;
  border:1px solid #d7deea;
  color:#223;
}



/* Grey buttons (reset/play) default and hover */
.vdict-btn.vdict-reset,
.vdict-btn.vdict-play{
  background:#f2f5fb;
  border:1px solid #d7deea;
  color:#223;
}
.vdict-btn.vdict-reset:hover,
.vdict-btn.vdict-play:hover{
  background:#eaeef5;
  border-color:#cfd6e4;
}


/* Diff mot-à-mot */
.vdict-diff{margin-top:12px; background:#fff; border:1px dashed #cfd6e4; border-radius:10px; padding:10px}
.vdict-diff .legend{display:flex; gap:12px; font-size:12px; color:#4a5a73; margin-bottom:6px; flex-wrap:wrap}
.vdict-diff .legend .swatch{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:6px; vertical-align:middle}
.vdict-diff .legend .swatch.ok{background:#d7f1e3}
.vdict-diff .legend .swatch.sub{background:#ffe8a6}
.vdict-diff .legend .swatch.ins{background:#cfe3ff}
.vdict-diff .legend .swatch.del{background:#ffd1d1}
.vdict-diff .line{display:flex; align-items:flex-start; gap:10px; margin:6px 0}
.vdict-diff .line label{min-width:110px; font-weight:700; color:#1d2735}
.vdict-diff .tokens{flex:1; line-height:2}
.vdict-diff .tok{display:inline-block; padding:2px 8px; border-radius:999px; margin:2px 4px 2px 0; border:1px solid transparent}
.vdict-diff .tok.ok{background:#d7f1e3; border-color:#b5e3cd}
.vdict-diff .tok.sub{background:#ffe8a6; border-color:#f9d770}
.vdict-diff .tok.ins{background:#cfe3ff; border-color:#aecdff}

.vdict-diff .tok.gap{background:transparent; color:#9aa7bd; border-color:#e0e6f2}


/* Correction: 'del' (manque) not striked-through */
.vdict-diff .tok.del{background:#ffd1d1; border-color:#ffb3b3; color:#a11}

/* Toggle button minimal spacing */
.vdict-actions .vdict-toggle-diff{margin-right:8px}
.vdict-switch input{accent-color:#1A73D9}

.vdict-select{appearance:none; background:#fff; border:1px solid #d7deea; border-radius:10px; padding:8px 10px; font-size:14px; color:#1d2735}
.vdict-topbar{gap:8px}

.vdict-nav{display:flex; align-items:center}
.vdict-prev, .vdict-next{
  background:#f2f5fb;
  border:1px solid #d7deea;
  color:#223;
}
.vdict-prev:hover, .vdict-next:hover{ background:#eaeef5; border-color:#cfd6e4; }
.vdict-prev:disabled, .vdict-next:disabled{ opacity:.5; cursor:not-allowed; }

.vdict-actions{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
.vdict-actions-left, .vdict-actions-right{display:flex; gap:8px; align-items:center}

/* Harmonisation hover boutons gris avec VerbaDrop */
.vdict-btn.vdict-reset,
.vdict-btn.vdict-prev,
.vdict-btn.vdict-next,
.vdict-btn.vdict-play {
  background:#f2f5fb;
  border:1px solid #d7deea;
  color:#223;
}
.vdict-btn.vdict-reset:hover,
.vdict-btn.vdict-prev:hover,
.vdict-btn.vdict-next:hover,
.vdict-btn.vdict-play:hover {
  background:#eaeef5;
  border-color:#cfd6e4;
}
.vdict-btn.vdict-prev:disabled,
.vdict-btn.vdict-next:disabled {
  opacity:.5;
  cursor:not-allowed;
}


/* === VerbaDictée — Responsive (scoped, no button reorder) === */

/* Keep everything boxed & fluid inside the component */
.vdict-wrap, .vdict-wrap * { box-sizing: border-box; }
.vdict-wrap img, .vdict-wrap video, .vdict-wrap audio, .vdict-wrap iframe { max-width: 100%; height: auto; }
.vdict-wrap { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.vdict-wrap, .vdict-wrap .vdict-body, .vdict-wrap .vdict-panel { overflow-wrap: break-word; word-break: break-word; }

/* Touch targets for buttons */
.vdict-wrap .vdict-btn,
.vdict-wrap button,
.vdict-wrap .button,
.vdict-wrap input[type="button"],
.vdict-wrap input[type="submit"]{ min-height: 44px; line-height: 1.2; }

/* Mobile (≤ 640px) */
@media (max-width: 640px){
  .vdict-wrap{ padding: 12px; }
  .vdict-wrap .vdict-title{ font-size: clamp(18px, 4.5vw, 20px); }
  .vdict-wrap .vdict-topbar{ display:flex; flex-wrap:wrap; gap:10px; }

  /* Inputs full width */
  .vdict-wrap input[type="text"],
  .vdict-wrap textarea,
  .vdict-wrap select{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Stack actions and controls one per line, without setting explicit order */
  .vdict-wrap .vdict-actions,
  .vdict-wrap .vdict-controls{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
  }
  .vdict-wrap .vdict-actions > *,
  .vdict-wrap .vdict-controls > *{
    width: 100% !important;
  }

  /* Readable feedback/solution */
  .vdict-wrap .vdict-result,
  .vdict-wrap .vdict-feedback,
  .vdict-wrap .vdict-correction,
  .vdict-wrap .vdict-solution{
    font-size: 15px;
    line-height: 1.5;
  }

  /* Tables scroll horizontally if needed */
  .vdict-wrap table{
    display: block;
    width: 100%;
    overflow-x: auto;
  }
}

/* Small tablets (641–900px): two columns for actions/controls */
@media (min-width: 641px) and (max-width: 900px){
  .vdict-wrap{ padding: 16px; }
  .vdict-wrap .vdict-actions,
  .vdict-wrap .vdict-controls{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}


/* VerbaDictée — ensure correction/diff visible on mobile */
@media (max-width: 640px){
  .vdict-wrap .vdict-diff,
  .vdict-wrap .vdict-correction,
  .vdict-wrap .vdict-solution,
  .vdict-wrap .vdict-feedback{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .vdict-wrap .vdict-panel,
  .vdict-wrap .vdict-body{
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}