@charset "UTF-8";
/* ============================================================
   app.css — Styles personnalisés Quiz Platform
   ============================================================ */

body {
    background-color: #f8fbfd;
    background-image: url("/public/images/wp.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}
.cursor-pointer { cursor: pointer; }



/* ----------------------------------------------------------------
   Carte quiz
   ---------------------------------------------------------------- */
.quiz-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.quiz-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important;
}

/* Placeholder couleur quand pas de miniature */
.quiz-placeholder {
    height: 140px;
    background: linear-gradient(135deg, var(--bs-primary), #6610f2);
}

.quiz-premium {
    background: linear-gradient(135deg,   var(--bs-warning-bg-subtle), var(--bs-danger-bg-subtle));
}

.quiz-mine {
    border-left: 4px solid var(--bs-success) !important;
}
.quiz-mine-draft {
    border-left: 4px solid var(--bs-warning) !important;
}
.quiz-mine-disabled {
    border-left: 4px solid var(--bs-danger) !important;
}

/* ----------------------------------------------------------------
   Avatar initiales
   ---------------------------------------------------------------- */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
}

/* ----------------------------------------------------------------
   Options de réponse (quiz)
   ---------------------------------------------------------------- */
.answer-option {
    cursor: pointer;
    transition: background .15s, border-color .15s;
    border-color: var(--bs-border-color) !important;
}
.answer-option:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary) !important;
}
.answer-option.selected {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary) !important;
}
.answer-option.correct {
    background: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success) !important;
}
.answer-option.incorrect {
    background: var(--bs-danger-bg-subtle) !important;
    border-color: var(--bs-danger) !important;
}

/* Lettre de réponse */
.answer-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    font-size: .85rem;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Navbar
   ---------------------------------------------------------------- */
.navbar-nav .nav-link.active {
    font-weight: 600;
}

/* ----------------------------------------------------------------
   Utilitaires
   ---------------------------------------------------------------- */
.text-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.min-w-0 { min-width: 0; }

.hover-lift {
    transition: transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.1) !important;
}

/* ----------------------------------------------------------------
   Hero & sections
   ---------------------------------------------------------------- */
 
.hero-section {
    background: linear-gradient(135deg,
        var(--bs-primary-bg-subtle) 0%,
        var(--bs-body-bg) 60%);
        border-radius: 0 0 3rem 3rem;
}

.hero-illustration {
    width: auto;
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 3rem;
}

.bg-primary .display-6 { font-size: clamp(1.5rem, 4vw, 2rem); }

@media (max-width: 576px) {
    .hero-section { padding-top: 2rem !important; }
    .display-4   { font-size: 1.9rem; }
}

/* ----------------------------------------------------------------
   Miniature drop
   ---------------------------------------------------------------- */
.thumbnail-drop {
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.thumbnail-drop:hover,
.thumbnail-drop.border-primary {
    border-color: var(--bs-primary) !important;
    background: var(--bs-primary-bg-subtle);
}

/* ============================================================
   Matching — relier les paires
   ============================================================ */
.matching-item {
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    border-color: var(--bs-border-color) !important;
    min-height: 52px;
    user-select: none;
    position: relative;
}
.matching-item:hover {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary) !important;
}
.matching-item.selected-left {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary) !important;
    transform: scale(1.02);
}
.matching-item.paired {
    background: var(--bs-success-bg-subtle);
    border-color: var(--bs-success) !important;
}
.matching-item.correct-pair {
    background: var(--bs-success-bg-subtle) !important;
    border-color: #198754 !important;
}
.matching-item.wrong-pair {
    background: var(--bs-danger-bg-subtle) !important;
    border-color: #dc3545 !important;
}

/* Points de connexion */
.matching-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    display: inline-block;
}
.matching-item.selected-left .dot-left,
.matching-item.paired .matching-dot {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}
.matching-item.correct-pair .matching-dot {
    background: #198754;
    border-color: #198754;
}
.matching-item.wrong-pair .matching-dot {
    background: #dc3545;
    border-color: #dc3545;
}

