/* ──────────────────────────────────────────────────────────────
   SD QCM — Styles front
   Variables CSS surchargeables par le thème (ou par le réglage admin
   « Apparence — couleurs des cartes QCM ») :
     --sdqr-color-primary, --sdqr-color-correct, --sdqr-color-incorrect,
     --sdqr-color-partial, --sdqr-color-warning,
     --sdqr-bg, --sdqr-bg-soft, --sdqr-border, --sdqr-text, --sdqr-text-muted,
     --sdqr-radius, --sdqr-radius-lg, --sdqr-gap,
     --sdqr-shadow, --sdqr-shadow-lg.

   Tous les composants (quiz, liste, ranking) partagent ces variables ;
   ils peuvent donc être placés n'importe où sur le site sans collision.
   ────────────────────────────────────────────────────────────── */

.sdqr-quiz,
.sdqr-quiz-list,
.sdqr-ranking {
	--sdqr-color-primary:    #10b981;
	--sdqr-color-primary-2:  #059669;
	--sdqr-color-primary-3:  #047857;
	--sdqr-color-correct:    #10b981;
	--sdqr-color-incorrect:  #b32d2e;
	--sdqr-color-partial:    #b88600;
	--sdqr-color-warning:    #b88600;
	--sdqr-bg:               #ffffff;
	--sdqr-bg-soft:          #f3f5f7;
	--sdqr-bg-softer:        #f8fafc;
	--sdqr-border:           #e2e6ea;
	--sdqr-border-strong:    #cbd5e1;
	--sdqr-text:             #0f172a;
	--sdqr-text-muted:       #64748b;
	--sdqr-radius:           10px;
	--sdqr-radius-lg:        16px;
	--sdqr-gap:              16px;
	--sdqr-shadow:           0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
	--sdqr-shadow-lg:        0 4px 6px -2px rgba(15, 23, 42, .04), 0 12px 24px -8px rgba(15, 23, 42, .12);

	box-sizing: border-box;
	color: var( --sdqr-text );
	font-family: inherit;
}
.sdqr-quiz *,
.sdqr-quiz-list *,
.sdqr-ranking * { box-sizing: border-box; }

/* ── Boutons (forcés en vert pour les --primary, override fort sur thèmes) */

.sdqr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	min-height: 44px;
	line-height: 1.2;
	border: 1px solid var( --sdqr-border );
	background: #fff;
	color: var( --sdqr-text );
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none !important;
	box-shadow: none;
	transition: background 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease, color 140ms ease;
}
.sdqr-btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: var( --sdqr-shadow ); }
.sdqr-btn:focus-visible { outline: 2px solid var( --sdqr-color-primary ); outline-offset: 2px; }
.sdqr-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.sdqr-btn:visited { color: inherit; }

/* Override agressif des thèmes WP qui forcent la couleur des <button> */
.sdqr-quiz .sdqr-btn--primary,
.sdqr-quiz-list .sdqr-btn--primary,
.sdqr-btn.sdqr-btn--primary {
	background: linear-gradient( 180deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ) ) !important;
	border-color: var( --sdqr-color-primary-2 ) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(16, 185, 129, .25) !important;
}
.sdqr-quiz .sdqr-btn--primary:hover:not([disabled]),
.sdqr-quiz-list .sdqr-btn--primary:hover:not([disabled]),
.sdqr-btn.sdqr-btn--primary:hover:not([disabled]) {
	background: linear-gradient( 180deg, var( --sdqr-color-primary-2 ), var( --sdqr-color-primary-3 ) ) !important;
	border-color: var( --sdqr-color-primary-3 ) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(16, 185, 129, .35) !important;
}

.sdqr-btn--ghost {
	background: transparent;
	border-color: var( --sdqr-border-strong );
	color: var( --sdqr-text );
}
.sdqr-btn--ghost:hover:not([disabled]) { background: var( --sdqr-bg-soft ); color: var( --sdqr-text ); }

/* ──────────────────────────────────────────────────────────────
   QUIZ INTERACTIF
   ────────────────────────────────────────────────────────────── */

.sdqr-quiz {
	max-width: 820px;
	margin: 24px auto;
	padding: 32px;
	background: var( --sdqr-bg );
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius-lg );
	box-shadow: var( --sdqr-shadow );
}

.sdqr-quiz__title { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.25; }
.sdqr-quiz__intro { color: var( --sdqr-text-muted ); margin-bottom: var( --sdqr-gap ); }

