/* =========================================================
   MÉMORIAL 14-18 — ÉVALUATION
   STYLE DOCUMENTAIRE
   ========================================================= */

.memorial-evaluation {

    --eval-blue: #6786a1;
    --eval-blue-dark: #4f6d86;
    --eval-blue-light: #eef3f6;
    --eval-blue-pale: #f7f9fa;
    --eval-text: #30363b;
    --eval-muted: #69737b;
    --eval-border: #dfe5e9;
    --eval-white: #ffffff;

    max-width: 1050px;
    margin: 70px auto;

    color: var(--eval-text);

    font-family: inherit;

    line-height: 1.8;
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.memorial-evaluation-header {

    margin-bottom: 45px;

    padding: 42px 48px;

    background: var(--eval-blue-light);

    border-left: 4px solid var(--eval-blue);
}


.memorial-evaluation-kicker {

    display: block;

    margin-bottom: 10px;

    color: var(--eval-blue-dark);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.memorial-evaluation-header h2 {

    margin: 0 0 12px;

    color: var(--eval-blue-dark);

    font-size: clamp(28px, 4vw, 38px);

    line-height: 1.2;

    font-weight: 600;
}


.memorial-evaluation-header p {

    margin: 0;

    font-size: 18px;
}


/* =========================================================
   QUESTIONS
   ========================================================= */

.memorial-question {

    margin-bottom: 30px;

    padding: 32px 35px;

    background: var(--eval-white);

    border: 1px solid var(--eval-border);
}


.memorial-question-number {

    margin-bottom: 10px;

    color: var(--eval-blue);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.memorial-question h3 {

    margin: 0 0 25px;

    color: var(--eval-blue-dark);

    font-size: 21px;

    line-height: 1.45;

    font-weight: 600;
}


/* =========================================================
   RÉPONSES
   ========================================================= */

.memorial-answer {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 8px;

    padding: 14px 16px;

    border: 1px solid transparent;

    cursor: pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease;
}


.memorial-answer:hover {

    background: var(--eval-blue-pale);

    border-color: var(--eval-border);
}


.memorial-answer input {

    flex: 0 0 auto;

    margin-top: 6px;
}


.memorial-answer span {

    flex: 1;

    line-height: 1.6;
}


/* =========================================================
   FRISE
   ========================================================= */

.memorial-help {

    margin-bottom: 18px;

    color: var(--eval-muted);

    font-size: 14px;
}


.memorial-sortable {

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.memorial-sortable-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

    background: var(--eval-blue-pale);

    border: 1px solid var(--eval-border);

    cursor: grab;

    transition:
        background-color .15s ease,
        opacity .15s ease;
}


.memorial-sortable-item:hover {

    background: var(--eval-blue-light);
}


.memorial-sortable-item.dragging {

    opacity: .45;
}


.memorial-drag-handle {

    color: var(--eval-blue);

    font-weight: 700;

    letter-spacing: -3px;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.memorial-evaluation-actions {

    margin-top: 35px;

    padding-top: 30px;

    border-top: 1px solid var(--eval-border);
}


.memorial-evaluation-submit,
.memorial-restart {

    display: inline-block;

    padding: 13px 25px;

    color: var(--eval-white);

    background: var(--eval-blue-dark);

    border: none;

    border-radius: 0;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .15s ease,
        opacity .15s ease;
}


.memorial-evaluation-submit:hover,
.memorial-restart:hover {

    background: var(--eval-blue);
}


.memorial-evaluation-submit:disabled {

    cursor: wait;

    opacity: .65;
}


/* =========================================================
   RÉSULTAT
   ========================================================= */

.memorial-evaluation-result {

    display: none;

    padding: 50px 40px;

    text-align: center;

    background: var(--eval-blue-pale);

    border-top: 1px solid var(--eval-border);

    border-bottom: 1px solid var(--eval-border);
}


/* =========================================================
   SCORE
   ========================================================= */

.memorial-score-label,
.memorial-grade > span {

    display: block;

    color: var(--eval-muted);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.memorial-score-number {

    display: block;

    margin: 8px 0 35px;

    color: var(--eval-blue-dark);

    font-size: 48px;

    line-height: 1;

    font-weight: 600;
}


/* =========================================================
   GRADE
   ========================================================= */

.memorial-grade {

    margin-bottom: 30px;
}


.memorial-grade-promotion {

    max-width: 650px;

    margin: 18px auto 8px;

    color: var(--eval-text);

    font-size: 17px;

    line-height: 1.6;
}


.memorial-grade-name {

    display: block;

    margin: 10px auto 25px;

    color: var(--eval-blue-dark);

    font-size: 30px;

    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   IMAGE DU GRADE
   ========================================================= */

.memorial-grade-image-container {

    display: block;

    width: 100%;

    margin: 25px auto 35px;

    text-align: center;
}


.memorial-grade-image {

    display: block !important;

    width: auto !important;

    height: auto !important;

    max-width: 260px !important;

    max-height: 260px !important;

    margin: 0 auto !important;

    object-fit: contain;

    opacity: 1 !important;

    visibility: visible !important;

}


/* =========================================================
   MESSAGE
   ========================================================= */

.memorial-result-message {

    max-width: 650px;

    margin: 0 auto 30px;

    font-size: 17px;
}


/* =========================================================
   ERREURS
   ========================================================= */

.memorial-eval-error,
.memorial-eval-empty {

    margin: 40px 0;

    padding: 25px 30px;

    background: var(--eval-blue-pale);

    border-left: 4px solid var(--eval-blue);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .memorial-evaluation {

        margin: 45px auto;

    }


    .memorial-evaluation-header {

        padding: 30px 25px;

    }


    .memorial-question {

        padding: 25px 20px;

    }


    .memorial-question h3 {

        font-size: 19px;

    }


    .memorial-evaluation-result {

        padding: 35px 20px;

    }


    .memorial-score-number {

        font-size: 42px;

    }


    .memorial-grade-name {

        font-size: 26px;

    }


    .memorial-grade-image {

        max-width: 210px !important;

        max-height: 210px !important;

    }

}