/**
 * com_confcardio — ossature visuelle des écrans de résultats du moteur de quiz.
 * v1.1.0
 *
 * Règles rapatriées de media/com_communityquiz/css/cj.quiz.min.css (design
 * system .cq-report-page de Community Quiz) pour que le moteur maison reste
 * IDENTIQUE au rendu prod ET AUTONOME après la suppression de CQ.
 * Ne pas reformuler — copie fidèle de l'existant (cf. feedback_portage_fidele).
 *
 * v1.1.0 — Les sélecteurs sont préfixés « #cj-wrapper » comme en prod. Sans ce
 * préfixe, « .cq-report-page .card-header » (0,2,0) perdait contre
 * « #cj-wrapper .card-header » (1,1,0) de custom.scss : les en-têtes de cartes
 * du rapport sortaient en bleu plein au lieu du bleu très pâle de la prod.
 * Ajout des règles absentes de la v1.0.0 : grille d'utilitaires, carte d'envoi
 * par e-mail, boutons, media query mobile.
 *
 * v1.2.0 — Rapatriement de « .no-space-top », dernière classe de nos gabarits
 * qui n'était encore définie que dans cj.quiz.min.css (audit des 157 classes du
 * 2026-07-28) : sans elle, le titre H1 du lecteur reprend sa marge haute par
 * défaut dès que CQ est désinstallé. Sélecteur préfixé « #cj-wrapper » comme le
 * reste du fichier (cf. v1.1.0) ; effet identique, la classe n'est utilisée que
 * dans cette enveloppe.
 */

/* Titre du quiz : collé en haut, comme en prod (CQ : « .no-space-top »). */
#cj-wrapper .no-space-top {
    margin-top: 0;
    padding-top: 0;
}

#cj-wrapper .cq-report-page {
    --cq-surface: #ffffff;
    --cq-surface-soft: #f8fbff;
    --cq-border: #d9e4f2;
    --cq-border-strong: #bfd1e7;
    --cq-text: #1b2430;
    --cq-text-muted: #607086;
    --cq-accent: #2f5f98;
    --cq-accent-soft: #edf4fb;
    --cq-success: #2c7a57;
    --cq-success-soft: #edf8f1;
    --cq-danger: #a04747;
    --cq-danger-soft: #fff1f0;
    --cq-shadow: 0 12px 24px rgba(27, 36, 48, .05);
    color: var(--cq-text);
}

#cj-wrapper .cq-report-page .cq-report-section + .cq-report-section { margin-top: 1.5rem; }

#cj-wrapper .cq-report-page .cq-report-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--cq-border);
    border-radius: .5rem;
    background: linear-gradient(180deg, #f9fbfe 0%, #f2f7fd 100%);
    box-shadow: var(--cq-shadow);
}

#cj-wrapper .cq-report-page .cq-report-eyebrow {
    margin-bottom: .35rem;
    color: var(--cq-text-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#cj-wrapper .cq-report-page .cq-report-toolbar-text {
    margin: .35rem 0 0;
    color: var(--cq-text-muted);
    font-size: .94rem;
    max-width: 42rem;
}

#cj-wrapper .cq-report-page .cq-report-utility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

#cj-wrapper .cq-report-page .cq-report-card,
#cj-wrapper .cq-report-page .email-results-form,
#cj-wrapper .cq-report-page .cq-report-score-card,
#cj-wrapper .cq-report-page .cq-report-question {
    border: 1px solid var(--cq-border);
    border-radius: .5rem;
    background: var(--cq-surface);
    box-shadow: var(--cq-shadow);
    overflow: hidden;
}

#cj-wrapper .cq-report-page .card-header {
    background: var(--cq-surface-soft);
    border-bottom: 1px solid var(--cq-border);
    padding: 1rem 1.1rem;
}

#cj-wrapper .cq-report-page .card-title,
#cj-wrapper .cq-report-page .cq-report-question-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cq-text);
}

#cj-wrapper .cq-report-page .card-body { padding: 1.15rem; }

#cj-wrapper .cq-report-page .btn {
    border-radius: .45rem;
    padding: .65rem .95rem;
    font-weight: 600;
}

#cj-wrapper .cq-report-page .btn-primary {
    background: linear-gradient(180deg, #3f6fa8 0%, #2f5f98 100%);
    border-color: #2f5f98;
    box-shadow: none;
}

#cj-wrapper .cq-report-page .email-results-form .form-group + .form-group { margin-top: 1rem; }
#cj-wrapper .cq-report-page .email-results-form .col-form-label { font-weight: 600; color: var(--cq-text); }
#cj-wrapper .cq-report-page .email-results-form .form-control { min-height: 2.7rem; border-color: var(--cq-border); border-radius: .45rem; }
#cj-wrapper .cq-report-page .email-results-form .alert {
    border-radius: .45rem;
    border: 1px solid var(--cq-border);
    background: var(--cq-accent-soft);
    color: var(--cq-accent);
}

#cj-wrapper .cq-report-page .cq-report-question .card-header { display: flex; align-items: center; gap: .85rem; }
#cj-wrapper .cq-report-page .cq-report-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .45rem;
    background: var(--cq-accent-soft);
    border: 1px solid var(--cq-border-strong);
    color: var(--cq-accent);
    font-weight: 700;
    flex-shrink: 0;
}
#cj-wrapper .cq-report-page .cq-report-question .card-body { color: var(--cq-text-muted); padding-top: 1rem; padding-bottom: 1rem; }

#cj-wrapper .cq-report-page .cq-report-score-card table { margin: 0; }
#cj-wrapper .cq-report-page .cq-report-score-card th { width: 55%; font-weight: 600; color: var(--cq-text); background: transparent; }
#cj-wrapper .cq-report-page .cq-report-score-card td { color: var(--cq-text-muted); font-weight: 600; }
#cj-wrapper .cq-report-page .cq-report-score-card .cq-report-score-highlight { color: var(--cq-accent); font-size: 1rem; font-weight: 700; }

/* « Score obtenu » et « Note sur 20 » : noir simple, sans surcharge
   (demande Roland du 27/07/2026 — seul écart voulu avec le rendu prod). */
#cj-wrapper .cq-report-page .cq-report-score-card .cq-report-score-plain { color: #000000; }

@media (max-width: 767.98px) {
    #cj-wrapper .cq-report-page .cq-report-toolbar { flex-direction: column; padding: 1rem; }
    #cj-wrapper .cq-report-page .card-body,
    #cj-wrapper .cq-report-page .card-header { padding-left: 1rem; padding-right: 1rem; }
}