.sdqr-quiz__login-gate { text-align: center; padding: 24px 0; }
.sdqr-quiz__intro-screen { text-align: center; padding: 16px 0; }
.sdqr-quiz__intro-count { color: var( --sdqr-text-muted ); margin: 4px 0 18px; }

.sdqr-progress {
	width: 100%;
	height: 8px;
	background: var( --sdqr-bg-soft );
	border-radius: 999px;
	overflow: hidden;
	margin: 8px 0;
}
.sdqr-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ));
	transition: width 220ms ease;
}
.sdqr-progress__label { margin: 4px 0 12px; font-size: 0.875rem; color: var( --sdqr-text-muted ); }

.sdqr-quiz__stage { animation: sdqrFadeIn 220ms ease; }
@keyframes sdqrFadeIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

.sdqr-question__prompt { font-size: 1.125rem; font-weight: 600; margin-bottom: 12px; }
.sdqr-question__choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.sdqr-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius );
	cursor: pointer;
	background: #fff;
	transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.sdqr-choice:hover { background: var( --sdqr-bg-softer ); border-color: var( --sdqr-border-strong ); }
.sdqr-choice input { margin-top: 4px; accent-color: var( --sdqr-color-primary ); }
.sdqr-choice.is-correct  { border-color: var( --sdqr-color-correct );   background: rgba( 16, 185, 129, .08 ); }
.sdqr-choice.is-incorrect{ border-color: var( --sdqr-color-incorrect ); background: rgba( 179, 45,  46, .08 ); }

.sdqr-quiz__feedback {
	padding: 12px 14px;
	border-radius: var( --sdqr-radius );
	margin-bottom: 12px;
	background: var( --sdqr-bg-soft );
}
.sdqr-quiz__feedback.is-correct   { background: rgba( 16, 185, 129, .12 ); color: var( --sdqr-color-correct ); }
.sdqr-quiz__feedback.is-incorrect { background: rgba( 179, 45,  46, .12 ); color: var( --sdqr-color-incorrect ); }
.sdqr-quiz__feedback.is-partial   { background: rgba( 184, 134,  0, .12 ); color: var( --sdqr-color-partial ); }
.sdqr-quiz__feedback.is-warning   { background: rgba( 184, 134,  0, .12 ); color: var( --sdqr-color-warning ); }
.sdqr-quiz__explanation { margin-top: 6px; font-size: 0.95em; color: var( --sdqr-text ); }

.sdqr-quiz__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sdqr-quiz__timer  { margin-top: 8px; text-align: right; font-variant-numeric: tabular-nums; color: var( --sdqr-text-muted ); }

.sdqr-quiz__error {
	background: rgba( 179, 45, 46, 0.08 );
	border: 1px solid var( --sdqr-color-incorrect );
	color: var( --sdqr-color-incorrect );
	padding: 12px;
	border-radius: var( --sdqr-radius );
}

/* ──────────────────────────────────────────────────────────────
   QCM À TROUS — drag & drop
   ────────────────────────────────────────────────────────────── */

.sdqr-fill__hint {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var( --sdqr-bg-softer );
	border-left: 3px solid var( --sdqr-color-primary );
	border-radius: 8px;
	color: var( --sdqr-text-muted );
	font-size: .9rem;
	line-height: 1.45;
}

.sdqr-fill__sentence {
	font-size: 1.125rem;
	line-height: 2.4;
	padding: 18px 20px;
	background: var( --sdqr-bg-softer );
	border-radius: 12px;
	margin-bottom: 18px;
	color: var( --sdqr-text );
}
.sdqr-fill__text { white-space: pre-wrap; }

.sdqr-fill__blank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	min-height: 38px;
	padding: 4px 10px;
	margin: 0 4px;
	border: 2px dashed var( --sdqr-border-strong );
	border-radius: 8px;
	background: #fff;
	vertical-align: middle;
	transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
	cursor: pointer;
	position: relative;
}
.sdqr-fill__blank:hover { border-color: var( --sdqr-color-primary ); }
.sdqr-fill__blank.is-drop-target {
	border-style: solid;
	border-color: var( --sdqr-color-primary );
	background: rgba(16, 185, 129, .08);
	transform: scale(1.03);
}
.sdqr-fill__blank.is-filled {
	border-style: solid;
	border-color: var( --sdqr-color-primary );
	background: rgba(16, 185, 129, .06);
}
.sdqr-fill__blank.is-correct {
	border-color: var( --sdqr-color-correct ) !important;
	background: rgba(16, 185, 129, .15) !important;
}
.sdqr-fill__blank.is-incorrect {
	border-color: var( --sdqr-color-incorrect ) !important;
	background: rgba(179, 45, 46, .10) !important;
}
.sdqr-fill__blank.is-incorrect .sdqr-fill__chip {
	text-decoration: line-through;
	opacity: .7;
}

