/* ==========================================================================
   Blocs GEO (réponse rapide, chiffre clé, liste courte) + Fiche de test
   Chargé à la fois sur le site (frontend) et dans l'éditeur Gutenberg,
   pour que la mise en page soit identique en écrivant et en publiant.

   NOTE : le thème définit des styles génériques assez appuyés pour le contenu
   des articles (.article-content p, .article-content ul, .article-content li)
   avec une spécificité CSS supérieure à de simples classes. On force donc les
   propriétés critiques (taille de police, marges, puces) avec !important pour
   garantir que ces blocs gardent toujours leur apparence prévue, quel que soit
   l'ordre de chargement des feuilles de style.
   ========================================================================== */

/* --- Bloc "Réponse rapide" --- */
.mychromebook-quickanswer {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-left: 4px solid var(--color-primary);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-quickanswer__question {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.05rem !important;
    color: var(--color-on-surface);
    margin: 0 0 0.5rem !important;
}
.mychromebook-quickanswer__question i { color: var(--color-primary); flex-shrink: 0; }
.mychromebook-quickanswer__answer {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.6;
    color: var(--color-on-surface);
    opacity: 0.9;
}

/* --- Bloc "Chiffre clé" --- */
.mychromebook-keystat {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
}
.mychromebook-keystat__value {
    font-size: 2.75rem !important;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.1;
    margin: 0 !important;
}
.mychromebook-keystat__label {
    font-size: 1.05rem !important;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0.5rem 0 1rem !important;
}
.mychromebook-keystat__meta {
    font-size: 0.8rem !important;
    color: var(--color-on-surface);
    opacity: 0.6;
    margin: 0 !important;
}
.mychromebook-keystat__meta a { color: inherit; text-decoration: underline; }

/* --- Bloc "Liste courte" --- */
.mychromebook-shortlist {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-shortlist__title {
    font-weight: 800;
    font-size: 1.05rem !important;
    color: var(--color-on-surface);
    margin: 0 0 0.75rem !important;
}
.mychromebook-shortlist__list {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    font-size: 1rem !important;
}
.mychromebook-shortlist__list li {
    position: relative;
    list-style: none !important;
    padding-left: 1.6rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.5;
}
.mychromebook-shortlist__list li:last-child { margin-bottom: 0 !important; }
.mychromebook-shortlist__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background-color: var(--color-primary);
}

/* --- Bloc "Fiche de test" --- */
.mychromebook-review {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1.5rem;
    padding: 1.75rem;
    margin: 2rem 0;
}
.mychromebook-review__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem !important;
}
.mychromebook-review__product {
    font-size: 1.25rem !important;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 !important;
}
.mychromebook-review__score {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    background-color: var(--color-primary);
    color: white;
    font-weight: 900;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.mychromebook-review__score-value { font-size: 1.5rem !important; }
.mychromebook-review__score-max { font-size: 0.85rem !important; opacity: 0.85; }

.mychromebook-review__criteria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem !important;
}
.mychromebook-review__criterion {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mychromebook-review__criterion-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--color-on-surface);
}
.mychromebook-review__criterion-bar {
    height: 6px;
    border-radius: 9999px;
    background-color: var(--color-outline);
    overflow: hidden;
}
.mychromebook-review__criterion-bar-fill {
    height: 100%;
    background-color: var(--color-primary);
    border-radius: 9999px;
}

