:root {
    --quiz-primary: #4a90e2;
    --quiz-success: #28a745;
    --quiz-error:   #dc3545;
    --quiz-bg:      #f9f9f9;
    --quiz-text:    #333;
	
	--quiz-icon-correct: '✔️';
    --quiz-icon-wrong: '❌';
    --quiz-icon-left: 94%;
    --quiz-icon-top: 0.4em;
    
	
}

.dbl-quiz {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: var(--quiz-text);
    margin: 1.5em 0;
}

#dbl-quiz-start,
#dbl-quiz-correct,
#dbl-quiz-next,
#dbl-quiz-view-results {
    background-color: var(--quiz-primary);
    color: #fff;
    border: none;
    padding: 0.75em 1.5em;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
	font-family: Nunito Sans;
    margin-top: 1rem;
	font-weight: 400;
  font-size: 16px;
    letter-spacing: 2px;
  word-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
}








#dbl-quiz-start:hover,
#dbl-quiz-correct:hover,
#dbl-quiz-next:hover,
#dbl-quiz-view-results:hover {
    background-color: #3a78c2;
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.quiz-page-info {
    font-size: 1.1em;
    font-weight: 600;
}

.quiz-progress {
    flex: 1;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    height: 0.5em;
    margin-left: 1em;
}

.quiz-progress-bar {
    background: var(--quiz-primary);
    height: 100%;
    width: 0;
    transition: width 0.3s ease;
}

.quiz-questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.25rem;
}

.quiz-question {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 1em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.quiz-question legend {
    font-weight: bold;
    margin-bottom: 0.75em;
    font-size: 1rem;
}

.quiz-question div {
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5em 1em;
}

.quiz-question input[type="radio"],
.quiz-question input[type="checkbox"] {
    margin-right: 0.5em;
}

.quiz-cloze-text {
    line-height: 2.4;
    font-size: 1rem;
}

.cloze-input-wrap {
    display: inline-flex;
    align-items: center;
    margin: 0 0.2em;
}

.quiz-cloze-input {
    min-width: 5ch !important;
    width: calc(var(--cloze-chars, 4) * 1ch) !important;
    max-width: 100%;
    padding: 0.15em 0.45em 0.2em !important;
    border: 0 !important;
    border-radius: 8px;
    background: rgba(74, 144, 226, 0.06);
    font-size: 0.95rem;
    line-height: 1.6;
    box-sizing: border-box;
    box-shadow:
        inset 0 -2px 0 rgba(74, 144, 226, 0.55),
        inset 0 0 0 1px rgba(74, 144, 226, 0.18);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    
}

.quiz-cloze-input:focus {
    outline: none;
    background: #fff;
    box-shadow:
        inset 0 -2px 0 var(--quiz-primary),
        0 0 0 2px rgba(74, 144, 226, 0.18);
}

.quiz-cloze-input::placeholder {
    color: #94a3b8;
}

.cloze-blank {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin: 0 0.2em;
    padding: 0.2em 0.45em;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.cloze-blank .cloze-user {
    font-weight: 600;
}

.cloze-blank .cloze-expected {
    font-size: 0.85em;
    color: #6b7280;
}

.cloze-blank.cloze-correct {
    background-color: #e6f4ea;
    border-color: var(--quiz-success);
}

.cloze-blank.cloze-wrong {
    background-color: #fae3e4;
    border-color: var(--quiz-error);
}

.answer-corrected {
    padding: 0.5em;
    border-radius: 4px;
    margin-bottom: 0.5em;
    position: relative;
    padding-right: 2.6em;
}

.user-correct {
    background-color: #d4edda;
    border: 1px solid var(--quiz-success);
}

.user-correct::before {
    content: var(--quiz-icon-correct);
    position: absolute;
    left: var(--quiz-icon-left);
    top: var(--quiz-icon-top);
    
}

.user-wrong {
    background-color: #f8d7da;
    border: 1px solid var(--quiz-error);
}

.user-wrong::before {
      content: var(--quiz-icon-wrong);
    position: absolute;
    left: var(--quiz-icon-left);
    top: var(--quiz-icon-top);
   
}

.show-correct {
    background-color: #d4edda;
    border: 1px solid var(--quiz-success);
}





.answer-corrected.user-correct {
    background-color: #d4edda;
    border: 1px solid var(--quiz-success);
    border-left: 6px solid var(--quiz-success); /* Ajout de la bordure gauche */
    padding: 0.5em 1em;
    border-radius: 4px;
    margin-bottom: 0.5em;
    position: relative;
    display: block;
    padding-right: 2.6em;
}


.answer-corrected.user-wrong {
    background-color: #fae3e4;
    border: 1px solid var(--quiz-error);
    border-left: 6px solid var(--quiz-error); /* Ajout de la bordure gauche */
    padding: 0.5em 1em;
    border-radius: 4px;
    margin-bottom: 0.5em;
    position: relative;
    display: block;
    padding-right: 2.6em;
}


.quiz-score {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1.5em;
    text-align: center;
}

.quiz-comment {
    margin-top: 0.75em;
    font-style: italic;
    text-align: center;
    color: var(--quiz-primary);
}

/* ==== Associations : question (avant correction) ==== */
.quiz-question.association {
    border-left: 6px solid var(--quiz-primary);
    background-color: #fefefe;
}

.quiz-assoc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1em;
    margin-top: 1em;
}

.assoc-definition {
    background-color: #f5f7fa;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    padding: 0.75em;
    position: relative;
    font-size: 0.95rem;
}

.assoc-definition label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.25em;
    color: var(--quiz-primary);
}