.sdqr-fill__correct {
	position: absolute;
	bottom: -22px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: .78rem;
	font-weight: 700;
	color: var( --sdqr-color-correct );
}

.sdqr-fill__bank {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px;
	border: 2px dashed var( --sdqr-border );
	border-radius: 12px;
	background: var( --sdqr-bg-softer );
	min-height: 60px;
	transition: border-color 140ms ease, background 140ms ease;
}
.sdqr-fill__bank.is-drop-target {
	border-color: var( --sdqr-color-primary );
	background: rgba(16, 185, 129, .05);
}

.sdqr-fill__chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: linear-gradient( 180deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ) );
	color: #fff;
	border: 1px solid var( --sdqr-color-primary-2 );
	border-radius: 999px;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .01em;
	cursor: grab;
	user-select: none;
	box-shadow: 0 3px 8px rgba(16, 185, 129, .25);
	transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}
.sdqr-fill__chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 12px rgba(16, 185, 129, .35);
	background: linear-gradient( 180deg, var( --sdqr-color-primary-2 ), var( --sdqr-color-primary-3 ) );
}
.sdqr-fill__chip:active { cursor: grabbing; }
.sdqr-fill__chip.is-armed {
	background: linear-gradient( 180deg, var( --sdqr-color-primary-3 ), var( --sdqr-color-primary-2 ) );
	box-shadow: 0 0 0 3px rgba(16, 185, 129, .35), 0 4px 10px rgba(16, 185, 129, .4);
	transform: translateY(-1px);
}
.sdqr-fill__chip.is-dragging { opacity: .35; }

.sdqr-fill__blank .sdqr-fill__chip {
	box-shadow: none;
	font-size: .9rem;
	padding: 5px 13px;
}
.sdqr-fill__blank.is-correct .sdqr-fill__chip { background: var( --sdqr-color-correct ); border-color: var( --sdqr-color-correct ); }
.sdqr-fill__blank.is-incorrect .sdqr-fill__chip { background: var( --sdqr-color-incorrect ); border-color: var( --sdqr-color-incorrect ); }

/* ──────────────────────────────────────────────────────────────
   ÉCRAN FINAL — score, médaille, message, bouton retour
   ────────────────────────────────────────────────────────────── */

.sdqr-quiz__result {
	text-align: center;
	padding: 12px 8px 8px;
	animation: sdqrFadeIn 350ms ease;
}
.sdqr-quiz__result-medal {
	color: var( --sdqr-color-primary );
	margin-bottom: 8px;
	display: inline-flex;
}
.sdqr-quiz__result[data-tier="mid"]  .sdqr-quiz__result-medal { color: var( --sdqr-color-partial ); }
.sdqr-quiz__result[data-tier="low"]  .sdqr-quiz__result-medal { color: var( --sdqr-color-incorrect ); }
.sdqr-quiz__result-title {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 800;
	color: var( --sdqr-text );
	letter-spacing: -0.01em;
}

.sdqr-quiz__result-card {
	margin: 18px auto 14px;
	max-width: 360px;
	padding: 22px 18px 18px;
	background: linear-gradient( 180deg, #fff, var( --sdqr-bg-softer ) );
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius-lg );
	box-shadow: var( --sdqr-shadow );
}
.sdqr-quiz__result-percent {
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	font-weight: 800;
	font-size: 3.6rem;
	line-height: 1;
	color: var( --sdqr-color-primary );
	font-variant-numeric: tabular-nums;
}
.sdqr-quiz__result[data-tier="mid"]  .sdqr-quiz__result-percent { color: var( --sdqr-color-partial ); }
.sdqr-quiz__result[data-tier="low"]  .sdqr-quiz__result-percent { color: var( --sdqr-color-incorrect ); }
.sdqr-quiz__result-percent-unit { font-size: 1.6rem; font-weight: 700; margin-left: 2px; }