.mychromebook-review__proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem !important;
}
.mychromebook-review__pros-title,
.mychromebook-review__cons-title {
    font-weight: 800;
    font-size: 0.95rem !important;
    margin: 0 0 0.6rem !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mychromebook-review__pros-title { color: #1a7f37; }
.mychromebook-review__cons-title { color: #c0362c; }
.mychromebook-review__proscons ul {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}
.mychromebook-review__proscons li {
    position: relative;
    list-style: none !important;
    padding-left: 1.5rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 0.92rem !important;
    line-height: 1.5;
    color: var(--color-on-surface);
}
.mychromebook-review__pros li::before { content: "+"; position: absolute; left: 0; font-weight: 800; color: #1a7f37; }
.mychromebook-review__cons li::before { content: "–"; position: absolute; left: 0; font-weight: 800; color: #c0362c; }

.mychromebook-review__verdict {
    font-size: 1rem !important;
    line-height: 1.6;
    color: var(--color-on-surface);
    opacity: 0.9;
    border-top: 1px solid var(--color-outline);
    padding-top: 1.25rem;
    margin: 0 !important;
}

/* --- Encart de vote des lecteurs (rempli dynamiquement en JS) --- */
.mychromebook-review-votes {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-outline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.mychromebook-review-votes__label {
    font-weight: 700;
    font-size: 0.95rem !important;
    color: var(--color-on-surface);
}
.mychromebook-review-votes__average {
    font-weight: 900;
    font-size: 1.15rem !important;
    color: var(--color-primary);
}
.mychromebook-review-votes__count {
    font-size: 0.85rem !important;
    color: var(--color-on-surface);
    opacity: 0.6;
}
.mychromebook-review-votes__stars {
    display: inline-flex;
    gap: 2px;
}
.mychromebook-review-votes__star {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--color-outline);
    line-height: 0;
}
.mychromebook-review-votes__star.is-active,
.mychromebook-review-votes__star:hover,
.mychromebook-review-votes__star:hover ~ .mychromebook-review-votes__star {
    color: #f5a623;
}
.mychromebook-review-votes__thanks {
    font-size: 0.85rem !important;
    color: var(--color-primary);
    font-weight: 700;
}

/* --- Bloc "Sources" --- */
.mychromebook-sources {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-sources__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.05rem !important;
    color: var(--color-on-surface);
    margin: 0 0 0.75rem !important;
}
.mychromebook-sources__title i { color: var(--color-primary); flex-shrink: 0; }
.mychromebook-sources__list {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    font-size: 0.95rem !important;
}
.mychromebook-sources__list li {
    list-style: none !important;
    margin-bottom: 0.5rem !important;
    padding-left: 0 !important;
    line-height: 1.5;
}
.mychromebook-sources__list li:last-child { margin-bottom: 0 !important; }
.mychromebook-sources__list a {
    color: var(--color-primary);
    text-decoration: underline;
    word-break: break-word;
}

/* --- Bloc "Avantages / Inconvénients" --- */
.mychromebook-proscons {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-proscons__title {
    font-weight: 800;
    font-size: 1.1rem !important;
    color: var(--color-on-surface);
    margin: 0 0 1rem !important;
    text-align: center;
}
.mychromebook-proscons__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}
.mychromebook-proscons__pros-title,
.mychromebook-proscons__cons-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.95rem !important;
    margin: 0 0 0.6rem !important;
}
.mychromebook-proscons__pros-title { color: #1a7f37; }
.mychromebook-proscons__cons-title { color: #c0362c; }
.mychromebook-proscons__pros ul,
.mychromebook-proscons__cons ul {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}
.mychromebook-proscons__pros li,
.mychromebook-proscons__cons li {
    position: relative;
    list-style: none !important;
    padding-left: 1.5rem !important;
    margin-bottom: 0.4rem !important;
    font-size: 0.95rem !important;
    line-height: 1.5;
    color: var(--color-on-surface);
}
.mychromebook-proscons__pros li::before { content: "+"; position: absolute; left: 0; font-weight: 800; color: #1a7f37; }
.mychromebook-proscons__cons li::before { content: "–"; position: absolute; left: 0; font-weight: 800; color: #c0362c; }

/* Rendu simplifié dans l'éditeur Gutenberg (pas besoin des variables CSS du thème,
   on retombe sur des couleurs proches pour un aperçu fidèle) */
.block-editor-page .mychromebook-quickanswer,
.block-editor-page .mychromebook-keystat,
.block-editor-page .mychromebook-shortlist,
.block-editor-page .mychromebook-review,
.block-editor-page .mychromebook-sources,
.block-editor-page .mychromebook-proscons {
    background-color: #f8f9fa;
    border-color: #dadce0;
}