.assoc-definition .definition-text {
    display: block;
    font-style: italic;
    color: #444;
    margin-bottom: 0.5em;
}

.assoc-definition select {
    width: 100%;
    padding: 0.4em;
    border-radius: 4px;
    border: 1px solid #bbb;
    background-color: #fff;
}

/* ==== Associations : réponses affichées après correction ==== */
.assoc-result {
    border: 1px solid #ccc;
    border-left: 6px solid var(--quiz-primary);
    background-color: var(--quiz-bg);
    padding: 0.75em 1em;
    border-radius: 4px;
    margin-bottom: 1em;
    position: relative;
    display: block !important;
}

.assoc-result-correct {
    display: block !important;
    margin: 8px;
}

.assoc-result strong {
    display: inline-block;
    width: 1.5em;
    color: var(--quiz-primary);
}

.assoc-result.user-correct {
    border-left-color: var(--quiz-success);
    background-color: #e6f4ea;
}

.assoc-result.user-correct::before {
        content: var(--quiz-icon-correct);
    position: absolute;
    left: var(--quiz-icon-left);
    top: var(--quiz-icon-top);
}

.assoc-result.user-wrong {
    border-left-color: var(--quiz-error);
    background-color: #fae3e4;
}

.assoc-result.user-wrong::before {
      content: var(--quiz-icon-wrong);
    position: absolute;
    left: var(--quiz-icon-left);
    top: var(--quiz-icon-top);
}

/* ==== Liste des termes affichée en dessous ==== */
.assoc-termes-list {
    margin-top: 1rem;
    background: #f8f9fb;
    padding: 0.75em 1em;
    border-radius: 4px;
    border: 1px dashed #bbb;
}

.assoc-termes-list strong {
    display: inline-block;
    width: 2em;
    font-weight: bold;
    color: var(--quiz-primary);
}

.assoc-termes-list span {
    display: block;
    padding: 0.25em 0;
    font-size: 0.95rem;
    color: #555;
}

/* ==== Classement : question affichée avant ou pendant ===== */
.classement-front-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.classement-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    gap: 0.5em;
}

.btn-move {
   border: none;
  padding: 6px 16px;
    
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  line-height: 20px;
  padding-bottom: 12px;
}