.sdqr-quiz__result-fraction {
	display: flex;
	gap: 6px;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	margin: 10px 0 14px;
	color: var( --sdqr-text );
	font-weight: 700;
	font-size: 1.1rem;
}
.sdqr-quiz__result-fraction-sep { color: var( --sdqr-text-muted ); }
.sdqr-quiz__result-fraction small {
	width: 100%;
	color: var( --sdqr-text-muted );
	font-weight: 500;
	font-size: .82rem;
}

.sdqr-quiz__result-bar {
	height: 10px;
	border-radius: 999px;
	background: var( --sdqr-bg-soft );
	overflow: hidden;
}
.sdqr-quiz__result-bar-fill {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ));
	transition: width 900ms cubic-bezier(.2,.7,.2,1);
}
.sdqr-quiz__result[data-tier="mid"] .sdqr-quiz__result-bar-fill {
	background: linear-gradient(90deg, var( --sdqr-color-partial ), #d49b00);
}
.sdqr-quiz__result[data-tier="low"] .sdqr-quiz__result-bar-fill {
	background: linear-gradient(90deg, var( --sdqr-color-incorrect ), #d44545);
}

.sdqr-quiz__result-message {
	margin: 4px auto 18px;
	color: var( --sdqr-text-muted );
	font-size: 1rem;
	max-width: 460px;
}

.sdqr-quiz__result-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* Icônes inline dans les boutons : on les force en block + flex-shrink:0 pour
   éviter tout décalage visuel dû à la baseline du texte ou aux thèmes qui
   appliquent du `vertical-align: baseline` aux <svg>. */
.sdqr-btn__icon,
.sdqr-back-to-list svg {
	display: block;
	flex-shrink: 0;
	stroke: currentColor;
	width: 16px;
	height: 16px;
}
.sdqr-back-to-list { padding-left: 18px; padding-right: 22px; }
.sdqr-back-to-list span { line-height: 1; }

/* Focus accessible */
.sdqr-quiz :focus-visible,
.sdqr-quiz-list :focus-visible,
.sdqr-ranking :focus-visible {
	outline: 2px solid var( --sdqr-color-primary );
	outline-offset: 2px;
	border-radius: var( --sdqr-radius );
}

/* ──────────────────────────────────────────────────────────────
   LISTE DES QCM (cartes)
   ────────────────────────────────────────────────────────────── */

.sdqr-quiz-list {
	max-width: 1200px;
	margin: 24px auto;
	padding: 0;
}

.sdqr-quiz-list__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0 4px;
}
.sdqr-quiz-list__count {
	color: var( --sdqr-text-muted );
	font-size: .95rem;
}
.sdqr-quiz-list__count strong { color: var( --sdqr-text ); font-size: 1.05rem; }

.sdqr-quiz-list__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 270px, 1fr ) );
	gap: 22px;
}

/* Carte individuelle ─────────────────────────────────────────── */

.sdqr-quiz-card {
	display: flex;
	flex-direction: column;
	background: var( --sdqr-bg );
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius-lg );
	overflow: hidden;
	box-shadow: var( --sdqr-shadow );
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
	position: relative;
}
.sdqr-quiz-card:hover {
	transform: translateY(-4px);
	box-shadow: var( --sdqr-shadow-lg );
	border-color: var( --sdqr-border-strong );
}

/* Pas de soulignement, ni sur le lien ni sur le titre */
.sdqr-quiz-card__link,
.sdqr-quiz-card__link:hover,
.sdqr-quiz-card__link:focus,
.sdqr-quiz-card__link:visited,
.sdqr-quiz-card__link *,
.sdqr-quiz-card__link *:hover {
	text-decoration: none !important;
	color: inherit !important;
}
.sdqr-quiz-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	-webkit-tap-highlight-color: transparent;
}

.sdqr-quiz-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var( --sdqr-bg-soft );
	overflow: hidden;
}
.sdqr-quiz-card__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}
.sdqr-quiz-card:hover .sdqr-quiz-card__thumb { transform: scale( 1.04 ); }

.sdqr-quiz-card__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --sdqr-border-strong );
	background: linear-gradient( 135deg, var( --sdqr-bg-soft ), var( --sdqr-bg-softer ) );
}

.sdqr-quiz-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	background: rgba( 16, 185, 129, .96 );
	color: #fff !important;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba( 16, 185, 129, .35 );
}

