html[dir="ltr"] .wqtb-force-ltr,
.wqtb-force-ltr,
.wqtb-force-ltr * {
direction: ltr;
text-align: left;
box-sizing: border-box;
}
@font-face {
font-family: 'CairoLocal';
src: url('../../fonts/Cairo-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'CairoLocal';
src: url('../../fonts/Cairo-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
.wqtb-force-ltr table th,
.wqtb-force-ltr table td {
text-align: left;
}
.wqtb-force-ltr .wqtb-front-meta,
.wqtb-force-ltr .wqtb-front-actions,
.wqtb-force-ltr .wqtb-front-kpis,
.wqtb-force-ltr .wqtb-front-grid-2 {
direction: ltr;
}
.wqtb-force-ltr .wqtb-chip {
display: inline-flex;
align-items: center;
}
.wqtb-force-ltr .wqtb-progress-row {
direction: ltr;
}
body.wqtb-frontend-body {
margin: 0;
background: #f5f7fb;
color: #0f172a;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
.wqtb-front-shell {
max-width: 1280px;
margin: 0 auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 22px;
}
/* HEADER ARAPID */
.wqtb-arapid-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 24px;
padding: 28px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.wqtb-arapid-header-left {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
min-width: 0;
}
.wqtb-arapid-logo-wrap {
width: 74px;
height: 74px;
border-radius: 18px;
background: #f8fbff;
border: 1px solid #dbe3ef;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.wqtb-arapid-logo {
max-width: 58px;
max-height: 58px;
object-fit: contain;
}
.wqtb-arapid-logo-fallback {
display: none;
font-size: 12px;
font-weight: 800;
color: #1d4ed8;
letter-spacing: 1px;
}
.wqtb-arapid-logo-wrap.no-logo .wqtb-arapid-logo-fallback {
display: block;
}
.wqtb-arapid-brand {
min-width: 0;
}
.wqtb-arapid-brand-top {
color: #64748b;
font-size: 14px;
margin-bottom: 8px;
}
.wqtb-arapid-title {
margin: 0 0 14px 0;
font-size: 28px;
line-height: 1.1;
font-weight: 800;
color: #0f172a;
}
.wqtb-front-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
}
.wqtb-chip {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: 999px;
background: #eef4ff;
color: #1d4ed8;
font-weight: 700;
font-size: 13px;
white-space: nowrap;
}
.wqtb-front-session {
font-size: 15px;
color: #334155;
margin-top: 6px;
}
.wqtb-front-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.wqtb-btn {
display: inline-block;
border-radius: 12px;
padding: 12px 18px;
text-decoration: none;
font-weight: 700;
border: 1px solid #d6deeb;
color: #0f172a;
background: #fff;
transition: all 0.2s ease;
}
.wqtb-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.wqtb-btn-primary {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
/* CARDS */
.wqtb-front-hero,
.wqtb-front-progress-card,
.wqtb-front-advanced,
.wqtb-front-learners,
.wqtb-front-actions-bar {
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 24px;
padding: 24px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.wqtb-front-description h2,
.wqtb-front-progress-card h2,
.wqtb-front-advanced h2,
.wqtb-front-learners h2 {
margin: 0 0 14px 0;
font-size: 20px;
font-weight: 800;
color: #0f172a;
}
.wqtb-front-description-content {
direction: auto;
color: #334155;
}
.wqtb-front-description-content p {
margin: 0 0 14px 0;
}
/* KPIS */
.wqtb-front-kpis {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.wqtb-front-kpi {
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 18px;
padding: 18px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.wqtb-front-kpi span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
}
.wqtb-front-kpi strong {
font-size: 30px;
font-weight: 800;
color: #0f172a;
}
/* PROGRESS */
.wqtb-progress-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 18px 0 8px 0;
font-weight: 700;
gap: 16px;
}
.wqtb-progress-label,
.wqtb-progress-value {
font-size: 14px;
color: #0f172a;
}
.wqtb-progress-bar {
height: 24px;
background: #dbe3ef;
border-radius: 999px;
overflow: hidden;
margin-bottom: 18px;
}
.wqtb-progress-bar span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #4f46e5, #2563eb);
}
.wqtb-progress-bar-success span {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
/* ADVANCED GRID */
.wqtb-front-grid-2 {
display: grid;
grid-template-columns: 1.2fr 1fr; /* gauche plus large */
gap: 20px;
margin-top: 18px;
}
.wqtb-front-card {
border: 1px solid #dbe3ef;
border-radius: 18px;
padding: 18px;
min-height: 220px;
background: #f5f7fb;
margin-top: 10px;
}
.wqtb-front-card h3 {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.wqtb-front-summary p {
margin: 10px 0;
color: #334155;
}
/* ACTION BAR */
.wqtb-front-actions-bar {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
.wqtb-front-actions-title {
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.wqtb-front-actions-note {
color: #64748b;
font-size: 14px;
}
/* TABLES */
.wqtb-front-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border-radius: 14px;
}
.wqtb-front-table th,
.wqtb-front-table td {
border-right: 1px solid #dbe3ef;
border-bottom: 1px solid #dbe3ef;
padding: 12px 10px;
text-align: left;
font-size: 14px;
vertical-align: top;
background: #fff;
}
.wqtb-front-table th:first-child,
.wqtb-front-table td:first-child {
border-left: 1px solid #dbe3ef;
}
.wqtb-front-table thead tr:first-child th {
border-top: 1px solid #dbe3ef;
}
.wqtb-front-table thead th {
background: #eef4ff;
color: #1e3a8a;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
}
.wqtb-front-table tbody tr:last-child td:first-child {
border-bottom-left-radius: 0px;
}
.wqtb-front-table tbody tr:last-child td:last-child {
border-bottom-right-radius: 0px;
}
.wqtb-front-table thead tr:first-child th:first-child {
border-top-left-radius: 0px;
}
.wqtb-front-table thead tr:first-child th:last-child {
border-top-right-radius: 0px;
}
.wqtb-front-table-large td,
.wqtb-front-table-large th {
font-size: 13px;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.wqtb-front-kpis {
grid-template-columns: repeat(3, 1fr);
}
.wqtb-front-grid-2 {
grid-template-columns: 1fr;
}
.wqtb-front-actions-bar {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 900px) {
.wqtb-arapid-header {
flex-direction: column;
align-items: flex-start;
}
.wqtb-arapid-header-left {
width: 100%;
}
.wqtb-front-actions {
width: 100%;
flex-wrap: wrap;
}
}
@media (max-width: 700px) {
.wqtb-front-shell {
padding: 16px;
}
.wqtb-front-kpis {
grid-template-columns: repeat(2, 1fr);
}
.wqtb-arapid-title {
font-size: 24px;
}
.wqtb-front-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.wqtb-arapid-header,
.wqtb-front-header,
.wqtb-trainer-header,
.wqtb-dashboard-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 16px !important;
padding: 22px 18px !important;
border-radius: 22px !important;
}
.wqtb-arapid-header-left {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 14px !important;
}
.wqtb-arapid-logo-wrap,
.wqtb-front-header-logo,
.wqtb-trainer-logo,
.wqtb-dashboard-logo {
order: -1 !important;
width: 104px !important;
height: 104px !important;
margin: 0 auto 8px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 24px !important;
}
.wqtb-arapid-logo,
.wqtb-front-header-logo img,
.wqtb-trainer-logo img,
.wqtb-dashboard-logo img {
width: 92px !important;
height: 92px !important;
max-width: 92px !important;
max-height: 92px !important;
object-fit: contain !important;
margin: 0 auto !important;
}
.wqtb-arapid-brand,
.wqtb-front-header-content,
.wqtb-trainer-header-content,
.wqtb-dashboard-header-content {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
.wqtb-arapid-brand-top {
width: 100% !important;
text-align: center !important;
font-size: 14px !important;
margin: 0 0 6px !important;
}
.wqtb-arapid-title,
.wqtb-front-header h1,
.wqtb-trainer-header h1,
.wqtb-dashboard-header h1 {
width: 100% !important;
text-align: center !important;
font-size: 28px !important;
line-height: 1.15 !important;
margin: 4px 0 12px !important;
}
.wqtb-front-meta,
.wqtb-training-badges,
.wqtb-front-badges,
.wqtb-header-badges {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
margin: 0 0 12px !important;
text-align: center !important;
}
.wqtb-chip,
.wqtb-training-badges span,
.wqtb-front-badges span,
.wqtb-header-badges span {
max-width: 100% !important;
white-space: normal !important;
text-align: center !important;
justify-content: center !important;
line-height: 1.35 !important;
}
.wqtb-front-session,
.wqtb-dual-time {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
text-align: center !important;
margin-top: 4px !important;
}
.wqtb-time-line {
width: 100% !important;
text-align: center !important;
justify-content: center !important;
line-height: 1.45 !important;
}
.wqtb-front-actions,
.wqtb-front-header-actions,
.wqtb-trainer-header-actions,
.wqtb-dashboard-header-actions {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
text-align: center !important;
}
.wqtb-front-actions > .wqtb-btn,
.wqtb-front-actions > a.wqtb-btn,
.wqtb-front-header-actions button,
.wqtb-trainer-header-actions button,
.wqtb-dashboard-header-actions button {
width: 100% !important;
max-width: 260px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
}
.wqtb-lang-switch,
.wqtb-lang-switcher,
.wqtb-language-switcher {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
max-width: 300px !important;
margin: 2px auto 0 !important;
}
.wqtb-lang-switch button,
.wqtb-lang-switcher button,
.wqtb-language-switcher button {
flex: 1 1 0 !important;
max-width: 90px !important;
min-width: 0 !important;
justify-content: center !important;
text-align: center !important;
}
}
.wqtb-btn-success {
background: #22c55e;
color: #fff;
border-color: #22c55e;
}
.wqtb-front-actions-main {
min-width: 240px;
}
.wqtb-front-toolbar {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.wqtb-front-search {
min-width: 260px;
height: 46px;
padding: 0 14px;
border: 1px solid #dbe3ef;
border-radius: 12px;
background: #fff;
color: #0f172a;
font-size: 14px;
}
.wqtb-front-search:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.wqtb-front-status {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.wqtb-front-status.is-issued {
background: #dcfce7;
color: #166534;
}
.wqtb-front-status.is-pending {
background: #fef3c7;
color: #92400e;
}
.wqtb-front-row-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.wqtb-btn-small {
padding: 8px 12px;
font-size: 12px;
border-radius: 10px;
}
#wqtb-frontend-learners-table tbody tr:hover td {
background: #f8fbff;
}
@media (max-width: 900px) {
.wqtb-front-toolbar {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.wqtb-front-search {
min-width: 100%;
width: 100%;
}
}
.wqtb-toast-stack {
position: fixed;
top: 20px;
right: 20px;
z-index: 100000;
display: flex;
flex-direction: column;
gap: 10px;
}
.wqtb-toast {
min-width: 240px;
max-width: 360px;
background: #172033;
color: #fff;
padding: 14px 16px;
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0,0,0,.18);
opacity: 0;
transform: translateY(-8px);
transition: all .25s ease;
font-size: 14px;
line-height: 1.4;
}
.wqtb-toast.show {
opacity: 1;
transform: translateY(0);
}
.wqtb-toast.success {
background: linear-gradient(135deg, #0f8f5b, #18b277);
}
.wqtb-toast.error {
background: linear-gradient(135deg, #b42318, #d92d20);
}
.wqtb-global-loader {
position: fixed;
inset: 0;
z-index: 100001;
}
.wqtb-global-loader-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.36);
backdrop-filter: blur(3px);
}
.wqtb-global-loader-box {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 20px;
padding: 24px 20px;
text-align: center;
box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.wqtb-global-loader-spinner {
width: 42px;
height: 42px;
margin: 0 auto 14px;
border-radius: 50%;
border: 4px solid #d8e2ff;
border-top-color: #315efb;
animation: wqtbSpin .85s linear infinite;
}
.wqtb-global-loader-text {
font-size: 14px;
color: #22304d;
font-weight: 600;
}
@keyframes wqtbSpin {
to { transform: rotate(360deg); }
}
.wqtb-premium-modal {
display: flex;
flex-direction: column;
gap: 18px;
}
.wqtb-modal-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
background: #eef4ff;
color: #2147a6;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.wqtb-learner-history ul {
list-style: none;
margin: 0;
padding: 0;
}
.wqtb-learner-history li {
display: grid;
grid-template-columns: 90px 90px 1fr;
gap: 12px;
align-items: center;
padding: 10px 12px;
border: 1px solid #edf2f7;
border-radius: 12px;
margin-bottom: 10px;
background: #fafcff;
}
.wqtb-premium-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.wqtb-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.wqtb-form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.wqtb-form-field label {
font-size: 13px;
font-weight: 700;
color: #23324f;
}
.wqtb-form-field input {
border: 1px solid #d8e2f0;
border-radius: 12px;
padding: 12px 14px;
font-size: 14px;
outline: none;
transition: all .2s ease;
background: #fff;
}
.wqtb-form-field input:focus {
border-color: #4b6bfb;
box-shadow: 0 0 0 4px rgba(75, 107, 251, 0.10);
}
.wqtb-premium-form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.wqtb-btn-danger-soft {
background: #fff1f0;
color: #b42318;
border: 1px solid #fecaca;
}
.wqtb-btn-danger-soft:hover {
background: #ffe4e1;
}
@media (max-width: 768px) {
.wqtb-form-grid {
grid-template-columns: 1fr;
}
.wqtb-learner-history li {
grid-template-columns: 1fr;
}
.wqtb-toast-stack {
left: 12px;
right: 12px;
top: 12px;
}
.wqtb-toast {
min-width: 0;
width: 100%;
max-width: none;
}
}
.wqtb-btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
}
.wqtb-btn-success {
background: linear-gradient(135deg, #16a34a, #22c55e);
box-shadow: 0 10px 20px rgba(34, 197, 94, 0.25);
}
.wqtb-btn:hover {
transform: translateY(-2px);
}
.wqtb-front-table tbody tr {
transition: all 0.2s ease;
}
.wqtb-front-table tbody tr:hover {
transform: scale(1.01);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
z-index: 2;
position: relative;
}
.wqtb-front-kpi {
transition: all 0.2s ease;
}
.wqtb-front-kpi:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.wqtb-modal-content {
animation: wqtbModalIn 0.25s ease;
}
@keyframes wqtbModalIn {
from {
transform: translateY(20px) scale(0.98);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.wqtb-global-loader-box {
animation: wqtbFadeIn 0.2s ease;
}
@keyframes wqtbFadeIn {
from { opacity: 0; transform: translate(-50%, -60%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
/* ACTIONS CONTAINER */
.wqtb-front-row-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* BOUTONS ACTIONS */
.wqtb-front-row-actions .wqtb-btn {
flex: 1;
min-width: 110px;
text-align: center;
font-size: 12px;
padding: 8px 10px;
border-radius: 10px;
}
/* POST-TEST (PRIMARY) */
.wqtb-send-post-single {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border: none;
}
/* VOIR DETAIL */
.wqtb-view-learner {
background: #0a9b05;
color: #1d4ed8;
border: 1px solid #dbe3ef;
}
/* SUPPRIMER */
.wqtb-delete-learner {
background: #b81206;
color: #b42318;
border: 1px solid #fecaca;
}
.wqtb-delete-learner:hover {
background: #ffe4e1;
}
/* VERIFIER */
.wqtb-front-row-actions a.wqtb-btn {
background: #f8fafc;
border: 1px solid #dbe3ef;
color: #0f172a;
}
/* HOVER GLOBAL */
.wqtb-front-row-actions .wqtb-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.wqtb-front-row-actions {
background: #f9fbff;
padding: 10px;
border-radius: 12px;
}
.wqtb-front-row-actions a.wqtb-btn {
background: #f1f5f9;
border: 1px solid #dbe3ef;
color: #0f172a;
font-weight: 600;
}
.wqtb-front-row-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.wqtb-front-row-actions a.wqtb-btn {
grid-column: span 2;
}
.wqtb-score-high {
color: #16a34a;
font-weight: 700;
}
.wqtb-score-medium {
color: #d97706;
font-weight: 700;
}
.wqtb-score-low {
color: #dc2626;
font-weight: 700;
}
/* =========================================================
WQTB REGISTRATION FINAL CLEAN
========================================================= */
.wqtb-reg-page,
.wqtb-reg-page * {
box-sizing: border-box;
}
.wqtb-reg-page {
direction: ltr;
text-align: left;
width: 100%;
margin: 0 auto;
padding: 48px 16px 72px;
font-family: Inter, Arial, sans-serif;
color: #0f172a;
clear: both;
}
.wqtb-reg-shell {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.wqtb-reg-hero {
position: relative;
margin-bottom: 24px;
padding: 34px 38px;
background:
radial-gradient(circle at top right, rgba(37, 99, 235, 0.07), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border: 1px solid #e3eaf5;
border-radius: 30px;
box-shadow:
0 18px 45px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.wqtb-reg-card {
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
border: 1px solid #e3eaf5;
border-radius: 30px;
padding: 34px 38px;
box-shadow:
0 18px 45px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255,255,255,0.85);
}
.wqtb-alert {
margin: 0 0 18px;
padding: 14px 16px;
border-radius: 14px;
font-size: 14px;
font-weight: 600;
}
.wqtb-alert.success {
background: #ecfdf5;
color: #166534;
border: 1px solid #bbf7d0;
}
.wqtb-alert.error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.wqtb-alert.info {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.wqtb-reg-form {
width: 100%;
margin: 0;
padding: 0;
}
.wqtb-reg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
align-items: start;
}
.wqtb-reg-field {
min-width: 0;
text-align: left;
margin: 0;
padding: 0;
}
.wqtb-reg-field-full {
grid-column: 1 / -1;
margin-top: 14px;
padding-top: 10px;
border-top: 1px solid #eef2f7;
}
.wqtb-reg-field label {
display: block;
margin: 0 0 8px;
padding: 0;
color: #24344d;
font-size: 14px;
font-weight: 800;
line-height: 1.3;
text-align: left;
letter-spacing: -0.01em;
}
.wqtb-reg-field input:not([type="checkbox"]),
.wqtb-reg-field select,
.wqtb-reg-field textarea {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
border: 1px solid #d8e2f0;
border-radius: 18px;
background: #ffffff;
color: #0f172a;
font-size: 15px;
font-family: inherit;
outline: none;
box-shadow: none;
transition:
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.wqtb-reg-field input:not([type="checkbox"]),
.wqtb-reg-field select {
height: 58px;
padding: 0 16px;
}
.wqtb-reg-field textarea {
min-height: 120px;
padding: 14px 16px;
resize: vertical;
}
.wqtb-reg-field input:not([type="checkbox"]):hover,
.wqtb-reg-field select:hover,
.wqtb-reg-field textarea:hover {
border-color: #c3d1e6;
}
.wqtb-reg-field input:not([type="checkbox"]):focus,
.wqtb-reg-field select:focus,
.wqtb-reg-field textarea:focus {
border-color: #2563eb;
box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.10);
transform: translateY(-1px);
}
.wqtb-reg-field select {
padding-right: 42px;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #64748b 50%),
linear-gradient(135deg, #64748b 50%, transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 3px),
calc(100% - 12px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
.wqtb-reg-submit {
margin-top: 28px;
}
.wqtb-reg-submit button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 62px;
padding: 0 18px;
border: 0;
border-radius: 20px;
background: linear-gradient(135deg, #2f67ee 0%, #2551dd 100%);
color: #fff;
font-family: inherit;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
cursor: pointer;
box-shadow:
0 16px 34px rgba(37, 99, 235, 0.24),
inset 0 1px 0 rgba(255,255,255,0.12);
transition:
transform .16s ease,
box-shadow .16s ease,
filter .16s ease;
}
.wqtb-reg-submit button:hover {
transform: translateY(-2px);
box-shadow:
0 22px 40px rgba(37, 99, 235, 0.28),
inset 0 1px 0 rgba(255,255,255,0.16);
filter: brightness(1.02);
}
.wqtb-reg-footnote {
margin-top: 14px;
font-size: 14px;
color: #6b7b90;
text-align: center;
}
/* ===== checkbox simple + groupe ===== */
.wqtb-checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.wqtb-checkbox-wrap {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: auto;
padding: 12px 14px;
border: 1px solid #e3ebf5;
border-radius: 12px;
background: #f8fbff;
cursor: pointer;
transition: all 0.2s ease;
}
.wqtb-checkbox-wrap:hover {
background: #eef4ff;
border-color: #c9dafc;
}
.wqtb-checkbox-wrap input[type="checkbox"] {
appearance: checkbox;
-webkit-appearance: checkbox;
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
flex: 0 0 18px;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
display: inline-block;
vertical-align: middle;
}
.wqtb-checkbox-label {
display: inline-block;
margin: 0;
padding: 0;
font-weight: 600;
color: #2c3e50;
line-height: 1.4;
opacity: 1;
border: none;
background: transparent;
}
.wqtb-checkbox-wrap input[type="checkbox"]:checked + .wqtb-checkbox-label {
color: #174ea6;
}
/* Neutralisation ciblée */
.wqtb-reg-page form,
.wqtb-reg-page label,
.wqtb-reg-page input,
.wqtb-reg-page select,
.wqtb-reg-page textarea,
.wqtb-reg-page button,
.wqtb-reg-page h1,
.wqtb-reg-page p,
.wqtb-reg-page div,
.wqtb-reg-page section,
.wqtb-reg-page span {
direction: ltr;
}
.wqtb-reg-page .wqtb-reg-field,
.wqtb-reg-page .wqtb-reg-field label,
.wqtb-reg-page .wqtb-reg-field input:not([type="checkbox"]),
.wqtb-reg-page .wqtb-reg-field select,
.wqtb-reg-page .wqtb-reg-field textarea {
float: none;
text-align: left;
}
/* mode isolé */
/* =========================================================
WQTB REGISTRATION — HARD OVERRIDE AGAINST THEME
À coller EN BAS de public.css
========================================================= */
.wqtb-reg-page,
.wqtb-reg-page * {
box-sizing: border-box !important;
}
.wqtb-reg-page {
direction: ltr !important;
text-align: left !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 48px 16px 72px !important;
font-family: Inter, Arial, sans-serif !important;
color: #0f172a !important;
clear: both !important;
}
.wqtb-reg-shell {
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.wqtb-reg-hero {
width: 100% !important;
max-width: 920px !important;
margin: 0 auto 24px auto !important;
padding: 32px 36px !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 28px !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
text-align: center !important;
}
.wqtb-reg-kicker {
display: block !important;
margin: 0 0 10px 0 !important;
color: #64748b !important;
font-size: 14px !important;
font-weight: 500 !important;
text-align: center !important;
}
.wqtb-reg-main-title {
display: block !important;
margin: 0 0 14px 0 !important;
color: #0b132b !important;
font-size: 52px !important;
line-height: 1.05 !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
text-align: center !important;
}
.wqtb-reg-badges {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin: 0 0 14px 0 !important;
}
.wqtb-badge {
display: inline-flex !important;
align-items: center !important;
min-height: 40px !important;
padding: 8px 16px !important;
background: #eef2ff !important;
color: #1d4ed8 !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.wqtb-reg-subtitle {
display: block !important;
margin: 0 !important;
color: #64748b !important;
font-size: 16px !important;
line-height: 1.6 !important;
text-align: center !important;
}
.wqtb-reg-card {
width: 100% !important;
max-width: 920px !important;
margin: 0 auto !important;
padding: 34px 36px !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 28px !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}
.wqtb-alert {
margin: 0 0 18px 0 !important;
padding: 14px 16px !important;
border-radius: 14px !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.wqtb-alert.success {
background: #ecfdf5 !important;
color: #166534 !important;
border: 1px solid #bbf7d0 !important;
}
.wqtb-alert.error {
background: #fef2f2 !important;
color: #b91c1c !important;
border: 1px solid #fecaca !important;
}
.wqtb-alert.info {
background: #eff6ff !important;
color: #1d4ed8 !important;
border: 1px solid #bfdbfe !important;
}
.wqtb-reg-form {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.wqtb-reg-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
width: 100% !important;
max-width: 100% !important;
align-items: start !important;
}
.wqtb-reg-submit {
display: block !important;
width: 100% !important;
margin: 24px 0 0 0 !important;
padding: 0 !important;
}
.wqtb-reg-submit button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 58px !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
color: #ffffff !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: none !important;
cursor: pointer !important;
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22) !important;
}
.wqtb-reg-footnote {
display: block !important;
margin: 12px 0 0 0 !important;
color: #64748b !important;
font-size: 13px !important;
text-align: center !important;
}
/* Neutralisation ciblée du thème */
.wqtb-reg-page form,
.wqtb-reg-page label,
.wqtb-reg-page input,
.wqtb-reg-page select,
.wqtb-reg-page button,
.wqtb-reg-page h1,
.wqtb-reg-page p,
.wqtb-reg-page div,
.wqtb-reg-page section,
.wqtb-reg-page span {
direction: ltr !important;
}
/* Mobile */
@media (max-width: 767px) {
.wqtb-reg-page {
padding: 24px 12px 40px !important;
}
.wqtb-reg-hero,
.wqtb-reg-card {
padding: 22px 18px !important;
border-radius: 22px !important;
}
.wqtb-reg-main-title {
font-size: 34px !important;
}
.wqtb-reg-grid {
grid-template-columns: 1fr !important;
}
}
/* ===============================
WQTB ISOLATION MODE (FINAL FIX)
=============================== */
.wqtb-isolated {
all: initial;
display: block;
font-family: Inter, Arial, sans-serif;
}
/* Fix centering of language switcher inside isolated mode */
.wqtb-isolated .wqtb-lang-switcher-wrap {
display: flex !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
margin: 0 0 24px 0 !important;
text-align: center !important;
}
.wqtb-isolated .wqtb-lang-switcher {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
width: auto !important;
margin: 0 auto !important;
}
.wqtb-isolated .wqtb-lang-switcher button {
all: unset;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 120px;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid #d9dfef;
background: #ffffff;
color: #1c2b4a;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
box-sizing: border-box;
}
.wqtb-isolated .wqtb-lang-switcher button.is-active {
background: linear-gradient(135deg, #2f6fed, #2957d8);
color: #fff;
border-color: #2f6fed;
}
/* réactiver les éléments nécessaires */
.wqtb-isolated * {
box-sizing: border-box;
}
.wqtb-isolated div,
.wqtb-isolated section,
.wqtb-isolated form {
display: block;
}
.wqtb-isolated input:not([type="checkbox"]),
.wqtb-isolated select,
.wqtb-isolated button {
all: unset;
box-sizing: border-box;
font-family: inherit;
}
/* ===============================
DESIGN PROPRE
=============================== */
.wqtb-isolated .wqtb-reg-main-title {
font-size: 42px;
font-weight: 800;
text-align: center;
margin-bottom: 10px;
}
.wqtb-isolated .wqtb-reg-kicker {
text-align: center;
color: #777;
margin-bottom: 10px;
}
.wqtb-isolated .wqtb-reg-badges {
text-align: center;
margin-bottom: 30px;
}
.wqtb-isolated .wqtb-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #eef2ff;
margin: 4px;
font-weight: 600;
}
.wqtb-isolated .wqtb-reg-card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.wqtb-isolated .wqtb-reg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.wqtb-isolated label {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.wqtb-isolated input:not([type="checkbox"]),
.wqtb-isolated select {
width: 100%;
padding: 14px;
border-radius: 10px;
border: 1px solid #ddd;
background: #fff;
}
.wqtb-isolated .wqtb-reg-submit button {
width: 100%;
padding: 16px;
border-radius: 12px;
background: #e11d1d;
color: white;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
}
@media(max-width:768px){
.wqtb-isolated .wqtb-reg-grid {
grid-template-columns: 1fr;
}
}
body .entry-title,
body .page-title,
body h1.entry-title {
display: none !important;
}
.wqtb-reg-page {
margin-top: 10px !important;
}
/* =========================
HEADER ARAPID
========================= */
.wqtb-header-arapid {
text-align: center;
margin-bottom: 30px;
}
.wqtb-header-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.wqtb-logo {
width: 90px;
}
.wqtb-header-text {
text-align: left;
}
.wqtb-title-main {
font-size: 42px;
font-weight: 700;
color: #1e3a8a;
}
.wqtb-title-ar {
font-size: 20px;
font-weight: 700;
direction: rtl;
}
.wqtb-title-en {
font-size: 16px;
color: #6b7280;
}
/* =========================
TRAINING HEADER
========================= */
.wqtb-training-title {
font-size: 36px;
font-weight: 800;
margin-bottom: 10px;
}
.wqtb-training-meta {
margin-bottom: 10px;
}
.wqtb-training-date {
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.wqtb-training-desc {
max-width: 600px;
margin: auto;
color: #666;
}
/* badges déjà existants ok */
/* =========================================================
WQTB ULTRA PREMIUM HEADER
========================================================= */
.wqtb-reg-hero {
position: relative;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: 34px 42px !important;
background:
radial-gradient(circle at top right, rgba(37, 99, 235, 0.07), transparent 28%),
linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border: 1px solid #e3eaf5 !important;
border-radius: 30px !important;
box-shadow:
0 18px 45px rgba(15, 23, 42, 0.06),
inset 0 1px 0 rgba(255,255,255,0.8);
}
.wqtb-training-header-row {
display: flex !important;
align-items: center !important;
gap: 34px !important;
width: 100% !important;
max-width: 980px !important;
margin: 0 auto !important;
}
.wqtb-training-logo {
flex: 0 0 120px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.wqtb-training-logo img {
display: block !important;
width: 120px;
height: auto !important;
filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.08));
}
.wqtb-training-content {
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: 120px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
}
.wqtb-training-title {
margin: 0 !important;
color: #0b132b !important;
font-size: clamp(34px, 4.2vw, 34px) !important;
line-height: 1.03 !important;
font-weight: 850 !important;
letter-spacing: -0.035em !important;
text-align: center !important;
}
.wqtb-training-meta {
display: flex !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin: 0 !important;
}
.wqtb-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 44px !important;
padding: 10px 18px !important;
border: 1px solid rgba(37, 99, 235, 0.08) !important;
border-radius: 999px !important;
background: linear-gradient(180deg, #f4f7ff 0%, #eaf0ff 100%) !important;
color: #2450d7 !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08) !important;
}
.wqtb-training-date {
margin: 0 !important;
color: #64748b !important;
font-size: 15px !important;
font-weight: 600 !important;
text-align: center !important;
}
.wqtb-training-desc {
margin: 0 !important;
max-width: 720px !important;
color: #64748b !important;
font-size: 15px !important;
line-height: 1.7 !important;
text-align: center !important;
}
/* =========================================================
FORM POLISH TO MATCH HEADER
========================================================= */
.wqtb-reg-card {
border: 1px solid #e3eaf5 !important;
border-radius: 30px !important;
box-shadow:
0 18px 45px rgba(15, 23, 42, 0.05),
inset 0 1px 0 rgba(255,255,255,0.85) !important;
background:
linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
}
.wqtb-reg-submit {
margin-top: 28px !important;
}
.wqtb-reg-submit button {
min-height: 62px !important;
border-radius: 20px !important;
background: linear-gradient(135deg, #2f67ee 0%, #2551dd 100%) !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
box-shadow:
0 16px 34px rgba(37, 99, 235, 0.24),
inset 0 1px 0 rgba(255,255,255,0.12) !important;
transition:
transform .16s ease,
box-shadow .16s ease,
filter .16s ease !important;
}
.wqtb-reg-submit button:hover {
transform: translateY(-2px) !important;
box-shadow:
0 22px 40px rgba(37, 99, 235, 0.28),
inset 0 1px 0 rgba(255,255,255,0.16) !important;
filter: brightness(1.02) !important;
}
.wqtb-reg-footnote {
margin-top: 14px !important;
font-size: 14px !important;
color: #6b7b90 !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.wqtb-reg-hero {
padding: 28px 22px !important;
min-height: 0 !important;
}
.wqtb-training-header-row {
gap: 24px !important;
}
.wqtb-training-title {
font-size: 34px !important;
}
}
@media (max-width: 768px) {
.wqtb-training-header-row {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 18px !important;
}
.wqtb-training-title {
font-size: 30px !important;
}
.wqtb-training-meta {
justify-content: center !important;
}
.wqtb-reg-hero,
.wqtb-reg-card {
border-radius: 24px !important;
}
}
/* =========================
MODAL AJOUT APPRENANT
========================= */
#wqtb-add-learner-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(4px);
z-index: 999999;
}
#wqtb-add-learner-modal.is-open {
display: flex !important;
}
#wqtb-add-learner-modal .wqtb-modal-content {
width: min(680px, 92vw);
max-height: 90vh;
overflow: auto;
background: #fff;
border-radius: 24px;
padding: 24px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
border: 1px solid #dbe3ef;
}
body.wqtb-modal-open {
overflow: hidden !important;
}
#wqtb-add-learner-modal,
#wqtb-add-learner-modal * {
all: revert;
box-sizing: border-box;
font-family: Inter, Arial, sans-serif;
}
#wqtb-frontend-modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
z-index: 999999;
}
#wqtb-frontend-modal[style*="flex"] {
display: flex !important;
}
.wqtb-modal-dialog {
width: min(720px, 92vw);
max-height: 90vh;
overflow: auto;
background: #fff;
border-radius: 20px;
padding: 24px;
z-index: 2;
}
.wqtb-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 1;
}
.wqtb-modal-dialog {
animation: wqtbModalIn .25s ease;
}
@keyframes wqtbModalIn {
from {
opacity: 0;
transform: translateY(20px) scale(.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.wqtb-form-field select {
border: 1px solid #d8e2f0;
border-radius: 12px;
padding: 12px;
font-size: 14px;
width: 100%;
height: 48px;
background: #fff;
}
/* SELECT PREMIUM */
.wqtb-form-field select {
border: 1px solid #d8e2f0;
border-radius: 14px;
padding: 12px 14px;
font-size: 14px;
width: 100%;
height: 50px;
background: #fff;
appearance: none;
cursor: pointer;
transition: all 0.2s ease;
/* flèche custom */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.wqtb-form-field select:focus {
border-color: #4b6bfb;
box-shadow: 0 0 0 4px rgba(75, 107, 251, 0.1);
}
/* HEADER MODAL */
.wqtb-learner-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
/* bouton fermer à droite */
#wqtb-modal-close {
margin-left: auto;
order: 2;
}
/* bloc titre à gauche */
.wqtb-learner-modal-header > div {
order: 1;
}
.wqtb-premium-form-actions {
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid #eef2f7;
}
/* conteneur modal */
.wqtb-premium-modal {
position: relative;
}
/* bouton fermer */
#wqtb-modal-close {
position: relative;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 12px;
background: #ef4444;
color: #fff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .2s ease;
z-index: 9999;
}
#wqtb-modal-close:hover {
background: #dc2626;
transform: scale(1.05);
}
.wqtb-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.wqtb-modal-title {
font-size: 28px;
font-weight: 800;
color: #0f172a;
}
.wqtb-modal-close {
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
border: none;
border-radius: 12px;
background: #ef4444;
color: white;
font-size: 22px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.wqtb-modal-close:hover {
background: #dc2626;
transform: scale(1.05);
}
.wqtb-premium-modal {
position: relative;
}
.wqtb-modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 10px;
}
.wqtb-modal-head-copy {
flex: 1;
min-width: 0;
}
.wqtb-modal-title {
font-size: 28px;
line-height: 1.12;
font-weight: 800;
color: #0f172a;
word-break: break-word;
}
.wqtb-modal-sub {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 10px;
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
.wqtb-modal-close {
width: 44px;
height: 44px;
border: none;
border-radius: 12px;
background: #ef4444;
color: #fff;
font-size: 24px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 0 0 44px;
}
.wqtb-learner-modal-topbar {
margin-bottom: 18px;
}
.wqtb-modal-close {
margin-top: 4px;
}
.wqtb-learner-modal-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin: 22px 0 18px;
}
.wqtb-mini-kpi {
background: #f8fbff;
border: 1px solid #dbe3ef;
border-radius: 16px;
padding: 16px;
}
.wqtb-mini-kpi span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
margin-right: 6px;
}
.wqtb-mini-kpi strong {
display: block;
font-size: 22px;
line-height: 1.1;
font-weight: 800;
color: #0f172a;
}
.wqtb-modal-sub {
color: #64748b;
font-size: 14px;
}
.wqtb-modal-sub .sep {
margin: 0 8px;
color: #cbd5e1;
}
.wqtb-modal-pill.success { background: #dcfce7; color: #166534; }
.wqtb-modal-pill.danger { background: #fee2e2; color: #991b1b; }
.wqtb-modal-pill.neutral { background: #e2e8f0; color: #334155; }
.wqtb-score {
font-weight: 700;
font-size: 15px;
}
/* 🔴 Mauvais */
.wqtb-score.score-bad {
color: #dc2626;
}
/* 🟡 Moyen */
.wqtb-score.score-mid {
color: #d97706;
}
/* 🟢 Bon */
.wqtb-score.score-good {
color: #16a34a;
}
.wqtb-history li.pre { border-left: 4px solid #94a3b8; }
.wqtb-history li.post { border-left: 4px solid #3b82f6; }
/* bouton vert premium (identique ajouter apprenant) */
.wqtb-btn-success,
.wqtb-btn-view {
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #fff;
border: none;
border-radius: 12px;
padding: 10px 18px;
font-weight: 600;
transition: all 0.25s ease;
box-shadow: 0 6px 18px rgba(34, 197, 94, 0.25);
}
/* hover effet premium */
.wqtb-btn-success:hover,
.wqtb-btn-view:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(34, 197, 94, 0.35);
background: linear-gradient(135deg, #16a34a, #15803d);
}
.wqtb-btn-view {
background: transparent;
color: #16a34a;
border: 2px solid #16a34a;
}
.wqtb-btn-view:hover {
background: #16a34a;
color: #fff;
}
/* cacher le header interne du formulaire */
.wqtb-form-card .wqtb-training-card {
display: none !important;
}
.wqtb-learner-extra {
margin-top: 20px;
padding: 20px;
border-radius: 16px;
background: linear-gradient(135deg, #f8fbff, #eef4ff);
border: 1px solid #e3ebf5;
}
.wqtb-learner-extra h4 {
margin: 0 0 12px;
font-size: 15px;
font-weight: 800;
color: #13253a;
}
.wqtb-detail-row {
display: flex;
align-items: center;
gap: 10px; /* 🔥 rapproche proprement */
padding: 10px 0;
font-size: 14px;
}
.wqtb-detail-row:last-child {
border-bottom: none;
}
.wqtb-label {
font-weight: 600;
color: #5b6b7c;
min-width: 140px; /* 🔥 alignement propre */
}
.wqtb-value {
font-weight: 700;
color: #1a2b3c;
}
.wqtb-skill-badge {
display: inline-block;
margin-top: 8px;
margin-bottom: 10px;
padding: 6px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #e6f4ff, #d8ecff);
color: #1677ff;
font-weight: 700;
font-size: 12px;
}
.wqtb-reg-field label {
display: block;
margin-bottom: 6px; /* espace label → input */
font-weight: 600;
color: #2c3e50;
}
.wqtb-reg-field-full {
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid #eef2f7;
}
/* ===== WQTB checkbox group final ===== */
.wqtb-checkbox-wrap {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
border: 1px solid #e3ebf5 !important;
border-radius: 12px !important;
background: #f8fbff !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
min-height: auto !important;
width: 100% !important;
}
.wqtb-checkbox-group {
margin-top: 10px;
}
.wqtb-checkbox-wrap {
min-height: 58px;
}
.wqtb-checkbox-label {
font-size: 15px;
}
.wqtb-learner-modal-topbar {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.wqtb-cert-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff !important;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
border: none;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
transition: all 0.2s ease;
}
.wqtb-cert-pill:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
color: #fff !important;
}
.wqtb-reg-hero-logo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15px;
}
.wqtb-reg-hero-logo img {
max-width: 120px;
height: auto;
}
.wqtb-footer-card {
background: #f9fafb;
border: 1px solid #e5e7eb;
font-size: 13px;
}
.wqtb-timeline {
display: flex;
flex-direction: column;
gap: 14px;
}
.wqtb-timeline-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.wqtb-timeline-dot {
width: 10px;
height: 10px;
margin-top: 6px;
border-radius: 50%;
background: #2563eb;
flex: 0 0 10px;
}
.wqtb-timeline-content {
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px 14px;
width: 100%;
}
.wqtb-log-help {
margin-top: 4px;
font-size: 12px;
color: #64748b;
line-height: 1.4;
}
.wqtb-tab-panel[hidden] {
display: none !important;
}
.wqtb-tab-badge {
margin-left: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: rgba(255,255,255,.18);
font-size: 12px;
font-weight: 800;
}
.wqtb-tabs-nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid #e5edf7;
}
.wqtb-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
background: rgba(255,255,255,.18);
color: inherit;
}
.wqtb-tab-panel[hidden] {
display: none !important;
}
.wqtb-overview-hero {
display: grid;
grid-template-columns: 1.45fr 0.95fr;
gap: 18px;
margin-bottom: 18px;
}
.wqtb-overview-hero-main,
.wqtb-overview-side {
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 24px;
padding: 24px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.wqtb-overview-side {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.wqtb-overview-stat-card {
background: #f8fbff;
border: 1px solid #e5edf7;
border-radius: 18px;
padding: 16px 18px;
}
.wqtb-overview-stat-card span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
}
.wqtb-overview-stat-card strong {
display: block;
font-size: 24px;
line-height: 1.2;
color: #0f172a;
font-weight: 800;
}
.wqtb-quality-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #ecfeff, #eef4ff);
border: 1px solid #cfe0ff;
color: #1d4ed8;
font-size: 13px;
font-weight: 800;
}
.wqtb-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 10px;
}
@media (max-width: 1024px) {
.wqtb-overview-hero,
.wqtb-summary-grid {
grid-template-columns: 1fr;
}
}
/* =========================
WQTB V3 UX PREMIUM TABS
========================= */
.wqtb-tabs-shell {
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
border: 1px solid #dbe3ef;
border-radius: 28px;
padding: 24px;
box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.wqtb-tabs-nav {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid #e8eef7;
}
.wqtb-tab-btn {
appearance: none;
border: 1px solid #dbe3ef;
background: #16a34a;
color: #334155;
border-radius: 16px;
padding: 14px 18px;
font-size: 14px;
font-weight: 800;
line-height: 1;
cursor: pointer;
transition: all .22s ease;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: none;
}
.wqtb-tab-btn:hover {
background: #eef4ff;
color: #1d4ed8;
border-color: #bfdbfe;
transform: translateY(-1px);
}
.wqtb-tab-btn.is-active {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border-color: transparent;
box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22);
}
.wqtb-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
background: rgba(255,255,255,.18);
color: inherit;
}
.wqtb-tab-panel[hidden] {
display: none !important;
}
.wqtb-tab-panel {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity .22s ease, transform .22s ease;
}
.wqtb-tab-panel.is-active {
display: block;
opacity: 1;
transform: translateY(0);
}
.wqtb-tab-panel.is-active.is-entering {
opacity: 1;
transform: translateY(0);
}
.wqtb-overview-hero {
display: grid;
grid-template-columns: 1.45fr 0.95fr;
gap: 18px;
margin-bottom: 18px;
}
.wqtb-overview-hero-main,
.wqtb-overview-side {
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 24px;
padding: 24px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.wqtb-overview-side {
display: grid;
gap: 14px;
}
.wqtb-overview-stat-card {
background: #f8fbff;
border: 1px solid #e5edf7;
border-radius: 18px;
padding: 16px 18px;
transition: all .2s ease;
}
.wqtb-overview-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}
.wqtb-overview-stat-card span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
}
.wqtb-overview-stat-card strong {
display: block;
font-size: 24px;
line-height: 1.2;
color: #0f172a;
font-weight: 800;
}
.wqtb-quality-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #ecfeff, #eef4ff);
border: 1px solid #cfe0ff;
color: #1d4ed8;
font-size: 13px;
font-weight: 800;
}
.wqtb-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 10px;
}
.wqtb-summary-mini {
background: #ffffff;
border: 1px solid #e5edf7;
border-radius: 16px;
padding: 16px;
}
.wqtb-summary-mini span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 8px;
}
.wqtb-summary-mini strong {
font-size: 16px;
color: #0f172a;
font-weight: 800;
line-height: 1.35;
}
.wqtb-log-row-new {
opacity: 0;
transform: translateY(8px);
transition: all .25s ease;
}
.wqtb-log-row-new.is-visible {
opacity: 1;
transform: translateY(0);
}
.wqtb-log-help {
margin-top: 4px;
font-size: 12px;
line-height: 1.4;
color: #64748b;
}
@media (max-width: 1024px) {
.wqtb-overview-hero,
.wqtb-summary-grid {
grid-template-columns: 1fr;
}
}
.wqtb-tab-panel {
display: none;
opacity: 0;
transform: translateY(10px);
transition: opacity .22s ease, transform .22s ease;
}
.wqtb-tab-panel.is-active {
display: block;
opacity: 1;
transform: translateY(0);
}
.wqtb-tab-panel[hidden] {
display: none !important;
}
.wqtb-tabs-nav {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 24px 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #e5edf7;
}
.wqtb-tab-btn {
appearance: none;
border: none;
border-radius: 16px;
padding: 14px 20px;
background: linear-gradient(135deg, #16a34a, #22c55e);
color: #fff;
font-size: 15px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all .2s ease;
box-shadow: 0 8px 18px rgba(34, 197, 94, 0.20);
}
.wqtb-tab-btn:hover {
transform: translateY(-1px);
}
.wqtb-tab-btn.is-active {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}
.wqtb-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 8px;
border-radius: 999px;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 13px;
font-weight: 800;
}
.wqtb-tab-panel[hidden] {
display: none !important;
}
.wqtb-tab-panel.is-active {
display: block;
}
/* =========================
WQTB TABS SAFE OVERRIDES
========================= */
.wqtb-tabs-shell {
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 24px;
padding: 24px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.wqtb-tabs-nav {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 8px 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid #e5edf7;
}
.wqtb-tab-btn {
appearance: none;
border: none;
border-radius: 16px;
padding: 14px 20px;
background: linear-gradient(135deg, #16a34a, #22c55e);
color: #fff;
font-size: 15px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all .2s ease;
box-shadow: 0 8px 18px rgba(34, 197, 94, 0.20);
}
.wqtb-tab-btn:hover {
transform: translateY(-1px);
}
.wqtb-tab-btn.is-active {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}
.wqtb-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 8px;
border-radius: 999px;
background: rgba(255,255,255,.18);
color: #fff;
font-size: 13px;
font-weight: 800;
}
.wqtb-tab-panel[hidden] {
display: none !important;
}
.wqtb-tab-panel {
display: none;
}
.wqtb-tab-panel.is-active {
display: block;
}
.wqtb-log-row-new {
opacity: 0;
transform: translateY(8px);
transition: all .25s ease;
}
.wqtb-log-row-new.is-visible {
opacity: 1;
transform: translateY(0);
}
/* History list progressive reveal */
.wqtb-history-row.is-hidden {
display: none;
}
.wqtb-history-actions {
display: flex;
justify-content: center;
margin-top: 16px;
}
.wqtb-btn-secondary {
background: #64748b;
color: #1e293b;
border: 1px solid #dbe3ef;
padding: 10px 18px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.wqtb-btn-secondary:hover {
background: #e2e8f0;
transform: translateY(-1px);
}
.wqtb-learner-row.is-hidden {
display: none;
}
.wqtb-search-highlight {
background: #fef08a;
color: #0f172a;
padding: 0 2px;
border-radius: 4px;
font-weight: 700;
}
.wqtb-empty-search {
text-align: center;
color: #64748b;
font-style: italic;
background: #fff !important;
}
.wqtb-lang-switch {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid #e2e8f0;
width: 100%;
flex-wrap: wrap;
}
.wqtb-lang-switch button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 0 16px;
border: 1px solid #d6deeb;
background: #868686;
color: #0f172a;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.wqtb-lang-switch button:hover,
.wqtb-lang-switch button.is-active {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}
body.wqtb-lang-ar .wqtb-force-ltr,
body.wqtb-lang-ar .wqtb-force-ltr * {
direction: rtl !important;
text-align: right !important;
}
body.wqtb-lang-ar .wqtb-front-meta,
body.wqtb-lang-ar .wqtb-front-actions,
body.wqtb-lang-ar .wqtb-front-kpis,
body.wqtb-lang-ar .wqtb-front-grid-2,
body.wqtb-lang-ar .wqtb-front-toolbar,
body.wqtb-lang-ar .wqtb-front-row-actions {
direction: rtl !important;
}
body.wqtb-lang-ar table th,
body.wqtb-lang-ar table td {
text-align: right !important;
}
.wqtb-lang-flag {
font-size: 15px;
line-height: 1;
}
.wqtb-lang-label {
font-size: 12px;
letter-spacing: 0.04em;
}
@media (max-width: 900px) {
.wqtb-front-actions {
width: 100%;
}
.wqtb-lang-switch {
width: 100%;
}
.wqtb-lang-switch button {
flex: 1 1 auto;
justify-content: center;
}
}
/* MODE ARABE GLOBAL */
body.wqtb-lang-ar {
direction: rtl;
text-align: right;
}
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&family=Cairo:wght@600;700;800&display=swap');
/* Base arabe */
body.wqtb-lang-ar {
font-family: 'Tajawal', sans-serif;
}
/* Titres en Cairo */
body.wqtb-lang-ar h1,
body.wqtb-lang-ar h2,
body.wqtb-lang-ar h3,
body.wqtb-lang-ar h4,
body.wqtb-lang-ar .wqtb-arapid-title,
body.wqtb-lang-ar .wqtb-arapid-brand-top,
body.wqtb-lang-ar .wqtb-front-actions-title,
body.wqtb-lang-ar .wqtb-hero-kicker,
body.wqtb-lang-ar .wqtb-section-head h2,
body.wqtb-lang-ar .wqtb-section-head h3,
body.wqtb-lang-ar .wqtb-front-kpi span,
body.wqtb-lang-ar .wqtb-overview-stat-card span,
body.wqtb-lang-ar .wqtb-overview-stat-card strong,
body.wqtb-lang-ar .wqtb-summary-mini span,
body.wqtb-lang-ar .wqtb-summary-mini strong,
body.wqtb-lang-ar .wqtb-analytics-mini span,
body.wqtb-lang-ar .wqtb-analytics-mini strong,
body.wqtb-lang-ar .wqtb-chip {
font-family: 'Cairo', sans-serif !important;
}
/* Titres des cartes KPI entourés en rouge sur ton image */
body.wqtb-lang-ar .wqtb-front-kpi span {
font-weight: 700;
}
/* Grand titre du header */
body.wqtb-lang-ar .wqtb-arapid-title {
font-weight: 800;
letter-spacing: 0;
}
/* Titres principaux de section */
body.wqtb-lang-ar .wqtb-section-head h2,
body.wqtb-lang-ar .wqtb-section-head h3 {
font-weight: 800;
letter-spacing: 0;
}
/* FORCER RTL PARTOUT */
body.wqtb-lang-ar * {
direction: rtl;
text-align: right;
}
/* EXCEPTIONS (doivent rester LTR) */
body.wqtb-lang-ar input,
body.wqtb-lang-ar .wqtb-score,
body.wqtb-lang-ar .wqtb-token,
body.wqtb-lang-ar .wqtb-email {
direction: ltr;
text-align: left;
}
/* TABLEAUX */
body.wqtb-lang-ar table {
direction: rtl;
}
body.wqtb-lang-ar th,
body.wqtb-lang-ar td {
text-align: right;
}
/* ACTIONS (boutons alignés proprement) */
body.wqtb-lang-ar .wqtb-front-row-actions {
flex-direction: row-reverse;
}
/* MODE ARABE GLOBAL */
body.wqtb-lang-ar {
font-family: 'Cairo', sans-serif;
direction: rtl;
}
body.wqtb-lang-ar .wqtb-btn {
font-family: 'Cairo', sans-serif;
font-weight: 600;
letter-spacing: 0; /* enlève espacement latin */
}
body.wqtb-lang-ar .wqtb-tab-btn {
font-family: 'Cairo', sans-serif;
font-weight: 600;
}
body.wqtb-lang-ar table {
font-family: 'Cairo', sans-serif;
}
body.wqtb-lang-ar th,
body.wqtb-lang-ar td {
text-align: right;
}
body.wqtb-lang-ar input,
body.wqtb-lang-ar textarea {
font-family: 'Cairo', sans-serif;
direction: rtl;
}
body.wqtb-lang-ar {
font-family: 'Tajawal', sans-serif;
direction: rtl;
}
body.wqtb-lang-ar table {
font-family: 'Tajawal', sans-serif;
}
body.wqtb-lang-ar th,
body.wqtb-lang-ar td {
text-align: right;
}
body.wqtb-lang-ar {
font-family: 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
}
body.wqtb-lang-ar .wqtb-btn {
padding: 10px 18px;
font-size: 15px;
border-radius: 10px;
}
body.wqtb-lang-ar .wqtb-arapid-title,
body.wqtb-lang-ar .wqtb-front-kpi span,
body.wqtb-lang-ar .wqtb-section-head h2,
body.wqtb-lang-ar .wqtb-section-head h3 {
font-family: 'Cairo', sans-serif !important;
font-weight: 800;
}
body.wqtb-lang-ar {
font-family: 'CairoLocal', Arial, sans-serif !important;
}
body.wqtb-lang-ar h1,
body.wqtb-lang-ar h2,
body.wqtb-lang-ar h3,
body.wqtb-lang-ar h4,
body.wqtb-lang-ar .wqtb-arapid-title,
body.wqtb-lang-ar .wqtb-arapid-brand-top,
body.wqtb-lang-ar .wqtb-front-actions-title,
body.wqtb-lang-ar .wqtb-front-kpi span,
body.wqtb-lang-ar .wqtb-section-head h2,
body.wqtb-lang-ar .wqtb-section-head h3,
body.wqtb-lang-ar .wqtb-chip,
body.wqtb-lang-ar .wqtb-tab-btn,
body.wqtb-lang-ar .wqtb-btn {
font-family: 'CairoLocal', Arial, sans-serif !important;
}
body.wqtb-lang-ar {
font-family: Arial, sans-serif;
}
body.wqtb-lang-ar h1,
body.wqtb-lang-ar h2,
body.wqtb-lang-ar h3,
body.wqtb-lang-ar h4,
body.wqtb-lang-ar .wqtb-arapid-title,
body.wqtb-lang-ar .wqtb-front-kpi span,
body.wqtb-lang-ar .wqtb-section-head h2,
body.wqtb-lang-ar .wqtb-section-head h3 {
font-family: 'CairoLocal', Arial, sans-serif !important;
}
/* 🔤 Charger Tajawal depuis ton dossier fonts */
@font-face {
font-family: 'Tajawal';
src: url('../../fonts/Tajawal-Regular.ttf') format('truetype'); /* ou Tajawal si tu l'ajoutes */
font-weight: normal;
}
@font-face {
font-family: 'Tajawal';
src: url('../../fonts/Tajawal-Bold.ttf') format('truetype');
font-weight: bold;
}
/* 🎯 Appliquer UNIQUEMENT en mode AR */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] .wqtb-container,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] th,
html[lang="ar"] td,
html[lang="ar"] button,
html[lang="ar"] span {
font-family: 'Tajawal', 'Cairo', sans-serif !important;
}
body.wqtb-lang-ar .wqtb-modal,
body.wqtb-lang-ar .wqtb-modal-dialog,
body.wqtb-lang-ar .wqtb-modal-body,
body.wqtb-lang-ar .wqtb-premium-modal,
body.wqtb-lang-ar .wqtb-modal-header,
body.wqtb-lang-ar .wqtb-learner-modal-header,
body.wqtb-lang-ar .wqtb-premium-form,
body.wqtb-lang-ar .wqtb-form-grid,
body.wqtb-lang-ar .wqtb-form-field,
body.wqtb-lang-ar .wqtb-learner-history,
body.wqtb-lang-ar .wqtb-learner-extra {
direction: rtl;
text-align: right;
font-family: 'CairoLocal', Arial, sans-serif !important;
}
body.wqtb-lang-ar .wqtb-premium-form-actions {
flex-direction: row-reverse;
justify-content: flex-start;
}
body.wqtb-lang-ar .wqtb-form-field label {
text-align: right;
}
body.wqtb-lang-ar .wqtb-form-field input,
body.wqtb-lang-ar .wqtb-form-field select,
body.wqtb-lang-ar .wqtb-form-field textarea {
direction: rtl;
text-align: right;
font-family: 'CairoLocal', Arial, sans-serif !important;
}
body.wqtb-lang-ar .wqtb-modal-close {
left: 18px;
right: auto;
}
body.wqtb-lang-ar .wqtb-modal-sub,
body.wqtb-lang-ar .wqtb-detail-row,
body.wqtb-lang-ar .wqtb-mini-kpi,
body.wqtb-lang-ar .wqtb-learner-history li {
text-align: right;
}
body.wqtb-lang-ar .wqtb-learner-history li {
direction: rtl;
}
/* Bouton close RTL */
body.wqtb-lang-ar .wqtb-modal-close {
left: 20px !important;
right: auto !important;
}
/* Actions popup RTL */
body.wqtb-lang-ar .wqtb-premium-form-actions {
flex-direction: row-reverse;
}
.wqtb-btn-success {
color: #fff !important;
font-weight: 600;
}
body.wqtb-lang-ar .wqtb-btn-success {
font-family: 'CairoLocal', 'Tajawal', sans-serif !important;
letter-spacing: 0;
}
body.wqtb-lang-ar .wqtb-modal-dialog {
position: relative;
}
body.wqtb-lang-ar .wqtb-modal-close {
position: absolute;
left: 18px !important;
right: auto !important;
}
body.wqtb-lang-ar .wqtb-premium-form-actions {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
gap: 14px;
}
body.wqtb-lang-ar #wqtb-cancel-add-learner,
body.wqtb-lang-ar .wqtb-btn-success {
font-family: 'CairoLocal', Arial, sans-serif !important;
}
/* popup RTL */
body.wqtb-lang-ar .wqtb-modal-dialog {
position: relative;
}
body.wqtb-lang-ar .wqtb-premium-modal,
body.wqtb-lang-ar .wqtb-learner-modal-header,
body.wqtb-lang-ar .wqtb-premium-form,
body.wqtb-lang-ar .wqtb-form-grid,
body.wqtb-lang-ar .wqtb-form-field {
direction: rtl;
text-align: right;
}
body.wqtb-lang-ar .wqtb-form-field label {
text-align: right;
font-family: 'CairoLocal', Arial, sans-serif !important;
}
body.wqtb-lang-ar .wqtb-form-field input,
body.wqtb-lang-ar .wqtb-form-field select {
direction: rtl;
text-align: right;
font-family: 'CairoLocal', Arial, sans-serif !important;
}
/* bouton X à gauche */
body.wqtb-lang-ar .wqtb-modal-dialog .wqtb-modal-close {
position: absolute !important;
left: 18px !important;
right: auto !important;
top: 18px !important;
z-index: 9999;
}
/* actions popup */
body.wqtb-lang-ar .wqtb-premium-form-actions {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
gap: 14px;
}
/* bouton annuler visible */
body.wqtb-lang-ar .wqtb-btn-cancel {
min-width: 120px;
color: #334155 !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
font-family: 'CairoLocal', Arial, sans-serif !important;
font-weight: 700;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
/* bouton ajouter visible */
body.wqtb-lang-ar .wqtb-btn-success {
min-width: 180px;
color: #ffffff !important;
font-family: 'CairoLocal', Arial, sans-serif !important;
font-weight: 700;
letter-spacing: 0;
text-align: center;
white-space: nowrap;
}
/* Fix visibilité placeholder select en arabe */
body.wqtb-lang-ar select {
padding-right: 18px !important;
padding-left: 10px;
text-align: right;
direction: rtl;
}
/* Amélioration visuelle du texte داخل select */
body.wqtb-lang-ar select option {
text-align: right;
}
/* Option premium : augmenter hauteur champ */
body.wqtb-lang-ar .wqtb-form-field select {
height: 48px;
line-height: 10px;
}
/* ===== WQTB registration language switcher ===== */
.wqtb-reg-lang-switch {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.wqtb-reg-lang-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 94px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid #dbe3ef;
background: #ffffff;
color: #334155;
text-decoration: none;
font-weight: 700;
font-size: 14px;
transition: all 0.2s ease;
}
.wqtb-reg-lang-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.wqtb-reg-lang-btn.is-active {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: #ffffff;
border-color: #2563eb;
}
.wqtb-reg-card.is-rtl,
.wqtb-reg-card.is-rtl .wqtb-reg-field,
.wqtb-reg-card.is-rtl .wqtb-reg-field label,
.wqtb-reg-card.is-rtl .wqtb-reg-footnote,
.wqtb-reg-card.is-rtl .wqtb-alert {
direction: rtl;
text-align: right;
font-family: 'CairoLocal', 'Cairo', 'Tajawal', Arial, sans-serif;
}
.wqtb-reg-card.is-rtl .wqtb-reg-field input:not([type="checkbox"]),
.wqtb-reg-card.is-rtl .wqtb-reg-field select,
.wqtb-reg-card.is-rtl .wqtb-reg-field textarea {
direction: rtl;
text-align: right;
}
.wqtb-reg-card.is-rtl .wqtb-reg-field select {
padding-right: 16px;
padding-left: 42px;
background-position:
18px calc(50% - 3px),
24px calc(50% - 3px);
}
@media (max-width: 768px) {
.wqtb-reg-lang-switch {
justify-content: center;
}
.wqtb-reg-lang-btn {
min-width: 88px;
}
}
/* Language switcher */
.wqtb-lang-switcher {
display: flex;
justify-content: center; /* <-- centre horizontal */
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
/* boutons */
.wqtb-lang-switcher button {
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #ddd;
background: #f5f5f5;
cursor: pointer;
transition: all 0.2s ease;
}
.wqtb-lang-switcher button.active {
background: #2f6fed;
color: #fff;
border-color: #2f6fed;
}
.wqtb-reg-shell {
display: flex;
flex-direction: column;
align-items: center;
}
/* Barre des langues */
.wqtb-lang-switcher-wrap {
width: 100%;
display: flex;
justify-content: center;
margin: 0 0 24px 0;
}
.wqtb-lang-switcher {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* Boutons */
.wqtb-lang-switcher button,
.wqtb-lang-switcher a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid #d9dfef;
background: #ffffff;
color: #1c2b4a;
font-weight: 700;
text-decoration: none;
transition: all .2s ease;
}
.wqtb-lang-switcher button.active,
.wqtb-lang-switcher a.active {
background: linear-gradient(135deg, #2f6fed, #2957d8);
color: #fff;
border-color: #2f6fed;
}
.wqtb-reg-shell {
width: min(1120px, 92vw);
margin: 0 auto;
display: block;
}
.wqtb-lang-switcher-wrap {
width: 100%;
display: flex;
justify-content: center;
margin: 0 0 24px 0;
}
.wqtb-lang-switcher {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.wqtb-lang-switcher button.is-active {
background: linear-gradient(135deg, #2f6fed, #2957d8);
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(47, 111, 237, 0.25);
}
.wqtb-lang-switcher button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.wqtb-training-responsibles {
margin-top: 10px;
font-size: 14px;
color: #475569;
}
.wqtb-toast {
position: fixed;
top: 20px;
right: 20px;
background: #22c55e;
color: #fff;
padding: 12px 18px;
border-radius: 10px;
font-size: 14px;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 9999;
}
.wqtb-toast.show {
opacity: 1;
transform: translateY(0);
}
.wqtb-premium-form-actions .wqtb-btn-cancel {
min-width: 140px;
color: #1f2937 !important;
background: #ffffff !important;
border: 1px solid #dbe3f0 !important;
opacity: 1 !important;
visibility: visible !important;
}
.wqtb-premium-form-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.wqtb-btn-cancel {
display: flex;
align-items: center;
justify-content: center; /* 👈 centre le texte */
text-align: center;
padding: 10px 18px;
font-weight: 600;
}
/* ===== BASE BUTTON ===== */
.wqtb-btn {
transition: all 0.25s ease;
transform: translateY(0);
}
/* ===== HOVER EFFECT ===== */
.wqtb-btn:hover {
transform: translateY(-2px); /* petit lift */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
/* ===== ACTIVE CLICK ===== */
.wqtb-btn:active {
transform: translateY(0);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
/* ===== GREEN BUTTON (AJOUTER) ===== */
.wqtb-btn-success {
background: linear-gradient(135deg, #22c55e, #16a34a);
border: none;
color: #fff;
}
.wqtb-btn-success:hover {
background: linear-gradient(135deg, #16a34a, #15803d);
}
/* ===== CANCEL BUTTON ===== */
.wqtb-btn-cancel {
background: #fff;
border: 1px solid #dbe3f0;
color: #374151;
}
.wqtb-btn-cancel:hover {
background: #f9fafb;
border-color: #cbd5e1;
}
/* ===== DISABLED STATE ===== */
.wqtb-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* ===== OVERLAY ===== */
.wqtb-modal-overlay {
opacity: 0;
transition: opacity 0.25s ease;
}
.wqtb-modal-overlay.active {
opacity: 1;
}
/* ===== MODAL ===== */
.wqtb-premium-modal {
transform: scale(0.95);
opacity: 0;
transition: all 0.25s ease;
}
.wqtb-premium-modal.active {
transform: scale(1);
opacity: 1;
}
.wqtb-modal-overlay.active {
backdrop-filter: blur(6px);
background: rgba(0,0,0,0.25);
}
@font-face {
font-family: 'TajawalLocal';
src: url('../../fonts/Tajawal-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'TajawalLocal';
src: url('../../fonts/Tajawal-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
body.wqtb-lang-ar,
body.wqtb-lang-ar * {
font-family: 'TajawalLocal', 'CairoLocal', Arial, sans-serif !important;
}
.wqtb-dual-time {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 14px;
opacity: 0.9;
}
.wqtb-time-line strong {
font-weight: 600;
}
.wqtb-reg-form {
overflow-x: hidden;
}
/* Badges qualité / diagnostic - analytics */
.wqtb-quality-text,
.wqtb-diagnostic-text {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
padding: 8px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
text-align: center;
font-family: 'CairoLocal', system-ui, sans-serif;
}
.wqtb-quality-text {
color: #0f4fd8;
background: #eef6ff;
border: 1px solid #bfdbfe;
}
.wqtb-diagnostic-text {
color: #b45309;
background: #fff7ed;
border: 1px solid #fed7aa;
}
/* Alignement propre dans les cartes RTL */
.wqtb-lang-ar .wqtb-quality-text,
.wqtb-lang-ar .wqtb-diagnostic-text {
direction: rtl;
font-family: 'CairoLocal', system-ui, sans-serif;
font-weight: 800;
}
/* Carte diagnostic gauche */
.wqtb-front-kpi .wqtb-diagnostic-text,
.wqtb-mini-kpi .wqtb-diagnostic-text {
margin-top: 8px;
}
/* Bloc principal à droite */
.wqtb-front-hero .wqtb-quality-text,
.wqtb-analysis-hero .wqtb-quality-text {
margin-top: 14px;
}
.wqtb-front-kpi[data-type="diagnostic"] span {
font-size: 24px;
font-weight: 700;
text-align: center;
}
/* 🎯 Diagnostic KPI (bloc gauche uniquement) */
.wqtb-overview-stat-card .wqtb-diagnostic-text {
display: block !important;
width: 100% !important;
font-family: 'CairoLocal', system-ui, sans-serif !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #0f172a !important;
font-size: 24px !important;
font-weight: 900 !important;
line-height: 1.3 !important;
padding: 4px 0 !important;
}
/* Badge diagnostic intelligent - bloc gauche uniquement */
.wqtb-overview-stat-card .wqtb-diagnostic-text {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 46px !important;
padding: 8px 14px !important;
border-radius: 18px !important;
font-size: 22px !important;
font-weight: 900 !important;
line-height: 1.25 !important;
text-align: center !important;
font-family: 'CairoLocal', system-ui, sans-serif;
color: #92400e !important;
background: #fff7ed !important;
border: 1px solid #fed7aa !important;
}
/* Si diagnostic positif */
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="RAS"],
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="Progression forte"] {
color: #166534 !important;
background: #f0fdf4 !important;
border-color: #bbf7d0 !important;
}
/* Si alerte pédagogique */
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="Alerte pédagogique"],
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="تنبيه تربوي"],
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="تنبيه تعليمي"] {
color: #92400e !important;
background: #fff7ed !important;
border-color: #fed7aa !important;
}
/* Si diagnostic faible / critique */
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="Progression faible"],
.wqtb-overview-stat-card .wqtb-diagnostic-text[data-i18n-key="Faible progression"] {
color: #991b1b !important;
background: #fef2f2 !important;
border-color: #fecaca !important;
}
.wqtb-lang-ar .wqtb-overview-stat-card .wqtb-diagnostic-text {
direction: rtl;
font-size: 20px !important;
}
.wqtb-overview-stat-card .wqtb-diagnostic-text {
font-family: 'CairoLocal', sans-serif !important;
font-weight: 700 !important;
}
.wqtb-view-qsm-link {
display: inline-flex;
align-items: center;
margin-left: 10px;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #2563eb;
background: #eff6ff;
border: 1px solid #bfdbfe;
text-decoration: none;
}
.wqtb-view-qsm-link:hover {
background: #dbeafe;
text-decoration: none;
}
.wqtb-lang-ar .wqtb-view-qsm-link {
margin-left: 0;
margin-right: 10px;
}
.wqtb-view-qsm-link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline-start: 10px;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #2563eb;
background: #eff6ff;
border: 1px solid #bfdbfe;
text-decoration: none;
}
.wqtb-qsm-answer.ok { color: #16a34a; }
.wqtb-qsm-answer.bad { color: #dc2626; }
.wqtb-qsm-question {
padding: 12px;
border-bottom: 1px solid #eee;
}
.wqtb-qsm-answers-box {
margin-top: 14px;
padding: 14px;
border-radius: 18px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.wqtb-qsm-answer-card {
padding: 14px;
margin-bottom: 12px;
border-radius: 14px;
background: #fff;
border: 1px solid #e5e7eb;
}
.wqtb-qsm-answer-card.is-correct {
border-color: #bbf7d0;
background: #f0fdf4;
}
.wqtb-qsm-answer-card.is-wrong {
border-color: #fecaca;
background: #fef2f2;
}
.wqtb-qsm-question-title {
font-weight: 800;
margin-bottom: 10px;
}
.wqtb-qsm-user-answer,
.wqtb-qsm-correct-answer {
margin-top: 6px;
}
.wqtb-learner-history li.wqtb-history-item {
display: grid !important;
grid-template-columns: 90px 100px 180px 140px;
gap: 14px;
align-items: start;
}
.wqtb-learner-history li.wqtb-history-item .wqtb-qsm-answers-box {
grid-column: 1 / -1;
width: 100%;
margin-top: 14px;
}
.wqtb-qsm-answer-card {
width: 100%;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere;
}
.wqtb-qsm-question-title {
display: block;
white-space: normal !important;
line-height: 1.5;
}
.wqtb-view-qsm-link .arrow {
display: inline-block;
margin-left: 6px;
transition: transform 0.2s ease;
}
.wqtb-view-qsm-link.open .arrow {
transform: rotate(360deg);
}
.wqtb-qsm-compare-actions {
margin-top: 16px;
}
.wqtb-compare-qsm-btn {
border: 1px solid #bfdbfe;
background: #eff6ff;
color: #2563eb;
border-radius: 999px;
padding: 10px 18px;
font-weight: 800;
cursor: pointer;
}
.wqtb-qsm-compare-box {
margin-top: 16px;
padding: 18px;
border-radius: 20px;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.wqtb-qsm-compare-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 14px 0;
}
.wqtb-compare-badges {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
word-break: break-word;
}
.wqtb-qsm-compare-summary div {
padding: 12px;
border-radius: 14px;
background: #fff;
border: 1px solid #e5e7eb;
font-weight: 700;
}
.wqtb-compare-badges > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
.wqtb-compare-badges > div span {
display: block;
font-size: 13px;
line-height: 1.2;
}
.wqtb-qsm-compare-item {
padding: 14px;
margin-top: 12px;
border-radius: 16px;
border: 1px solid #e5e7eb;
background: #fff;
}
.wqtb-qsm-compare-title {
font-weight: 900;
margin-bottom: 8px;
}
.wqtb-qsm-compare-flow {
display: flex;
gap: 10px;
font-weight: 800;
margin-bottom: 6px;
}
.wqtb-qsm-compare-item.status-corrected {
background: #f0fdf4;
border-color: #bbf7d0;
}
.wqtb-qsm-compare-item.status-blocked {
background: #fff7ed;
border-color: #fed7aa;
}
.wqtb-qsm-compare-item.status-stable {
background: #ecfdf5;
border-color: #86efac;
}
.wqtb-qsm-compare-item.status-regression {
background: #fef2f2;
border-color: #fecaca;
}
.wqtb-accordion-arrow {
display: inline-block;
margin-left: 6px;
transition: transform 0.2s ease;
}
.wqtb-compare-qsm-btn.open .wqtb-accordion-arrow {
transform: rotate(180deg);
}
.wqtb-compare-qsm-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
html[dir="rtl"] .wqtb-summary-mini {
font-family: "Cairo", sans-serif;
}
html[dir="rtl"] .wqtb-summary-mini span[data-i18n],
html[dir="rtl"] .wqtb-summary-mini strong {
font-family: "Cairo", sans-serif;
font-weight: 600;
letter-spacing: 0.2px;
}
html[dir="rtl"] .wqtb-quality-text {
font-weight: 700;
}
html[dir="rtl"] .wqtb-diagnostic-text {
font-weight: 600;
}
.wqtb-qsm-answers-box {
direction: ltr !important;
text-align: left !important;
}
.wqtb-qsm-answer-card,
.wqtb-qsm-question-title,
.wqtb-qsm-user-answer,
.wqtb-qsm-correct-answer {
direction: ltr !important;
text-align: left !important;
unicode-bidi: plaintext;
}
.wqtb-qsm-compare-box,
.wqtb-qsm-compare-item,
.wqtb-qsm-compare-title,
.wqtb-qsm-compare-flow,
.wqtb-qsm-compare-label {
direction: ltr !important;
text-align: left !important;
unicode-bidi: plaintext;
}
.wqtb-qsm-compare-flow {
display: flex;
justify-content: flex-start;
gap: 12px;
align-items: center;
}
@media (max-width: 768px) {
.wqtb-compare-badges {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
width: 100% !important;
}
.wqtb-compare-badges > div {
width: 100% !important;
min-width: 0 !important;
padding: 10px !important;
border-radius: 14px !important;
}
}
.wqtb-analytics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(680px, 1fr));
gap: 20px;
margin-top: 20px;
}
.wqtb-analytics-card {
background: #fff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.wqtb-analytics-card h3 {
margin-bottom: 15px;
font-size: 16px;
font-weight: 600;
}
.wqtb-analytics-card {
min-height: 380px;
}
.wqtb-analytics-card canvas {
display: block;
width: 100% !important;
height: 300px !important;
max-height: 300px !important;
}
.wqtb-analytics-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.wqtb-chart-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 22px;
padding: 22px;
box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}
.wqtb-chart-card h3 {
margin: 0 0 14px;
font-size: 17px;
font-weight: 800;
color: #0f172a;
}
.wqtb-chart-box {
position: relative;
height: 320px;
max-height: 320px;
overflow: hidden;
}
.wqtb-chart-box canvas {
width: 100% !important;
height: 320px !important;
}
@media (max-width: 900px) {
.wqtb-analytics-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
* WQTB Analytics diagnostic premium UI
* ========================================================= */
#wqtbDiagnosticBox { min-height: 260px; }
.wqtb-diag-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.wqtb-diag-kpis span { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 16px; background: #f8fafc; border: 1px solid #e5e7eb; color: #64748b; font-size: 12px; font-weight: 700; }
.wqtb-diag-kpis strong { color: #0f172a; font-size: 20px; font-weight: 900; }
.wqtb-diag-wrapper { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.wqtb-lang-ar #wqtbDiagnosticBox, .wqtb-lang-ar .wqtb-diag-item, .wqtb-lang-ar .wqtb-diag-kpis span { direction: rtl; text-align: right; }
.wqtb-lang-ar .wqtb-diag-item { padding: 14px 44px 14px 16px; }
.wqtb-lang-ar .wqtb-diag-item::before { left: auto; right: 14px; }
@media (max-width: 700px) { .wqtb-diag-kpis { grid-template-columns: 1fr; } }
.wqtb-front-grid-2 {
display: grid;
grid-template-columns: 1.2fr 1fr; /* gauche plus large */
gap: 20px;
}
.wqtb-analytics-left {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 900px) {
.wqtb-front-grid-2 {
grid-template-columns: 1fr;
}
}
.wqtb-front-grid-2 {
align-items: start !important;
}
.wqtb-analytics-left {
align-self: start !important;
}
.wqtb-chart-box {
height: 320px !important;
max-height: 320px !important;
}
.wqtb-chart-box canvas {
height: 320px !important;
max-height: 320px !important;
}
.wqtb-diagnostic-card {
align-self: start !important;
min-height: 520px;
}
.wqtb-chart-box {
position: relative;
height: 320px; /* 🔥 FIX PRINCIPAL */
max-height: 320px;
}
.wqtb-chart-box canvas {
width: 100% !important;
height: 320px !important;
}
.wqtb-chart-box {
position: relative;
height: 300px !important;
max-height: 300px !important;
overflow: hidden;
}
.wqtb-chart-box canvas {
width: 100% !important;
height: 300px !important;
max-height: 300px !important;
}
.wqtb-analytics-right {
display: flex;
flex-direction: column;
gap: 20px;
}
#wqtbDiagnosticBox {
margin-top: 10px;
}
.wqtb-analytics-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 22px;
align-items: start;
}
.wqtb-analytics-left,
.wqtb-analytics-right {
display: flex;
flex-direction: column;
gap: 22px;
min-width: 0;
}
.wqtb-analytics-left .wqtb-front-card,
.wqtb-analytics-right .wqtb-front-card {
width: 100%;
max-width: none !important;
min-height: auto !important;
}
.wqtb-chart-box {
position: relative;
width: 100%;
height: 320px !important;
max-height: 320px !important;
overflow: hidden;
}
.wqtb-chart-box canvas {
width: 100% !important;
height: 320px !important;
max-height: 320px !important;
}
@media (max-width: 900px) {
.wqtb-analytics-layout {
grid-template-columns: 1fr;
}
}
/* 🔥 FORCE LES CARTES À PRENDRE TOUTE LA LARGEUR */
.wqtb-analytics-left .wqtb-front-card {
width: 100% !important;
max-width: none !important;
}
/* 🔥 colonne gauche = pleine largeur */
.wqtb-analytics-left {
width: 100%;
}
/* 🔥 empilement vertical propre */
.wqtb-analytics-left {
display: flex;
flex-direction: column;
gap: 22px;
}
/* 🔥 graphes prennent toute la largeur */
.wqtb-chart-box {
width: 100%;
height: 320px !important;
}
.wqtb-chart-box canvas {
width: 100% !important;
height: 320px !important;
}
/* ===== FIX ANALYTICS LAYOUT ===== */
.wqtb-analytics-layout {
width: 100% !important;
max-width: none !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 360px !important;
gap: 22px !important;
align-items: start !important;
}
.wqtb-analytics-left {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
}
.wqtb-analytics-right {
width: 360px !important;
max-width: 360px !important;
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
}
.wqtb-analytics-left .wqtb-front-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
.wqtb-chart-box {
width: 100% !important;
height: 320px !important;
max-height: 320px !important;
overflow: hidden !important;
position: relative !important;
}
.wqtb-chart-box canvas {
width: 100% !important;
height: 320px !important;
max-height: 320px !important;
}
@media (max-width: 900px) {
.wqtb-analytics-layout {
grid-template-columns: 1fr !important;
}
.wqtb-analytics-right {
width: 100% !important;
max-width: none !important;
float: right;
}
}
/* =========================================================
WQTB ANALYTICS CARDS LAYOUT - FINAL CLEAN OVERRIDE
Top cards en 2 colonnes ; graphes verticaux a gauche ; diagnostic a droite.
========================================================= */
#wqtb-tab-analytics .wqtb-front-advanced {
overflow: visible !important;
}
#wqtb-tab-analytics .wqtb-front-grid-2 {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
margin-top: 18px !important;
}
#wqtb-tab-analytics .wqtb-analytics-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 360px !important;
gap: 22px !important;
align-items: start !important;
width: 100% !important;
max-width: none !important;
margin-top: 22px !important;
}
#wqtb-tab-analytics .wqtb-analytics-left,
#wqtb-tab-analytics .wqtb-analytics-right {
display: flex !important;
flex-direction: column !important;
gap: 22px !important;
min-width: 0 !important;
width: 100% !important;
max-width: none !important;
}
#wqtb-tab-analytics .wqtb-analytics-right {
width: 360px !important;
max-width: 360px !important;
}
#wqtb-tab-analytics .wqtb-front-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: auto !important;
margin-top: 0 !important;
}
#wqtb-tab-analytics .wqtb-chart-box {
position: relative !important;
width: 100% !important;
height: 320px !important;
max-height: 320px !important;
overflow: hidden !important;
}
#wqtb-tab-analytics .wqtb-chart-box canvas {
display: block !important;
width: 100% !important;
height: 320px !important;
max-height: 320px !important;
}
#wqtb-tab-analytics .wqtb-diagnostic-card {
min-height: 320px !important;
}
#wqtb-tab-analytics #wqtbDiagnosticBox {
min-height: 0 !important;
}
.wqtb-analysis-card table,
.wqtb-analysis-card .wqtb-table-wrap,
.wqtb-analysis-card .wqtb-table,
.wqtb-analysis-card .wqtb-table-container,
#wqtb-tab-analytics .wqtb-front-card table,
#wqtb-tab-analytics .wqtb-front-card .wqtb-table-wrap,
#wqtb-tab-analytics .wqtb-front-card .wqtb-table,
#wqtb-tab-analytics .wqtb-front-card .wqtb-table-container {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.wqtb-analysis-card .wqtb-table-wrap,
.wqtb-analysis-card .wqtb-table-container,
#wqtb-tab-analytics .wqtb-front-card .wqtb-table-wrap,
#wqtb-tab-analytics .wqtb-front-card .wqtb-table-container {
display: block !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.wqtb-analysis-card table,
#wqtb-tab-analytics .wqtb-front-card table {
display: table !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
table-layout: fixed !important;
border-collapse: separate !important;
border-radius: 16px;
overflow: hidden;
}
.wqtb-analysis-card th,
.wqtb-analysis-card td,
#wqtb-tab-analytics .wqtb-front-card th,
#wqtb-tab-analytics .wqtb-front-card td {
width: auto !important;
text-align: left;
}
.wqtb-analysis-card table col,
#wqtb-tab-analytics .wqtb-front-card table col {
width: 50%;
}
[dir="rtl"] .wqtb-analysis-card table,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card table {
direction: rtl;
}
[dir="rtl"] .wqtb-analysis-card th,
[dir="rtl"] .wqtb-analysis-card td,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card th,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card td {
text-align: right !important;
}
[dir="rtl"] .wqtb-analysis-card thead tr th:first-child,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card thead tr th:first-child {
border-top-right-radius: 16px !important;
border-top-left-radius: 0 !important;
}
[dir="rtl"] .wqtb-analysis-card thead tr th:last-child,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card thead tr th:last-child {
border-top-left-radius: 16px !important;
border-top-right-radius: 0 !important;
}
[dir="rtl"] .wqtb-analysis-card tbody tr:last-child td:first-child,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card tbody tr:last-child td:first-child {
border-bottom-right-radius: 16px !important;
border-bottom-left-radius: 0 !important;
}
[dir="rtl"] .wqtb-analysis-card tbody tr:last-child td:last-child,
[dir="rtl"] #wqtb-tab-analytics .wqtb-front-card tbody tr:last-child td:last-child {
border-bottom-left-radius: 16px !important;
border-bottom-right-radius: 0 !important;
}
.wqtb-pedagogical-report-action {
display: flex;
justify-content: center;
margin-top: 18px;
padding: 16px;
border: 1px solid #dbe4f0;
border-radius: 8px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.wqtb-pedagogical-report-btn {
min-width: 210px;
justify-content: center;
}
body.wqtb-lang-ar .wqtb-pedagogical-report-action {
direction: rtl;
}
@media (max-width: 1100px) {
#wqtb-tab-analytics .wqtb-analytics-layout {
grid-template-columns: 1fr !important;
}
#wqtb-tab-analytics .wqtb-analytics-right {
width: 100% !important;
max-width: none !important;
}
}
@media (max-width: 900px) {
#wqtb-tab-analytics .wqtb-front-grid-2 {
grid-template-columns: 1fr !important;
}
}
.wqtb-diag-block {
display: flex;
flex-direction: column;
gap: 14px;
}
.wqtb-diag-main {
font-weight: 600;
color: #0f172a;
}
.wqtb-diag-stats {
display: flex;
flex-direction: column;
gap: 8px;
}
.wqtb-diag-item {
display: flex;
align-items: center;
gap: 10px;
background: #f8fafc;
padding: 12px 14px 12px 16px; /* 🔥 espace gauche augmenté */
border-radius: 10px;
font-size: 14px;
overflow: visible; /* 🔥 très important */
}
.wqtb-diag-item::before {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #e0f2fe;
color: #2563eb;
font-size: 12px;
font-weight: bold;
flex-shrink: 0;
}
.wqtb-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #e0f2fe;
color: #2563eb;
font-size: 12px;
font-weight: bold;
}
.wqtb-diag-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
font-size: 14px;
}
.wqtb-icon {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
/* 🟢 GOOD */
.wqtb-diag-label {
min-width: 0;
color: inherit;
font-weight: inherit;
}
.wqtb-diag-value {
color: inherit;
}
.wqtb-diag-item.good {
background: #ecfdf5;
}
.wqtb-diag-item.good .wqtb-icon {
background: #bbf7d0;
color: #16a34a;
}
/* 🟡 MEDIUM */
.wqtb-diag-item.medium {
background: #fffbeb;
}
.wqtb-diag-item.medium .wqtb-icon {
background: #fde68a;
color: #d97706;
}
/* 🔴 BAD */
.wqtb-diag-item.bad {
background: #fef2f2;
}
.wqtb-diag-item.bad .wqtb-icon {
background: #fecaca;
color: #dc2626;
}
/* GOOD */
.wqtb-diag-item.good {
background: #ecfdf5;
}
/* MEDIUM */
.wqtb-diag-item.medium {
background: #fff7ed;
}
/* BAD */
.wqtb-diag-item.bad {
background: #fef2f2;
}
.wqtb-score-bar {
height: 6px;
background: #e5e7eb;
border-radius: 6px;
overflow: hidden;
margin-top: 6px;
}
.wqtb-score-bar div {
height: 100%;
background: #16a34a;
}
/* BASE */
.wqtb-score-bar {
height: 6px;
border-radius: 6px;
overflow: hidden;
margin-top: 6px;
background: #e5e7eb;
}
/* BARRE INTERNE */
.wqtb-score-bar div {
height: 100%;
transition: width 0.4s ease;
}
/* 🟢 EXCELLENT */
.wqtb-score-bar.good div {
background: #16a34a;
}
/* 🟡 MOYEN */
.wqtb-score-bar.medium div {
background: #f59e0b;
}
/* 🔴 FAIBLE */
.wqtb-score-bar.bad div {
background: #dc2626;
}
.wqtb-score-value {
font-size: 18px;
font-weight: 700;
}
.wqtb-score-label {
font-size: 13px;
opacity: 0.8;
}
/* =========================================================
WQTB analyse des questions
========================================================= */
.wqtb-pedagogy {
border-radius:16px;
padding:20px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}
.wqtb-critical {
background:#ffe5e5;
padding:12px;
border-left:4px solid #e53935;
margin-bottom:12px;
}
.wqtb-warning {
background:#fff3cd;
padding:10px;
border-left:4px solid #ff9800;
}
.wqtb-reco {
margin-top:15px;
padding:10px;
background:#e8f5e9;
border-left:4px solid #4caf50;
}
.wqtb-pedagogy-card {
margin-top:16px;
}
.wqtb-pedagogy-card .wqtb-critical {
background:#ffe5e5;
padding:10px;
border-left:4px solid #e53935;
border-radius:8px;
margin-bottom:10px;
}
.wqtb-pedagogy-card .wqtb-warning {
background:#fff3cd;
padding:10px;
border-left:4px solid #ff9800;
border-radius:8px;
}
.wqtb-pedagogy-card .wqtb-reco {
margin-top:10px;
padding:10px;
background:#e8f5e9;
border-left:4px solid #4caf50;
border-radius:8px;
}
.wqtb-module-analysis {
margin-top: 14px;
}
.wqtb-module-analysis h4 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 800;
}
.wqtb-module-result {
padding: 12px;
border-radius: 14px;
margin-bottom: 10px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: #ffffff;
}
.wqtb-module-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: flex-start;
margin-bottom: 8px;
}
.wqtb-module-head strong {
font-size: 14px;
color: #0f172a;
}
.wqtb-module-head span {
font-size: 11px;
font-weight: 800;
padding: 4px 8px;
border-radius: 999px;
background: #f1f5f9;
color: #334155;
white-space: nowrap;
}
.wqtb-module-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
font-size: 12px;
margin-bottom: 8px;
}
.wqtb-module-metrics div {
background: #f8fafc;
border-radius: 10px;
padding: 7px;
}
.wqtb-module-small {
font-size: 12px;
color: #64748b;
margin-bottom: 8px;
}
.wqtb-module-reco {
font-size: 12px;
line-height: 1.45;
background: #f8fafc;
border-radius: 10px;
padding: 8px;
}
.wqtb-module-result.is-critical {
border-left: 4px solid #dc2626;
background: #fff7f7;
}
.wqtb-module-result.is-weak {
border-left: 4px solid #f97316;
background: #fff7ed;
}
.wqtb-module-result.is-watch {
border-left: 4px solid #eab308;
background: #fefce8;
}
.wqtb-module-result.is-strong {
border-left: 4px solid #16a34a;
background: #f0fdf4;
}
.wqtb-module-card,
.wqtb-analysis-module,
.wqtb-module-analysis-card,
.wqtb-module-result,
.wqtb-v14-module-card {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
}
.wqtb-module-card *,
.wqtb-analysis-module *,
.wqtb-module-analysis-card *,
.wqtb-module-result *,
.wqtb-v14-module-card * {
writing-mode: unset !important;
text-orientation: unset !important;
}
.wqtb-module-head,
.wqtb-v14-module-top {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 0 !important;
}
.wqtb-module-card .wqtb-badge,
.wqtb-module-card .wqtb-pill,
.wqtb-analysis-module .wqtb-badge,
.wqtb-analysis-module .wqtb-pill,
.wqtb-module-analysis-card .wqtb-badge,
.wqtb-module-analysis-card .wqtb-pill,
.wqtb-module-head span,
.wqtb-v14-module-badge {
order: 1 !important;
align-self: flex-start !important;
max-width: 100% !important;
white-space: normal !important;
}
.wqtb-module-card h3,
.wqtb-module-card .wqtb-module-title,
.wqtb-analysis-module h3,
.wqtb-analysis-module .wqtb-module-title,
.wqtb-module-analysis-card h3,
.wqtb-module-analysis-card .wqtb-module-title,
.wqtb-module-head strong,
.wqtb-v14-module-title {
order: 2 !important;
writing-mode: horizontal-tb !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
line-height: 1.3 !important;
font-size: 16px !important;
max-width: 100% !important;
}
.wqtb-view-question {
margin-left: 10px;
cursor: pointer;
color: #2563eb;
font-size: 12px;
}
.wqtb-question-detail {
display: none;
margin-top: 6px;
padding: 8px;
background: #f8fafc;
border-left: 3px solid #3b82f6;
font-size: 13px;
border-radius: 6px;
}
.wqtb-native-quiz {
max-width: 900px;
margin: 40px auto;
padding: 28px;
background: #f8fafc;
border: 1px solid #dbe4f0;
border-radius: 28px;
font-family: inherit;
}
.wqtb-quiz-hero {
background: #ffffff;
border-radius: 24px;
padding: 28px;
margin-bottom: 22px;
box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}
.wqtb-quiz-kicker {
display: inline-flex;
padding: 6px 12px;
border-radius: 999px;
background: #eaf3ff;
font-size: 13px;
font-weight: 800;
color: #1d4ed8;
}
.wqtb-quiz-hero h2 {
margin: 14px 0 8px;
font-size: 34px;
font-weight: 900;
color: #0f172a;
}
.wqtb-quiz-question {
background: #ffffff;
border-radius: 22px;
padding: 24px;
margin-bottom: 18px;
border: 1px solid #e5e7eb;
}
.wqtb-quiz-question-head span {
display: inline-flex;
padding: 6px 12px;
border-radius: 999px;
background: #f1f5f9;
font-weight: 800;
color: #334155;
}
.wqtb-quiz-question h3 {
margin: 16px 0;
color: #0f172a;
font-size: 20px;
line-height: 1.45;
}
.wqtb-quiz-answers {
display: grid;
gap: 12px;
}
.wqtb-quiz-answer {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px;
border-radius: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
cursor: pointer;
transition: 0.18s ease;
}
.wqtb-quiz-answer:hover {
background: #eff6ff;
border-color: #93c5fd;
}
.wqtb-quiz-answer input {
margin-top: 4px;
}
.wqtb-quiz-submit-wrap {
text-align: center;
margin-top: 24px;
}
.wqtb-quiz-submit {
border: 0;
border-radius: 999px;
padding: 14px 28px;
background: #0f172a;
color: #ffffff;
font-size: 16px;
font-weight: 900;
cursor: pointer;
}
.wqtb-quiz-submit:disabled {
opacity: .6;
cursor: not-allowed;
}
.wqtb-quiz-result {
margin-top: 20px;
border-radius: 20px;
padding: 20px;
font-weight: 700;
}
.wqtb-quiz-result.success {
background: #ecfdf5;
border-left: 5px solid #22c55e;
}
.wqtb-quiz-result.error {
background: #fee2e2;
border-left: 5px solid #ef4444;
}
.wqtb-quiz-container {
max-width: 700px;
margin: auto;
}
.wqtb-progress {
height: 6px;
background: #eee;
border-radius: 10px;
margin-bottom: 10px;
}
/* Quiz step progress only: do not override dashboard pre/post bars. */
.wqtb-native-quiz .wqtb-progress-bar,
.wqtb-quiz-shell .wqtb-progress-bar,
.wqtb-question-progress .wqtb-progress-bar {
height: 100%;
width: 0%;
background: #4caf50;
border-radius: 10px;
transition: 0.3s;
}
.wqtb-question-card {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.wqtb-answer-card {
display: block;
padding: 12px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 8px;
cursor: pointer;
}
.wqtb-answer-card:hover {
background: #f5f5f5;
}
.wqtb-nav {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.wqtb-answer-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 12px;
cursor: pointer;
}
.wqtb-answer-left {
font-size: 15px;
color: #333;
}
.wqtb-answer-right input {
transform: scale(1.2);
}
.wqtb-answer-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border: 1px solid #eee;
border-radius: 10px;
margin-bottom: 12px;
cursor: pointer;
}
.wqtb-answer-text {
font-size: 16px;
color: #222;
}
.wqtb-answer-card {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
border: 1px solid #eee;
border-radius: 12px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.wqtb-answer-card:hover {
border-color: #0073ff;
background: #f8fbff;
}
.wqtb-answer-input {
display: none;
}
.wqtb-radio-custom {
width: 18px;
height: 18px;
border: 2px solid #bbb;
border-radius: 50%;
position: relative;
}
.wqtb-answer-input:checked + .wqtb-radio-custom {
border-color: #0073ff;
}
.wqtb-answer-input:checked + .wqtb-radio-custom::after {
content: "";
width: 8px;
height: 8px;
background: #0073ff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wqtb-answer-text {
font-size: 16px;
color: #222;
}
/* RESET TOTAL radio */
.wqtb-answer-input {
appearance: none;
-webkit-appearance: none;
opacity: 0;
}
/* CARD */
.wqtb-answer-card {
display: flex;
align-items: center;
justify-content: flex-start; /* ← important */
gap: 14px;
padding: 16px 18px;
border: 1px solid #eee;
border-radius: 12px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
/* HOVER */
.wqtb-answer-card:hover {
border-color: #0073ff;
background: #f8fbff;
}
/* RADIO CUSTOM */
.wqtb-radio-custom {
min-width: 18px;
min-height: 18px;
border: 2px solid #bbb;
border-radius: 50%;
position: relative;
}
/* CHECKED */
.wqtb-answer-input:checked + .wqtb-radio-custom {
border-color: #0073ff;
}
.wqtb-answer-input:checked + .wqtb-radio-custom::after {
content: "";
width: 8px;
height: 8px;
background: #0073ff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* TEXTE */
.wqtb-answer-text {
font-size: 16px;
color: #222;
flex: 1; /* ← évite le décalage */
}
/* WQTB V10 QUIZ ANSWERS - FORCE LAYOUT */
.wqtb-native-quiz .wqtb-answers .wqtb-answer-card {
direction: ltr !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 14px !important;
text-align: left !important;
padding: 18px 22px !important;
}
.wqtb-native-quiz .wqtb-answer-card .wqtb-answer-input {
display: none !important;
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
.wqtb-native-quiz .wqtb-answer-card .wqtb-radio-custom {
display: inline-block !important;
flex: 0 0 20px !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
border: 2px solid #94a3b8 !important;
border-radius: 50% !important;
background: #fff !important;
position: relative !important;
margin: 0 !important;
}
.wqtb-native-quiz .wqtb-answer-card .wqtb-answer-text {
display: block !important;
flex: 1 1 auto !important;
color: #0f172a !important;
font-size: 18px !important;
font-weight: 600 !important;
text-align: left !important;
}
.wqtb-native-quiz .wqtb-answer-input:checked + .wqtb-radio-custom {
border-color: #0f72ff !important;
}
.wqtb-native-quiz .wqtb-answer-input:checked + .wqtb-radio-custom::after {
content: "" !important;
width: 10px !important;
height: 10px !important;
background: #0f72ff !important;
border-radius: 50% !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* ===== FORCE FIX RTL THEME ===== */
.wqtb-native-quiz {
direction: ltr !important;
text-align: left !important;
}
.wqtb-native-quiz * {
direction: ltr !important;
text-align: left !important;
}
/* ANSWER CARD */
.wqtb-native-quiz .wqtb-answer-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
}
/* RADIO POSITION */
.wqtb-native-quiz .wqtb-radio-custom {
order: 0 !important;
}
/* TEXT POSITION */
.wqtb-native-quiz .wqtb-answer-text {
order: 1 !important;
}
html[data-lang="ar"] .wqtb-native-quiz {
direction: rtl !important;
}
html[data-lang="fr"],
html[data-lang="en"] .wqtb-native-quiz {
direction: ltr !important;
}
.wqtb-native-quiz {
all: initial;
display: block;
font-family: Arial, sans-serif;
direction: ltr;
text-align: left;
max-width: 900px;
margin: 40px auto;
}
.wqtb-native-quiz * {
box-sizing: border-box;
font-family: inherit;
}
.wqtb-native-quiz .wqtb-answer-card {
all: unset;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 18px 22px;
margin-bottom: 14px;
border: 1px solid #e5e7eb;
border-radius: 16px;
background: #fff;
cursor: pointer;
}
.wqtb-native-quiz .wqtb-answer-input {
all: unset;
width: 18px;
height: 18px;
border: 2px solid #94a3b8;
border-radius: 50%;
flex: 0 0 18px;
}
.wqtb-native-quiz .wqtb-answer-input:checked {
border: 5px solid #2563eb;
}
.wqtb-native-quiz .wqtb-answer-text {
font-size: 18px;
color: #0f172a;
}
/* Cacher header + menu */
.wqtb-quiz-page header,
.wqtb-quiz-page .site-header,
.wqtb-quiz-page .main-navigation,
.wqtb-quiz-page nav,
.wqtb-quiz-page .navbar {
display: none !important;
}
.wqtb-custom-header {
text-align: center;
margin: 40px 0 30px;
}
.wqtb-custom-header img {
max-width: 120px;
display: block;
margin: 0 auto 15px;
}
.wqtb-custom-header h1 {
font-size: 32px;
font-weight: 700;
color: #0f172a;
}
.wqtb-quiz-page .wqtb-quiz-container {
max-width: 900px;
margin: 0 auto;
}
body.wqtb-full-quiz-page {
margin: 0 !important;
background: #f8fafc !important;
font-family: Arial, sans-serif !important;
}
.wqtb-full-quiz-shell {
min-height: 100vh;
padding: 40px 20px;
}
.wqtb-full-quiz-header {
text-align: center;
margin-bottom: 30px;
}
.wqtb-full-quiz-header img {
max-width: 120px;
display: block;
margin: 0 auto 18px;
}
.wqtb-full-quiz-header h1 {
font-size: 42px;
font-weight: 900;
color: #0f172a;
margin: 0;
}
.wqtb-full-quiz-content {
max-width: 900px;
margin: 0 auto;
}
body.wqtb-full-quiz-page header,
body.wqtb-full-quiz-page .site,
body.wqtb-full-quiz-page .site-header {
display: none !important;
}
.wqtb-full-quiz-shell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
}
.wqtb-full-quiz-header {
text-align: center;
margin-bottom: 40px;
}
.wqtb-full-quiz-header h1 {
font-size: 36px;
font-weight: 800;
margin-top: 10px;
}
.wqtb-full-quiz-content {
width: 100%;
max-width: 800px;
}
body.wqtb-full-quiz-page {
background: #f8fafc !important;
}
.wqtb-question-card {
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* WQTB quiz button isolation */
.wqtb-submit {
all: unset !important;
box-sizing: border-box !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 220px !important;
height: 56px !important;
padding: 0 28px !important;
background: #ef1b1b !important;
color: #ffffff !important;
border-radius: 14px !important;
border: none !important;
font-size: 15px !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
cursor: pointer !important;
margin: 28px auto 0 !important;
}
.wqtb-nav {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
/* WQTB quiz answer width fix */
.wqtb-question-card {
overflow: hidden !important;
}
.wqtb-answers {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.wqtb-answer-card {
width: 100% !important;
max-width: 100% !important;
padding: 18px 24px !important;
box-sizing: border-box !important; /* 🔥 LE FIX IMPORTANT */
margin: 10px 0 !important;
}
/* Corriger symétrie parfaite */
.wqtb-question-card {
padding-left: 24px !important;
padding-right: 24px !important;
}
/* Forcer symétrie container */
body.wqtb-full-quiz-page .wqtb-full-quiz-content {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Empêcher décalage RTL parasite */
body.wqtb-full-quiz-page .wqtb-native-quiz {
direction: ltr !important;
}
.wqtb-full-quiz-content {
max-width: 720px;
}
/* Conteneur principal */
/* Carte question */
body.wqtb-full-quiz-page .wqtb-question-card {
width: 100% !important;
max-width: 100% !important;
}
/* Zone réponses */
body.wqtb-full-quiz-page .wqtb-answers {
width: 100% !important;
}
.wqtb-question-card {
padding: 40px !important;
}
.wqtb-question-card h3 {
font-size: 28px !important;
line-height: 1.4;
}
body.wqtb-full-quiz-page .wqtb-native-quiz {
width: 100% !important;
max-width: 1100px !important; /* 🔥 largeur réelle */
margin: 0 auto !important;
}
/* Carte */
body.wqtb-full-quiz-page .wqtb-question-card {
width: 100% !important;
max-width: 100% !important;
padding: 40px !important;
}
/* Réponses */
body.wqtb-full-quiz-page .wqtb-answers {
width: 100% !important;
max-width: 100% !important;
}
@media (max-width: 768px) {
body.wqtb-full-quiz-page .wqtb-native-quiz {
max-width: 100% !important;
}
}
/* =========================================================
WQTB QUIZ — MOBILE RESPONSIVE FIX
========================================================= */
@media (max-width: 768px) {
body.wqtb-full-quiz-page {
padding: 0 !important;
margin: 0 !important;
background: #f8fafc !important;
}
body.wqtb-full-quiz-page .wqtb-full-quiz-shell {
width: 100% !important;
min-height: 100vh !important;
padding: 20px 14px 40px !important;
}
body.wqtb-full-quiz-page .wqtb-full-quiz-header {
margin-bottom: 24px !important;
}
body.wqtb-full-quiz-page .wqtb-full-quiz-header img {
max-width: 105px !important;
margin-bottom: 12px !important;
}
body.wqtb-full-quiz-page .wqtb-full-quiz-header h1 {
font-size: 32px !important;
line-height: 1.15 !important;
margin: 0 !important;
text-align: center !important;
}
body.wqtb-full-quiz-page .wqtb-full-quiz-content,
body.wqtb-full-quiz-page .wqtb-native-quiz,
body.wqtb-full-quiz-page .wqtb-quiz-container {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
body.wqtb-full-quiz-page .wqtb-progress {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 12px !important;
}
body.wqtb-full-quiz-page .wqtb-progress-text {
font-size: 16px !important;
margin-bottom: 8px !important;
}
body.wqtb-full-quiz-page .wqtb-question-card {
width: 100% !important;
max-width: 100% !important;
padding: 28px 18px !important;
border-radius: 24px !important;
}
body.wqtb-full-quiz-page .wqtb-question-card h3 {
font-size: 28px !important;
line-height: 1.25 !important;
text-align: left !important;
margin: 0 0 26px !important;
}
body.wqtb-full-quiz-page .wqtb-answers {
width: 100% !important;
max-width: 100% !important;
}
body.wqtb-full-quiz-page .wqtb-answer-card {
width: 100% !important;
max-width: 100% !important;
min-height: 66px !important;
padding: 16px 18px !important;
margin: 12px 0 !important;
border-radius: 18px !important;
gap: 14px !important;
}
body.wqtb-full-quiz-page .wqtb-radio-custom {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
}
body.wqtb-full-quiz-page .wqtb-answer-text {
font-size: 20px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
}
body.wqtb-full-quiz-page .wqtb-nav {
width: 100% !important;
justify-content: center !important;
margin-top: 28px !important;
}
body.wqtb-full-quiz-page .wqtb-submit {
width: 100% !important;
max-width: 320px !important;
height: 64px !important;
border-radius: 18px !important;
font-size: 18px !important;
}
}
/* 🔥 CONTENEUR SCROLLABLE RÉEL */
#wqtb-frontend-modal-body {
max-height: 75vh;
overflow-y: auto;
padding-right: 6px;
}
/* fallback si body n'existe pas */
.wqtb-premium-modal {
max-height: 75vh;
overflow-y: auto;
}
.wqtb-question-block {
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 1px solid #EAF1F8;
}
.wqtb-question-header {
margin-bottom: 10px;
}
.wqtb-q-number {
font-size: 14px;
color: #5F6F81;
font-weight: 600;
}
.wqtb-submit-wrap {
text-align: center;
margin-top: 40px;
}
.wqtb-submit-full {
background: #2F5D9F;
color: #fff;
padding: 16px 40px;
border-radius: 10px;
font-weight: bold;
border: none;
cursor: pointer;
}
#wqtb-quiz-error-top {
background: #ffe3e3;
border-left: 4px solid #ff4d4d;
padding: 15px;
margin-bottom: 20px;
border-radius: 8px;
}
@media (max-width: 768px) {
html,
body,
body.wqtb-frontend-body {
max-width: 100% !important;
overflow-x: hidden !important;
}
.wqtb-front-shell,
.wqtb-premium-dashboard,
.wqtb-front-wrap,
.wqtb-front-container,
.wqtb-trainer-dashboard,
.wqtb-dashboard-shell,
.wqtb-tab-panel,
.wqtb-analysis-panel,
.wqtb-analysis-grid,
.wqtb-analytics-grid,
.wqtb-front-advanced,
.wqtb-front-hero,
.wqtb-front-hero-premium,
.wqtb-hero-main,
.wqtb-hero-copy,
.wqtb-analytics-layout,
.wqtb-analytics-left,
.wqtb-analytics-right {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
.wqtb-analysis-grid,
.wqtb-analytics-grid,
.wqtb-front-analytics-grid,
.wqtb-extra-charts-grid,
.wqtb-pedagogical-extra-grid,
.wqtb-complementary-charts-grid,
.wqtb-v13-extra-charts-grid,
.wqtb-additional-charts-grid,
.wqtb-front-grid-2,
.wqtb-analytics-layout,
.wqtb-pedagogy-heatmap {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.wqtb-analysis-card,
.wqtb-analytics-card,
.wqtb-front-card,
.wqtb-front-panel,
.wqtb-front-hero,
.wqtb-front-progress-card,
.wqtb-front-advanced,
.wqtb-front-learners,
.wqtb-front-actions-bar,
.wqtb-hero-pill,
.wqtb-pedagogy,
.wqtb-pedagogy-card,
.wqtb-pedagogy-summary,
.wqtb-pedagogy-heatmap-card,
.wqtb-extra-chart-card,
.wqtb-v13-extra-chart-card,
.wqtb-pedagogical-extra-card,
.wqtb-complementary-chart-card,
.wqtb-additional-chart-card,
.wqtb-chart-card,
.wqtb-diagnostic-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.wqtb-analysis-card *,
.wqtb-analytics-card *,
.wqtb-front-card *,
.wqtb-front-hero *,
.wqtb-front-progress-card *,
.wqtb-front-advanced *,
.wqtb-pedagogy *,
.wqtb-pedagogy-card *,
.wqtb-pedagogy-summary *,
.wqtb-v14-ai-panel *,
.wqtb-diag-block * {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
canvas,
.wqtb-chart-box canvas,
.wqtb-chart-card canvas,
.wqtb-advanced-chart-frame canvas,
.wqtb-extra-chart-card canvas,
.wqtb-v13-extra-chart-card canvas,
.wqtb-pedagogical-extra-card canvas,
.wqtb-complementary-chart-card canvas,
.wqtb-additional-chart-card canvas,
.wqtb-analytics-card canvas {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
}
.wqtb-chart-box,
.wqtb-chart-wrap,
.wqtb-canvas-wrap,
.wqtb-advanced-chart-frame {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
.wqtb-pedagogy-card h2,
.wqtb-pedagogy-card h3,
.wqtb-analysis-card h2,
.wqtb-analysis-card h3,
.wqtb-front-card h2,
.wqtb-front-card h3,
.wqtb-front-hero h2,
.wqtb-front-advanced h2,
.wqtb-v14-ai-title {
font-size: clamp(20px, 7vw, 28px) !important;
line-height: 1.15 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.wqtb-pedagogy-card p,
.wqtb-analysis-card p,
.wqtb-front-card p,
.wqtb-front-hero p,
.wqtb-analysis-summary,
.wqtb-v14-ai-subtitle {
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.wqtb-progress-row,
.wqtb-progress-bar,
.wqtb-score-bar,
.wqtb-diag-item,
.wqtb-diag-stats,
.wqtb-diag-block,
#wqtbDiagnosticBox {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
}
@media (max-width: 768px) {
.wqtb-overview-hero,
.wqtb-overview-hero-main,
.wqtb-overview-side,
.wqtb-pedagogy-card,
.wqtb-pedagogy-summary,
.wqtb-instant-pedagogy-card,
.wqtb-analysis-card {
overflow: visible !important;
}
.wqtb-overview-hero,
.wqtb-overview-hero-main,
.wqtb-overview-side {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.wqtb-overview-hero-main {
padding: 20px !important;
}
.wqtb-section-head {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
.wqtb-section-head > div {
flex: 1 1 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.wqtb-quality-text,
.wqtb-quality-pill {
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.wqtb-pedagogy-card h2,
.wqtb-pedagogy-card h3,
.wqtb-pedagogy-card p,
.wqtb-instant-pedagogy-card h2,
.wqtb-instant-pedagogy-card h3,
.wqtb-instant-pedagogy-card p,
.wqtb-overview-hero-main h2,
.wqtb-overview-hero-main h3,
.wqtb-overview-hero-main p {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
max-width: 100% !important;
}
.wqtb-pedagogy-card h2,
.wqtb-instant-pedagogy-card h2,
.wqtb-overview-hero-main h2 {
font-size: 34px !important;
line-height: 1.08 !important;
}
.wqtb-pedagogy-card p,
.wqtb-instant-pedagogy-card p,
.wqtb-overview-hero-main p {
font-size: 17px !important;
line-height: 1.45 !important;
}
.wqtb-progress-row,
.wqtb-score-row,
.wqtb-pedagogy-progress-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
.wqtb-progress-row-header,
.wqtb-score-row-header,
.wqtb-pedagogy-progress-head {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.wqtb-progress-row-label,
.wqtb-score-label,
.wqtb-pedagogy-progress-label,
.wqtb-progress-label {
flex: 1 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.wqtb-progress-row-value,
.wqtb-score-value,
.wqtb-pedagogy-progress-value,
.wqtb-progress-percent,
.wqtb-progress-value {
flex: 0 0 auto !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
transform: none !important;
white-space: nowrap !important;
font-weight: 900 !important;
color: #0f172a !important;
text-align: right !important;
overflow: visible !important;
max-width: 100% !important;
}
.wqtb-progress-bar,
.wqtb-score-bar,
.wqtb-pedagogy-progress-bar {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.wqtb-progress-fill,
.wqtb-score-fill,
.wqtb-pedagogy-progress-fill,
.wqtb-progress-bar span {
max-width: 100% !important;
}
}
@media (max-width: 768px) {
.wqtb-front-kpi,
.wqtb-front-card,
.wqtb-analysis-card,
.wqtb-performance-card,
.wqtb-front-summary,
.wqtb-overview-stat-card,
.wqtb-summary-mini,
.wqtb-diag-item,
.wqtb-diag-stats,
.wqtb-diag-block {
overflow: visible !important;
}
.wqtb-front-status,
.wqtb-badge,
.wqtb-quality-badge,
.wqtb-diagnostic-badge,
.wqtb-pill,
.wqtb-status-pill,
.wqtb-quality-text,
.wqtb-diagnostic-text,
.wqtb-score-label,
.wqtb-diag-item strong,
.wqtb-diag-item span {
max-width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
line-height: 1.25 !important;
text-align: center !important;
}
.wqtb-performance-card .wqtb-front-status,
.wqtb-performance-card .wqtb-badge,
.wqtb-performance-card .wqtb-diagnostic-badge,
.wqtb-performance-card .wqtb-pill,
.wqtb-performance-card .wqtb-status-pill,
.wqtb-front-summary .wqtb-quality-text,
.wqtb-front-summary .wqtb-diagnostic-text,
.wqtb-overview-stat-card .wqtb-diagnostic-text,
.wqtb-summary-mini .wqtb-diagnostic-text,
.wqtb-diag-v13 .wqtb-score-label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
padding: 10px 14px !important;
}
.wqtb-performance-row,
.wqtb-diagnostic-row,
.wqtb-quality-row,
.wqtb-front-summary p,
.wqtb-diag-stats,
.wqtb-diag-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.wqtb-performance-row > *,
.wqtb-diagnostic-row > *,
.wqtb-quality-row > *,
.wqtb-front-summary p > *,
.wqtb-diag-stats > *,
.wqtb-diag-item > * {
max-width: 100% !important;
min-width: 0 !important;
}
}
@media (max-width: 768px) {
.wqtb-cert-cell .wqtb-badge,
.wqtb-cert-cell .wqtb-btn,
td[data-col="certificat"] .wqtb-badge,
td[data-col="certificat"] .wqtb-btn,
#wqtb-frontend-learners-table td:nth-child(7) .wqtb-front-status,
#wqtb-frontend-learners-table td:nth-child(7) .wqtb-badge,
#wqtb-frontend-learners-table td:nth-child(7) .wqtb-btn,
#wqtb-frontend-learners-table td:nth-child(7) .wqtb-btn-verify {
display: block !important;
width: auto !important;
min-width: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-align: center !important;
}
/* Reduce mobile card spacing to give tables more usable width. */
.wqtb-front-card,
.wqtb-analysis-card,
.wqtb-analytics-card,
.wqtb-pedagogy-card,
.wqtb-extra-chart-card {
margin: 0 auto 12px !important;
max-width: 100% !important;
}
.wqtb-front-card-inner,
.wqtb-analysis-card-inner,
.wqtb-analytics-card-inner,
.wqtb-pedagogy-card-inner {
padding: 14px !important;
}
.wqtb-front-card,
.wqtb-analysis-card,
.wqtb-analytics-card {
padding: 14px !important;
}
.wqtb-front-container,
.wqtb-dashboard-shell {
padding-left: 10px !important;
padding-right: 10px !important;
}
.wqtb-performance-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
margin-bottom: 16px !important;
}
.wqtb-performance-label {
font-weight: 500 !important;
color: #334155 !important;
line-height: 1.25 !important;
}
.wqtb-performance-value {
font-weight: 900 !important;
color: #0f172a !important;
line-height: 1.25 !important;
}
.wqtb-performance-value .wqtb-badge,
.wqtb-performance-value .wqtb-pill,
.wqtb-performance-value .wqtb-status-pill,
.wqtb-performance-value .wqtb-quality-text,
.wqtb-performance-value .wqtb-diagnostic-text {
max-width: 100% !important;
white-space: normal !important;
}
.wqtb-learner-modal-kpis {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
.wqtb-learner-modal-kpis .wqtb-mini-kpi {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 14px 10px !important;
border-radius: 18px !important;
text-align: center !important;
overflow: visible !important;
}
.wqtb-learner-modal-kpis .wqtb-mini-kpi span {
display: block !important;
white-space: normal !important;
line-height: 1.25 !important;
font-size: 14px !important;
}
.wqtb-learner-modal-kpis .wqtb-mini-kpi strong {
display: block !important;
margin-top: 8px !important;
white-space: normal !important;
line-height: 1.05 !important;
font-size: 24px !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.wqtb-analysis-card table,
.wqtb-analysis-card .wqtb-table-wrap {
margin: 0 !important;
}
.wqtb-module-card,
.wqtb-analysis-module,
.wqtb-module-analysis-card,
.wqtb-module-result,
.wqtb-v14-module-card {
padding: 14px !important;
}
.wqtb-front-advanced {
padding-left: 10px !important;
padding-right: 10px !important;
border-radius: 18px !important;
}
.wqtb-front-advanced .wqtb-front-grid-2 {
width: 100% !important;
max-width: 100% !important;
margin: 12px 0 0 !important;
gap: 12px !important;
box-sizing: border-box !important;
}
.wqtb-front-advanced .wqtb-front-grid-2 > .wqtb-front-card:first-child {
width: 100% !important;
max-width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 10px !important;
border-radius: 14px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.wqtb-front-advanced .wqtb-front-grid-2 > .wqtb-front-card:first-child h3 {
margin-bottom: 10px !important;
}
.wqtb-front-advanced .wqtb-front-grid-2 > .wqtb-front-card:first-child .wqtb-front-table {
width: 100% !important;
max-width: 100% !important;
table-layout: auto !important;
border-radius: 12px !important;
}
}
[dir="rtl"] .wqtb-diagnostic-card,
[dir="rtl"] .wqtb-pedagogy-card,
[dir="rtl"] .wqtb-analysis-card,
[dir="rtl"] .wqtb-pedagogy {
padding: 14px 12px !important;
}
[dir="rtl"] .wqtb-diag-stats,
[dir="rtl"] .wqtb-diag-block {
gap: 8px !important;
}
[dir="rtl"] .wqtb-diagnostic-item,
[dir="rtl"] .wqtb-diagnostic-row,
[dir="rtl"] .wqtb-diag-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 6px !important;
margin-bottom: 10px !important;
padding: 10px 12px 10px 10px !important;
position: relative !important;
text-align: right !important;
}
[dir="rtl"] .wqtb-diagnostic-item .wqtb-icon,
[dir="rtl"] .wqtb-diagnostic-row .wqtb-icon,
[dir="rtl"] .wqtb-diag-item .wqtb-icon {
flex: 0 0 auto !important;
display: inline-flex !important;
position: absolute !important;
top: 10px !important;
left: 10px !important;
margin: 0 !important;
order: 0 !important;
}
[dir="rtl"] .wqtb-diagnostic-item .wqtb-label,
[dir="rtl"] .wqtb-diagnostic-row .wqtb-label,
[dir="rtl"] .wqtb-diag-item .wqtb-diag-label {
flex: 1 1 auto !important;
order: 1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
text-align: right !important;
}
[dir="rtl"] .wqtb-diagnostic-item .wqtb-value,
[dir="rtl"] .wqtb-diagnostic-row .wqtb-value,
[dir="rtl"] .wqtb-diag-item .wqtb-diag-value {
flex: 1 1 auto !important;
order: 2 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
text-align: right !important;
font-weight: 700 !important;
}
[dir="rtl"] .wqtb-pedagogy-card .wqtb-warning,
[dir="rtl"] .wqtb-warning {
padding: 10px 12px !important;
margin-bottom: 10px !important;
}
[dir="rtl"] .wqtb-pedagogy-card .wqtb-warning strong,
[dir="rtl"] .wqtb-warning strong {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
text-align: right !important;
line-height: 1.3 !important;
}
/* =========================
WQTB Premium SaaS Background
========================= */
body.wqtb-register-page,
body.wqtb-full-quiz-page,
body.wqtb-trainer-page {
background: #f5f7fb !important;
}
/* Cards */
.wqtb-register-shell,
.wqtb-register-card,
.wqtb-register-hero,
.wqtb-premium-card,
.wqtb-dashboard-card {
background: #ffffff;
border: 1px solid #e6ebf2;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
}
body.wqtb-register-page #page,
body.wqtb-register-page .site,
body.wqtb-register-page main {
background: transparent !important;
}