/* ══════════════════════════════════════════════════════════════
   LMQ Tally — Results page styles
   Compatible Oxygen Builder (tout préfixé lmq-)
   ══════════════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --lmq-font:        inherit;
    --lmq-radius:      8px;
    --lmq-shadow:      0 2px 12px rgba(0,0,0,.08);

    /* Couleurs Levimensa par quadrant */
    /* Pompier stressé — rouge-orange : urgence, tension */
    --lmq-responder-bg:       #fde8e3;
    --lmq-responder-accent:   #eb583a;

    /* Productiviste stressé — beige-jaune : effort, rigidité */
    --lmq-implementer-bg:     #fff3e0;
    --lmq-implementer-accent: #f59b41;

    /* Serein stagnant — turquoise clair : calme, manque d'élan */
    --lmq-visionary-bg:       #e6f4f4;
    --lmq-visionary-accent:   #90c3c2;

    /* Productivité sereine — turquoise foncé : équilibre, maîtrise */
    --lmq-captain-bg:         #e8eeee;
    --lmq-captain-accent:     #516b6a;
}

/* ── Conteneur principal ── */
.lmq-results {
    font-family: var(--lmq-font);
    max-width: 680px;
    margin: 0 auto;
}

/* ── Message de bienvenue ── */
.lmq-greeting {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
}

/* ── Résumé ── */
.lmq-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.lmq-quadrant-badge {
    flex: 1;
    min-width: 200px;
    padding: 18px 24px;
    border-radius: var(--lmq-radius);
    border-left: 5px solid currentColor;
}

.lmq-quadrant-badge .lmq-quadrant-label {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}

/* Couleurs par quadrant */
.lmq-q--responder   .lmq-quadrant-badge,
.lmq-quadrant-badge.lmq-q--responder   { background: var(--lmq-responder-bg);   color: var(--lmq-responder-accent); }
.lmq-q--implementer .lmq-quadrant-badge,
.lmq-quadrant-badge.lmq-q--implementer { background: var(--lmq-implementer-bg); color: var(--lmq-implementer-accent); }
.lmq-q--visionary   .lmq-quadrant-badge,
.lmq-quadrant-badge.lmq-q--visionary   { background: var(--lmq-visionary-bg);   color: var(--lmq-visionary-accent); }
.lmq-q--captain     .lmq-quadrant-badge,
.lmq-quadrant-badge.lmq-q--captain     { background: var(--lmq-captain-bg);     color: var(--lmq-captain-accent); }

/* ── Scores ── */
.lmq-scores {
    display: flex;
    gap: 16px;
}

.lmq-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: var(--lmq-radius);
    padding: 14px 20px;
    box-shadow: var(--lmq-shadow);
    min-width: 90px;
}

.lmq-score-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 6px;
}

.lmq-score-value {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.lmq-score-max {
    font-size: 13px;
    color: #bbb;
}

/* ── Matrice ── */
.lmq-matrix-wrap {
    margin: 30px 0;
    position: relative;
}

.lmq-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    max-width: 300px;
}

.lmq-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s;
}

.lmq-cell--responder   { background: var(--lmq-responder-bg); }
.lmq-cell--implementer { background: var(--lmq-implementer-bg); }
.lmq-cell--visionary   { background: var(--lmq-visionary-bg); }
.lmq-cell--captain     { background: var(--lmq-captain-bg); }

.lmq-cell--active.lmq-cell--responder   { background: var(--lmq-responder-accent);   border-color: var(--lmq-responder-accent); }
.lmq-cell--active.lmq-cell--implementer { background: var(--lmq-implementer-accent); border-color: var(--lmq-implementer-accent); }
.lmq-cell--active.lmq-cell--visionary   { background: var(--lmq-visionary-accent);   border-color: var(--lmq-visionary-accent); }
.lmq-cell--active.lmq-cell--captain     { background: var(--lmq-captain-accent);     border-color: var(--lmq-captain-accent); }

.lmq-cell-dot {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    display: block;
}

.lmq-matrix-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 6px 0;
}

.lmq-matrix-quadrant-labels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 300px;
    gap: 4px;
    margin-top: 12px;
}

.lmq-mql {
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    text-align: center;
}

.lmq-mql--responder   { background: var(--lmq-responder-bg);   color: var(--lmq-responder-accent); }
.lmq-mql--implementer { background: var(--lmq-implementer-bg); color: var(--lmq-implementer-accent); }
.lmq-mql--visionary   { background: var(--lmq-visionary-bg);   color: var(--lmq-visionary-accent); }
.lmq-mql--captain     { background: var(--lmq-captain-bg);     color: var(--lmq-captain-accent); }

/* ── Description ── */
.lmq-description {
    margin: 30px 0;
    padding: 24px 28px;
    background: #fafafa;
    border-radius: var(--lmq-radius);
    border: 1px solid #ebebeb;
}

.lmq-description-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #1a1a2e;
}

.lmq-description-body {
    font-size: 14px;
    line-height: 1.9;
    color: #555;
}

/* ── Bloc PDF ── */
.lmq-pdf-block {
    margin: 30px 0;
    padding: 24px 28px;
    background: #f0f4ff;
    border-radius: var(--lmq-radius);
    border: 1px solid #c5d3ff;
}

.lmq-pdf-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1a1a2e;
}

.lmq-pdf-intro {
    font-size: 14px;
    color: #555;
    margin: 0 0 18px;
}

.lmq-pdf-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lmq-email-input {
    flex: 1;
    min-width: 220px;
    padding: 11px 16px;
    font-size: 14px;
    border: 1px solid #c5d3ff;
    border-radius: 6px;
    outline: none;
    transition: border-color .2s;
}

.lmq-email-input:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74,108,247,.12);
}

/* ── Bouton ── */
.lmq-btn {
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    white-space: nowrap;
}

.lmq-btn--primary {
    background: #4a6cf7;
    color: #fff;
}

.lmq-btn--primary:hover   { background: #3b5bdb; }
.lmq-btn--primary:disabled { opacity: .6; cursor: not-allowed; }

/* ── Messages ── */
.lmq-msg {
    margin-top: 10px;
    font-size: 13px;
    min-height: 20px;
}

.lmq-msg--success { color: #1b5e20; }
.lmq-msg--error   { color: #c62828; }

/* ── Notices ── */
.lmq-notice {
    padding: 14px 18px;
    border-radius: var(--lmq-radius);
    font-size: 14px;
}

.lmq-notice--info    { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.lmq-notice--warning { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .lmq-summary      { flex-direction: column; }
    .lmq-pdf-form-row { flex-direction: column; }
    .lmq-btn          { width: 100%; text-align: center; }
    .lmq-scores       { justify-content: center; }
}