.sdqr-quiz-card__badge--level {
	left: auto;
	right: 12px;
	background: var( --sdqr-level-color, #94a3b8 );
	box-shadow: 0 2px 6px rgba( 15, 23, 42, .25 );
	text-transform: uppercase;
	font-size: .7rem;
	letter-spacing: .04em;
}

.sdqr-quiz-card__badge--level svg {
	flex-shrink: 0;
}

.sdqr-quiz-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 18px 20px;
	flex: 1;
}

.sdqr-quiz-card__cat {
	display: inline-block;
	width: max-content;
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --sdqr-bg-soft );
	color: var( --sdqr-text-muted ) !important;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdqr-quiz-card__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --sdqr-text ) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sdqr-quiz-card__excerpt {
	margin: 0;
	color: var( --sdqr-text-muted ) !important;
	font-size: .9rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Bouton CTA vert sur la carte (rendu via <span> dans un <a> parent) */
.sdqr-quiz-card__cta-btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: linear-gradient( 180deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ) );
	color: #fff !important;
	border: 1px solid var( --sdqr-color-primary-2 );
	border-radius: 999px;
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.2;
	box-shadow: 0 4px 10px rgba(16, 185, 129, .25);
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
	text-decoration: none !important;
}
.sdqr-quiz-card:hover .sdqr-quiz-card__cta-btn {
	background: linear-gradient( 180deg, var( --sdqr-color-primary-2 ), var( --sdqr-color-primary-3 ) );
	box-shadow: 0 6px 14px rgba(16, 185, 129, .35);
}
.sdqr-quiz-card__cta-btn svg { stroke: currentColor; transition: transform 200ms ease; }
.sdqr-quiz-card:hover .sdqr-quiz-card__cta-btn svg { transform: translateX(3px); }

.sdqr-quiz-card.is-done .sdqr-quiz-card__cta-btn {
	background: linear-gradient( 180deg, #64748b, #475569 );
	border-color: #475569;
	box-shadow: 0 4px 10px rgba(71, 85, 105, .25);
}
.sdqr-quiz-card.is-done:hover .sdqr-quiz-card__cta-btn {
	background: linear-gradient( 180deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ) );
	border-color: var( --sdqr-color-primary-2 );
	box-shadow: 0 6px 14px rgba(16, 185, 129, .35);
}

/* État vide ─────────────────────────────────────────────────── */

.sdqr-quiz-list--empty .sdqr-quiz-list__empty {
	text-align: center;
	padding: 48px 24px;
	border: 2px dashed var( --sdqr-border );
	border-radius: var( --sdqr-radius-lg );
	background: var( --sdqr-bg-softer );
	color: var( --sdqr-text-muted );
}
.sdqr-quiz-list__empty-icon { width: 64px; height: 64px; color: var( --sdqr-color-primary ); margin-bottom: 12px; }
.sdqr-quiz-list__empty-title { margin: 0 0 6px; font-size: 1.125rem; color: var( --sdqr-text ); }
.sdqr-quiz-list__empty-text { margin: 0; }

/* Pagination ───────────────────────────────────────────────── */

.sdqr-quiz-list__pagination { margin: 28px 0 8px; display: flex; justify-content: center; }
.sdqr-quiz-list__pagination .page-numbers {
	list-style: none; margin: 0; padding: 0;
	display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.sdqr-quiz-list__pagination .page-numbers a,
.sdqr-quiz-list__pagination .page-numbers span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px;
	border: 1px solid var( --sdqr-border ); border-radius: var( --sdqr-radius );
	background: #fff; color: var( --sdqr-text ) !important;
	text-decoration: none !important; font-weight: 600; font-size: .9rem;
	transition: background 140ms ease, border-color 140ms ease;
}
.sdqr-quiz-list__pagination .page-numbers a:hover { background: var( --sdqr-bg-soft ); border-color: var( --sdqr-border-strong ); }
.sdqr-quiz-list__pagination .page-numbers .current {
	background: var( --sdqr-color-primary ); color: #fff !important; border-color: var( --sdqr-color-primary );
}
.sdqr-quiz-list__pagination .page-numbers .dots { background: transparent; border-color: transparent; }

/* ──────────────────────────────────────────────────────────────
   CLASSEMENT — design « podium » réutilisable n'importe où
   ────────────────────────────────────────────────────────────── */

.sdqr-ranking {
	max-width: 640px;
	margin: 24px auto;
	padding: 24px;
	background: var( --sdqr-bg );
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius-lg );
	box-shadow: var( --sdqr-shadow );
}