.btn-move.up{background:#fe30ca;}
.btn-move.down{background:#3080fe;}



.btn-move:hover {
    background:var(--e-global-color-accent) !important;
}

.sortable-item,
.display-item {
    transition: transform 0.2s ease, background-color 0.2s ease;
    position: relative;
}

.sortable-item.moving,
.display-item.moving {
    background-color: #eef6ff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.sortable-item {
    will-change: transform;
}

/* ==== Classement : correction harmonisée avec association ==== */
.classement-correction {
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.classement-correction li {
    background-color: var(--quiz-bg);
    border-left: 6px solid var(--quiz-primary);
    padding: 0.75em 1em;
    border-radius: 4px;
    margin-bottom: 1em;
    position: relative;
    display: block;
	padding-right: 2.6em;
}

.classement-correction .user-correct {
    background-color: #e6f4ea;
    border-left-color: var(--quiz-success);
}

.classement-correction .user-wrong {
    background-color: #fae3e4;
    border-left-color: var(--quiz-error);
}

.classement-correction .user-correct::before,
.classement-correction .user-wrong::before {
    position: absolute;
    left: var(--quiz-icon-left);
    top: var(--quiz-icon-top);
}

.classement-correction .user-correct::before {
     content: var(--quiz-icon-correct);
}

.classement-correction .user-wrong::before {
     content: var(--quiz-icon-wrong);
}

.classement-correction .correction-note {
    display: block;
    margin-top: 0.5em;
    font-style: italic;
    color: #666;
}

/* ==== Titres et structure ==== */
.quiz-question div {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.quiz-question label {
    display: inline-block;
    line-height: 1.4;
    flex: 1;
}

div.quiz-question-titre {
    display: block;
    margin-bottom: 20px;
}

.quiz-question-titre u {
    display: inline-block;
}


/* ===== Quiz score + comment ===== */
#dbl-quiz-content{
	--accent-1: #2563eb;   /* bleu */
  --accent-2: #16a34a;   /* vert */
  --accent-3: #f59e0b;   /* orange */
  --accent-4: #ec4899;   /* rose */
  --bg-1: #f0fdf4;       /* vert très pâle */
  --ink: #0f172a;        /* texte sombre */

  position: relative;
  padding: 2.2rem 2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fafc 0%, var(--bg-1) 100%);
  /* box-shadow: 0 8px 30px rgba(2,6,23,.08); */
  box-shadow:0px 2px 10px rgba(2,6,23,.08);
  color: var(--ink);
  overflow: hidden;
}

/* confettis discrets en décor */
#dbl-quiz-content::before{
  content:"";
  position:absolute; inset: -20%;
  background:
    radial-gradient(circle at 15% 30%, rgba(37,99,235,.18) 0 6px, transparent 7px),
    radial-gradient(circle at 85% 35%, rgba(236,72,153,.18) 0 6px, transparent 7px),
    radial-gradient(circle at 25% 85%, rgba(22,163,74,.18) 0 6px, transparent 7px),
    radial-gradient(circle at 70% 80%, rgba(245,158,11,.18) 0 6px, transparent 7px);
  animation: confetti-drift 14s linear infinite;
  pointer-events:none;
}

/* SCORE : badge animé, texte en dégradé */
#dbl-quiz-content .quiz-score{
  position: relative;
  display: block;
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  padding: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  /* backdrop-filter: blur(4px); */
  /* box-shadow: 0 8px 20px rgba(2,6,23,.08); */
  line-height: 1.2;
  /* dégradé dans le texte */
  background-image:
    linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width:100% !important;
}

/* halo animé derrière le badge */
#dbl-quiz-content .quiz-score::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius: 999px;
  background: radial-gradient(60% 120% at 30% 30%,
    rgba(37,99,235,.20), rgba(236,72,153,.18) 50%, transparent 70%);
  z-index:-1;
  filter: blur(10px);
  animation: pulse-soft 3.5s ease-in-out infinite;
}

/* COMMENTAIRE : cartouche sympa */
#dbl-quiz-content .quiz-comment{
  margin-top: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 600;
  font-style: italic;
  color: #0b5c30;
  background: #e8ffe7;
  border: 2px solid #c9f7c7;
  padding: .6rem .9rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(16,185,129,.12);
   width:100% !important;
}

#dbl-quiz-content .quiz-comment::before{
  content:"✦";
  font-style: normal;
  font-weight: 900;
  color: #10b981;
  transform: translateY(-1px);
}

/* Animations */
@keyframes pulse-soft{
  0%,100%{ transform: scale(1); opacity:.75; }
  50%{ transform: scale(1.04); opacity:1; }
}
@keyframes confetti-drift{
  0%{ transform: translateY(-2%) rotate(0deg); }
  100%{ transform: translateY(2%) rotate(1turn); }
}

/* Accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  #dbl-quiz-content::before,
  #dbl-quiz-content .quiz-score::after{ animation:none; }
}



@media (max-width: 600px) {
    .quiz-questions-grid {
        grid-template-columns: 1fr;
    }
}