/* Traits SVG */
.matching-line {
    stroke: var(--bs-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: .7;
    transition: stroke .2s;
}
.matching-line.correct { stroke: #198754; opacity: 1; }
.matching-line.wrong   { stroke: #dc3545; opacity: 1; }

#matchingColumns {
    position: relative;
    min-height: 250px;
}
#matchingSvg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-height: 250px;
    overflow: visible;
    pointer-events: none;
}

/* ============================================================
   Éditeur de quiz — paragraphes & questions
   ============================================================ */

/* --- Paragraphes --- */
.paragraph-block  { cursor: default; }

.drag-paragraph-handle {
    cursor: grab;
    opacity: .5;
    transition: opacity .15s;
}
.drag-paragraph-handle:active { cursor: grabbing; }
.paragraph-block:hover .drag-paragraph-handle { opacity: 1; }

.paragraph-header:hover { filter: brightness(0.97); }

.paragraph-chevron {
    transition: transform .25s ease;
    font-size: .85rem;
}

/* --- Questions --- */
.question-drag-handle {
    cursor: grab;
    opacity: .4;
    transition: opacity .15s;
}
.question-drag-handle:active { cursor: grabbing; }
.question-card:hover .question-drag-handle { opacity: 1; }

/* Conteneur de questions — zone de dépôt */
.question-container {
    min-height: 60px;
    transition: background-color .2s;
}
.question-container.sortable-over {
    background-color: var(--bs-primary-bg-subtle);
    border-radius: .375rem;
}

/* --- SortableJS --- */
.sortable-ghost {
    opacity: .3;
    background: var(--bs-primary-bg-subtle);
}
.sortable-chosen {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* Paragraphe surligné pendant un drag de question */
.drag-target-hint > .card-header {
    background-color: var(--bs-warning-bg-subtle) !important;
    border-left-color: var(--bs-warning) !important;
}

/* ----------------------------------------------------------------
   Audio
   ---------------------------------------------------------------- */
#playAudioBtn.audio-waiting {
    animation: audio-pulse 1.4s ease-in-out infinite;
}

@keyframes audio-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, .55); }
    50%      { box-shadow: 0 0 0 12px rgba(13, 110, 253, 0); }
}

/* ----------------------------------------------------------------
   Contenu de leçon + éditeur Quill
   Affichage typographique uniformisé
   ---------------------------------------------------------------- */

/* Conteneur général */
.lesson-content,
#pContentEditor .ql-editor {
    font-size: 1rem;
    line-height: 1.35;
}

/* Paragraphes */
.lesson-content p,
#pContentEditor .ql-editor p {
    font-size: 1rem;
    line-height: 1.30;
    margin-bottom: .5rem;
}

/* Listes */
.lesson-content ul,
.lesson-content ol,
#pContentEditor .ql-editor ul,
#pContentEditor .ql-editor ol {
    margin-bottom: .5rem;
}

/* Éléments de listes */
.lesson-content li,
#pContentEditor .ql-editor li {
    line-height: 1.35;
    margin-bottom: .15rem;
}

.lesson-content li:last-child,
#pContentEditor .ql-editor li:last-child {
    margin-bottom: 0;
}

/* Listes imbriquées */
.lesson-content li > ul,
.lesson-content li > ol,
#pContentEditor .ql-editor li > ul,
#pContentEditor .ql-editor li > ol {
    margin-top: .15rem;
    margin-bottom: .15rem;
}

/* Titres */
#pContentEditor .ql-editor h2, 
.lesson-content h2 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    color: #0d6efd;
}
#pContentEditor .ql-editor h3,
.lesson-content h3{
    font-size: 1.3rem;
    margin-top: 1rem;
    color: #0846a2;
}
#pContentEditor .ql-editor h5,
.lesson-content h5{
    font-size: 1.1rem;
    margin-top: 1rem;
    font-weight: 500;
    color: #063171;
}



/* ----------------------------------------------------------------
   Éditeur Quill uniquement
   ---------------------------------------------------------------- */

#pContentEditor .ql-editor {
    min-height: 180px;
}

.ql-toolbar.ql-snow {
    border-radius: .375rem .375rem 0 0;
}

.ql-container.ql-snow {
    border-radius: 0 0 .375rem .375rem;
}


/* ----------------------------------------------------------------
   Révision
   ---------------------------------------------------------------- */

.revision-chevron {
    transition: transform .2s ease;
    font-size: .8rem;
}

.revision-toggle:hover {
    filter: brightness(0.96);
}

/* ----------------------------------------------------------------
   Type « remettre en ordre » : zones + pilules
   ---------------------------------------------------------------- */

.order-answer,
.order-bank { display: flex; flex-wrap: wrap; gap: .5rem; }

.order-answer {
    min-height: 3.25rem;
    padding: .75rem;
    border: 2px dashed var(--bs-border-color);
    border-radius: .75rem;
    align-content: flex-start;
}
.order-answer:empty::before {
    content: "Touchez les éléments ci-dessous pour les placer ici…";
    color: var(--bs-secondary-color);
    font-size: .9rem;
    align-self: center;
}

.order-bank { padding: .25rem 0; }

.order-token {
    cursor: pointer;
    user-select: none;
    padding: .5rem .9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-weight: 500;
    line-height: 1.2;
}
.order-token:hover { border-color: var(--bs-primary); }

.sortable-ghost { opacity: .4; }