.sdqr-ranking__header {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 14px; padding-bottom: 14px;
	border-bottom: 1px solid var( --sdqr-border );
}
.sdqr-ranking__header-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: linear-gradient( 135deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2 ) );
	color: #fff; flex-shrink: 0;
}
.sdqr-ranking__title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var( --sdqr-text ); }
.sdqr-ranking__subtitle { margin: 0; font-size: .82rem; color: var( --sdqr-text-muted ); }

.sdqr-ranking__periods {
	display: inline-flex; gap: 4px; flex-wrap: wrap;
	background: var( --sdqr-bg-soft ); padding: 4px;
	border-radius: 999px; margin-bottom: 16px;
}
.sdqr-ranking__period {
	padding: 6px 14px; border-radius: 999px;
	font-size: 0.85rem; font-weight: 600;
	text-decoration: none !important; color: var( --sdqr-text-muted );
	transition: background 140ms ease, color 140ms ease;
}
.sdqr-ranking__period:hover { color: var( --sdqr-text ); }
.sdqr-ranking__period.is-active {
	background: #fff; color: var( --sdqr-color-primary );
	box-shadow: var( --sdqr-shadow );
}

.sdqr-ranking__list,
.sdqr-ranking ol.sdqr-ranking__list,
.sdqr-ranking ul.sdqr-ranking__list {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sdqr-ranking__list > li::marker,
.sdqr-ranking__list > li::before { content: none !important; display: none !important; }

.sdqr-ranking__row {
	display: grid;
	grid-template-columns: 44px auto 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius );
	background: #fff;
	transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.sdqr-ranking__row:hover { transform: translateX( 2px ); box-shadow: var( --sdqr-shadow ); }
.sdqr-ranking__row:not(:has(.sdqr-ranking__avatar)) { grid-template-columns: 44px 1fr auto; }

.sdqr-ranking__row--1, .sdqr-ranking__row--2, .sdqr-ranking__row--3 { border-width: 2px; padding: 16px; }
.sdqr-ranking__row--1 {
	background: linear-gradient( 135deg, rgba(255, 215, 0, .15), rgba(255, 196, 0, .06) );
	border-color: rgba(255, 196, 0, .55);
}
.sdqr-ranking__row--2 {
	background: linear-gradient( 135deg, rgba(192, 192, 192, .22), rgba(192, 192, 192, .06) );
	border-color: rgba(180, 180, 180, .55);
}
.sdqr-ranking__row--3 {
	background: linear-gradient( 135deg, rgba(205, 127, 50, .20), rgba(205, 127, 50, .05) );
	border-color: rgba(205, 127, 50, .50);
}

.sdqr-ranking__rank {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: var( --sdqr-bg-soft ); color: var( --sdqr-text );
	font-weight: 800; font-size: 0.95rem; flex-shrink: 0;
}
.sdqr-ranking__row--1 .sdqr-ranking__rank { background: linear-gradient(135deg, #ffd700, #ffb300); color: #5b4300; box-shadow: 0 4px 10px rgba(255, 196, 0, .35); }
.sdqr-ranking__row--2 .sdqr-ranking__rank { background: linear-gradient(135deg, #e7e7e7, #b8b8b8); color: #3a3a3a; box-shadow: 0 4px 10px rgba(160, 160, 160, .25); }
.sdqr-ranking__row--3 .sdqr-ranking__rank { background: linear-gradient(135deg, #d18a4a, #a85a1a); color: #fff;    box-shadow: 0 4px 10px rgba(168, 90, 26, .30); }

.sdqr-ranking__avatar img { border-radius: 50%; display: block; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(15, 23, 42, .12); }
.sdqr-ranking__row--1 .sdqr-ranking__avatar img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 196, 0, .55); }
.sdqr-ranking__row--2 .sdqr-ranking__avatar img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(180, 180, 180, .55); }
.sdqr-ranking__row--3 .sdqr-ranking__avatar img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(205, 127, 50, .50); }

.sdqr-ranking__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var( --sdqr-text ); }

.sdqr-ranking__score { text-align: right; line-height: 1.1; }
.sdqr-ranking__score strong { display: block; font-size: 1.05rem; color: var( --sdqr-color-primary ); font-weight: 800; }
.sdqr-ranking__row--1 .sdqr-ranking__score strong,
.sdqr-ranking__row--2 .sdqr-ranking__score strong,
.sdqr-ranking__row--3 .sdqr-ranking__score strong { color: var( --sdqr-text ); }
.sdqr-ranking__score small { display: block; color: var( --sdqr-text-muted ); font-size: .78rem; margin-top: 2px; }

.sdqr-ranking__empty {
	color: var( --sdqr-text-muted ); text-align: center;
	padding: 24px 12px; background: var( --sdqr-bg-softer );
	border-radius: var( --sdqr-radius ); border: 1px dashed var( --sdqr-border );
	margin: 0;
}

/* ── Classement GLOBAL (tous QCM) ───────────────────────────── */

.sdqr-ranking--global { max-width: 720px; }

.sdqr-ranking--global .sdqr-ranking__list { gap: 10px; }

.sdqr-ranking--global .sdqr-ranking__row {
	padding: 14px 16px;
	border-radius: 14px;
}

/* La méta "X QCM · moy. Y%" sous le pseudo. */
.sdqr-ranking__meta {
	display: block !important;
	font-size: .78rem;
	color: var( --sdqr-text-muted );
	font-weight: 500;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sdqr-ranking--global .sdqr-ranking__name {
	white-space: normal;
	line-height: 1.25;
}

.sdqr-ranking--global .sdqr-ranking__score strong { font-size: 1.25rem; }
.sdqr-ranking--global .sdqr-ranking__score small  { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }

/* Médailles top 3 : badge SVG en surimpression du rang. */
.sdqr-ranking--global .sdqr-ranking__row--1 .sdqr-ranking__rank::after,
.sdqr-ranking--global .sdqr-ranking__row--2 .sdqr-ranking__rank::after,
.sdqr-ranking--global .sdqr-ranking__row--3 .sdqr-ranking__rank::after {
	content: ""; position: absolute; right: -4px; bottom: -4px;
	width: 16px; height: 16px; border-radius: 50%;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 2h10v3a5 5 0 0 1-5 5 5 5 0 0 1-5-5V2zM7 13h6l1 5H6l1-5z' fill='%23eab308'/></svg>") center/12px no-repeat;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
}
.sdqr-ranking--global .sdqr-ranking__rank { position: relative; }

/* Le bandeau dégradé d'arrière-plan est un peu plus marqué pour le global. */
.sdqr-ranking--global .sdqr-ranking__row--1 { background: linear-gradient( 135deg, rgba(255, 215, 0, .22), rgba(255, 196, 0, .04) ); }
.sdqr-ranking--global .sdqr-ranking__row--2 { background: linear-gradient( 135deg, rgba(192, 192, 192, .28), rgba(192, 192, 192, .04) ); }
.sdqr-ranking--global .sdqr-ranking__row--3 { background: linear-gradient( 135deg, rgba(205, 127, 50, .26), rgba(205, 127, 50, .03) ); }

/* ── Mobile ──────────────────────────────────────────────────── */

@media (max-width: 720px) {
	.sdqr-quiz-list__grid { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); gap: 16px; }
	.sdqr-fill__sentence { font-size: 1rem; line-height: 2.3; padding: 16px; }
	.sdqr-fill__blank { min-width: 90px; }
	.sdqr-quiz__result-percent { font-size: 3rem; }
}

@media (max-width: 600px) {
	.sdqr-quiz, .sdqr-ranking { padding: 18px; margin: 12px; }
	.sdqr-quiz-list { margin: 12px; }
	.sdqr-quiz__actions { flex-direction: column-reverse; }
	.sdqr-btn { width: 100%; }

	.sdqr-quiz-list__grid { grid-template-columns: 1fr; }
	.sdqr-quiz-card__media { aspect-ratio: 16 / 10; }

	.sdqr-ranking__row { grid-template-columns: 36px auto 1fr auto; gap: 10px; padding: 10px 12px; }
	.sdqr-ranking__row:not(:has(.sdqr-ranking__avatar)) { grid-template-columns: 36px 1fr auto; }
	.sdqr-ranking__rank { width: 30px; height: 30px; font-size: .85rem; }
}

/* ──────────────────────────────────────────────────────────────
   Barre de filtres au-dessus de [sdqr_quiz_list]
   ────────────────────────────────────────────────────────────── */

.sdqr-quiz-list__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var( --sdqr-bg-soft );
	border: 1px solid var( --sdqr-border );
	border-radius: var( --sdqr-radius );
	margin: 0 0 20px;
}

.sdqr-quiz-list__filters-search {
	position: relative;
	flex: 1 1 220px;
	display: flex;
	align-items: center;
}

.sdqr-quiz-list__filters-search svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var( --sdqr-text-muted );
	pointer-events: none;
}

.sdqr-quiz-list__filters-search input[type="search"] {
	width: 100%;
	padding: 9px 14px 9px 36px;
	border: 1px solid var( --sdqr-border );
	border-radius: 10px;
	background: #fff;
	color: var( --sdqr-text );
	font-size: .92rem;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, .04 );
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sdqr-quiz-list__filters-search input[type="search"]:focus {
	outline: none;
	border-color: var( --sdqr-color-primary );
	box-shadow: 0 0 0 3px rgba( 16, 185, 129, .15 );
}

.sdqr-quiz-list__filters-field { display: flex; align-items: center; }
.sdqr-quiz-list__filters select {
	min-width: 170px;
	padding: 9px 32px 9px 12px;
	border: 1px solid var( --sdqr-border );
	border-radius: 10px;
	background: #fff url( "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ) no-repeat right 12px center;
	background-size: 12px;
	color: var( --sdqr-text );
	font-size: .92rem;
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.sdqr-quiz-list__filters select:focus {
	outline: none;
	border-color: var( --sdqr-color-primary );
	box-shadow: 0 0 0 3px rgba( 16, 185, 129, .15 );
}

.sdqr-quiz-list__filters-submit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: linear-gradient( 180deg, var( --sdqr-color-primary ), var( --sdqr-color-primary-2, #059669 ) );
	color: #fff !important;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .01em;
	cursor: pointer;
	box-shadow: 0 3px 8px rgba( 16, 185, 129, .25 );
	transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.sdqr-quiz-list__filters-submit:hover {
	transform: translateY(-1px);
	filter: brightness( 1.05 );
	box-shadow: 0 5px 12px rgba( 16, 185, 129, .35 );
}
.sdqr-quiz-list__filters-submit:focus-visible {
	outline: 2px solid var( --sdqr-color-primary );
	outline-offset: 3px;
}
.sdqr-quiz-list__filters-submit svg { flex-shrink: 0; }

.sdqr-quiz-list__filters-reset {
	color: var( --sdqr-text-muted ) !important;
	text-decoration: underline;
	font-size: .85rem;
	transition: color 140ms ease;
}
.sdqr-quiz-list__filters-reset:hover { color: var( --sdqr-color-primary ) !important; }

.sdqr-quiz-list__filters-summary {
	margin: -8px 0 16px;
	color: var( --sdqr-text-muted );
	font-size: .9rem;
}
.sdqr-quiz-list__filters-summary strong { color: var( --sdqr-text ); }

@media (max-width: 600px) {
	.sdqr-quiz-list__filters { padding: 12px; gap: 8px; }
	.sdqr-quiz-list__filters-search { flex-basis: 100%; }
	.sdqr-quiz-list__filters select { flex: 1; min-width: 0; }
	.sdqr-quiz-list__filters-submit { flex: 1; justify-content: center; }
}

/* ──────────────────────────────────────────────────────────────
   Widgets Elementor SD-QCM (préfixe `sdqr-el-` totalement isolé)
   --------------------------------------------------------------
   Ces classes ne sont PAS appliquées à du HTML écrit par
   l'utilisateur dans Elementor : elles n'affectent que les
   éléments générés par nos widgets (Title, Image, Excerpt, …).
   Elles n'imposent quasiment AUCUN style ; tout le visuel est
   piloté par les Controls Elementor (typo, couleur, padding…).
   ────────────────────────────────────────────────────────────── */

.sdqr-el-loop {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 24px;
}
.sdqr-el-loop__item { min-width: 0; }

.sdqr-el-title { margin: 0; line-height: 1.25; }
.sdqr-el-title a { text-decoration: none; color: inherit; }

.sdqr-el-excerpt { margin: 0; line-height: 1.55; }

.sdqr-el-image {
	display: block;
	overflow: hidden;
	line-height: 0;
}
.sdqr-el-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.sdqr-el-cat {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .02em;
}
.sdqr-el-cat a { color: inherit; text-decoration: none; }

.sdqr-el-meta { font-size: .85rem; line-height: 1.5; }

.sdqr-el-level,
.sdqr-el-done {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1;
}
.sdqr-el-level__icon { flex-shrink: 0; }

.sdqr-el-cta-wrap { display: flex; }
.sdqr-el-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
	transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.sdqr-el-cta:hover { transform: translateY(-1px); filter: brightness(1.05); text-decoration: none; }
.sdqr-el-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }