/* ==========================================================================
   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; }

/* --- Bloc "Carte d'achat" (lien affilié) --- */
.mychromebook-buycard {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1.5rem;
    overflow: hidden;
    margin: 1.5rem 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mychromebook-buycard__media {
    position: relative;
    flex: 0 0 200px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}
.mychromebook-buycard__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}
.mychromebook-buycard__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background-color: #c0362c;
    color: white;
    font-size: 0.75rem !important;
    font-weight: 800;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    z-index: 1;
}
.mychromebook-buycard__body {
    flex: 1;
    min-width: 220px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.mychromebook-buycard__name {
    font-size: 1.15rem !important;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 0.75rem !important;
    line-height: 1.35;
}
.mychromebook-buycard__highlights {
    margin: 0 0 1rem !important;
    padding-left: 0 !important;
    list-style: none !important;
}
.mychromebook-buycard__highlights li {
    position: relative;
    list-style: none !important;
    padding-left: 1.5rem !important;
    margin-bottom: 0.35rem !important;
    font-size: 0.9rem !important;
    line-height: 1.5;
    color: var(--color-on-surface);
    opacity: 0.85;
}
.mychromebook-buycard__highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 800;
    color: #1a7f37;
}
.mychromebook-buycard__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.mychromebook-buycard__price {
    font-size: 1.75rem !important;
    font-weight: 900;
    color: var(--color-on-surface);
}
.mychromebook-buycard__old-price {
    font-size: 1rem !important;
    color: var(--color-on-surface);
    opacity: 0.5;
    text-decoration: line-through;
}
.mychromebook-buycard__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: auto;
}
.mychromebook-buycard__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 800 !important;
    font-size: 1rem !important;
    padding: 0.85rem 1.5rem;
    border-radius: 9999px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.mychromebook-buycard__cta:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}
.mychromebook-buycard__cta i { width: 20px; height: 20px; flex-shrink: 0; }
.mychromebook-buycard__disclaimer {
    font-size: 0.72rem !important;
    color: var(--color-on-surface);
    opacity: 0.45;
    margin: 0.6rem 0 0 !important;
}

/* --- Cartouche d'aperçu de lien (URL interne ou externe collée seule sur sa
   ligne). Placé ici (plutôt que uniquement dans single.php) pour que le rendu
   soit identique dans l'éditeur Gutenberg et sur le site publié. --- */
.wp-embed,
.block-editor-page .wp-embed {
    max-width: 480px;
    margin: 2rem auto !important;
    background-color: var(--color-surface-container);
    border: 1px solid var(--color-outline);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    text-align: left;
    padding: 0 !important;
}
.wp-embed-featured-image {
    margin: 0 !important;
    line-height: 0;
}
.wp-embed-featured-image img {
    width: 100%;
    display: block;
    border-radius: 0 !important;
}
.wp-embed-heading {
    margin: 1.25rem 1.5rem 0.5rem !important;
    font-size: 1.15rem !important;
}
.wp-embed-heading a {
    color: var(--color-on-surface);
    font-weight: 800;
    text-decoration: none;
}
.wp-embed-heading a:hover { color: var(--color-primary); }
.wp-embed-excerpt {
    margin: 0 1.5rem 1.25rem !important;
}
.wp-embed-excerpt p {
    font-size: 0.95rem !important;
    line-height: 1.6;
    color: var(--color-on-surface);
    opacity: 0.75;
    margin: 0 !important;
}
.wp-embed-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--color-outline);
    background-color: var(--color-surface);
}
.wp-embed-site-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-on-surface);
    text-decoration: none;
    opacity: 0.85;
}
.wp-embed-site-icon {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    margin: 0 !important;
}
.wp-embed-comments,
.wp-embed-share {
    color: var(--color-on-surface);
    opacity: 0.6;
    text-decoration: none;
}
.wp-embed-comments:hover,
.wp-embed-share:hover {
    color: var(--color-primary);
    opacity: 1;
}

/* --- Bloc "FAQ" --- */
.mychromebook-faq {
    margin: 1.5rem 0;
}
.mychromebook-faq__title {
    font-size: 1.3rem !important;
    font-weight: 800;
    color: var(--color-on-surface);
    margin: 0 0 1rem !important;
}
.mychromebook-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mychromebook-faq__item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
.mychromebook-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--color-on-surface);
}
.mychromebook-faq__question::-webkit-details-marker { display: none; }
.mychromebook-faq__chevron {
    transition: transform 0.2s ease-in-out;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}
.mychromebook-faq__item[open] .mychromebook-faq__chevron {
    transform: rotate(180deg);
}
.mychromebook-faq__answer {
    margin: 0.75rem 0 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.6;
    color: var(--color-on-surface);
    opacity: 0.8;
}

/* --- Bloc "Code" --- */
.mychromebook-code {
    margin: 1.5rem 0;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #1e2227;
    border: 1px solid #333a42;
}
.mychromebook-code__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    background-color: #15181c;
    border-bottom: 1px solid #333a42;
}
.mychromebook-code__language {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.75rem !important;
    font-weight: 700;
    color: #9aa4ad;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mychromebook-code__copy,
.mychromebook-code__copy-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: #9aa4ad;
    font-size: 0.8rem !important;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease-in-out;
}
.mychromebook-code__copy:hover {
    background-color: #2a2f36;
    color: #ffffff;
}
.mychromebook-code__copy i,
.mychromebook-code__copy-preview i {
    width: 14px;
    height: 14px;
}
.mychromebook-code__copy.is-copied {
    color: #52cf95;
}
.mychromebook-code__pre {
    margin: 0 !important;
    padding: 1.25rem !important;
    overflow-x: auto;
    background: transparent !important;
}
.mychromebook-code__pre code {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.9rem !important;
    line-height: 1.6;
    color: #c4cad0;
    background: none !important;
    padding: 0 !important;
    white-space: pre;
}
.mychromebook-code__textarea {
    font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
    color: #c4cad0 !important;
    background-color: #1e2227 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* 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,
.block-editor-page .mychromebook-buycard--edit,
.block-editor-page .mychromebook-faq--edit {
    background-color: #f8f9fa;
    border-color: #dadce0;
}

/* ==========================================================================
   NOUVEAUX BLOCS (v2) : citation d'expert, en bref, tutoriel, fiche technique,
   comparatif, définition, vérifié. Mêmes conventions que ci-dessus (variables
   de couleur du thème, !important sur les propriétés critiques pour rester
   prioritaire sur .article-content).
   ========================================================================== */

/* --- Bloc "Citation d'expert" --- */
.mychromebook-expertquote {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-left: 4px solid var(--color-primary);
    border-radius: 1rem;
    padding: 1.5rem 1.5rem 1.25rem;
    margin: 1.5rem 0;
}
.mychromebook-expertquote__icon {
    color: var(--color-primary);
    opacity: 0.35;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.25rem;
}
.mychromebook-expertquote__text {
    border: 0 !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1.55;
    font-style: italic;
    font-weight: 500;
    color: var(--color-on-surface);
}
.mychromebook-expertquote__cite {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.mychromebook-expertquote__author {
    font-weight: 800;
    color: var(--color-on-surface);
    text-decoration: none;
}
a.mychromebook-expertquote__author:hover { text-decoration: underline; color: var(--color-primary); }
.mychromebook-expertquote__role {
    font-size: 0.85rem;
    color: var(--color-on-surface);
    opacity: 0.7;
}

/* --- Bloc "En bref / Points clés" --- */
.mychromebook-tldr {
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-tldr__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.1rem !important;
    color: var(--color-primary-dark);
    margin: 0 0 0.75rem !important;
}
.mychromebook-tldr__title i { color: var(--color-primary-dark); flex-shrink: 0; }
.mychromebook-tldr__list {
    margin: 0 !important;
    padding-left: 1.25rem !important;
    list-style: none !important;
    font-size: 1.02rem !important;
}
.mychromebook-tldr__list li {
    position: relative;
    margin: 0 0 0.4rem !important;
    padding-left: 1.25rem !important;
    color: var(--color-on-surface);
}
.mychromebook-tldr__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--color-primary);
}
/* En mode sombre, le fond "primary-light" peut manquer de contraste : on
   bascule sur le conteneur standard. */
.dark .mychromebook-tldr { background-color: var(--color-surface-container); }
.dark .mychromebook-tldr__title { color: var(--color-primary); }
.dark .mychromebook-tldr__title i { color: var(--color-primary); }

/* --- Bloc "Tutoriel étape par étape" --- */
.mychromebook-howto {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-howto__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.15rem !important;
    color: var(--color-on-surface);
    margin: 0 0 0.25rem !important;
}
.mychromebook-howto__title i { color: var(--color-primary); flex-shrink: 0; }
.mychromebook-howto__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem !important;
    color: var(--color-on-surface);
    opacity: 0.7;
    margin: 0 0 1rem !important;
}
.mychromebook-howto__meta i { width: 1rem; height: 1rem; }
.mychromebook-howto__steps {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    counter-reset: mcb-howto;
}
.mychromebook-howto__step {
    position: relative;
    counter-increment: mcb-howto;
    padding-left: 3rem !important;
    margin: 0 0 1.1rem !important;
    min-height: 2rem;
}
.mychromebook-howto__step::before {
    content: counter(mcb-howto);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
}
.mychromebook-howto__step-title {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-on-surface);
    margin-bottom: 0.15rem;
}
.mychromebook-howto__step-text {
    display: block;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-on-surface);
    opacity: 0.9;
}

/* --- Bloc "Fiche technique / Specs" --- */
.mychromebook-specs {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}
.mychromebook-specs__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.1rem !important;
    color: var(--color-on-surface);
    margin: 0 0 0.75rem !important;
}
.mychromebook-specs__title i { color: var(--color-primary); flex-shrink: 0; }
.mychromebook-specs__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
}
.mychromebook-specs__table th,
.mychromebook-specs__table td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--color-outline);
    vertical-align: top;
    color: var(--color-on-surface);
}
.mychromebook-specs__table th[scope="row"] {
    font-weight: 600;
    width: 45%;
    opacity: 0.85;
}
.mychromebook-specs__table tr:last-child th,
.mychromebook-specs__table tr:last-child td { border-bottom: 0; }
.mychromebook-specs__aue th,
.mychromebook-specs__aue td {
    background-color: var(--color-primary-light);
    font-weight: 700;
}
.mychromebook-specs__aue th {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary-dark);
    opacity: 1;
}
.mychromebook-specs__aue i { width: 1rem; height: 1rem; }
.dark .mychromebook-specs__aue th,
.dark .mychromebook-specs__aue td { background-color: var(--color-surface-container); }
.dark .mychromebook-specs__aue th { color: var(--color-primary); }

/* --- Bloc "Tableau comparatif" --- */
.mychromebook-compare {
    margin: 1.5rem 0;
}
.mychromebook-compare__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.1rem !important;
    color: var(--color-on-surface);
    margin: 0 0 0.75rem !important;
}
.mychromebook-compare__title i { color: var(--color-primary); flex-shrink: 0; }
.mychromebook-compare__scroll { overflow-x: auto; }
.mychromebook-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 480px;
    border: 1px solid var(--color-outline);
    border-radius: 1rem;
    overflow: hidden;
}
.mychromebook-compare__table th,
.mychromebook-compare__table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-outline);
    border-right: 1px solid var(--color-outline);
    text-align: left;
    color: var(--color-on-surface);
    vertical-align: top;
}
.mychromebook-compare__table thead th {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}
.mychromebook-compare__table tbody th[scope="row"] {
    background-color: var(--color-surface);
    font-weight: 700;
    opacity: 0.95;
}
.mychromebook-compare__table th:last-child,
.mychromebook-compare__table td:last-child { border-right: 0; }
.mychromebook-compare__table tr:last-child th,
.mychromebook-compare__table tr:last-child td { border-bottom: 0; }

/* --- Bloc "Définition / Glossaire" --- */
.mychromebook-definition {
    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-definition__term {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    font-size: 1.1rem !important;
    color: var(--color-primary-dark);
    margin: 0 0 0.4rem !important;
}
.mychromebook-definition__term i { color: var(--color-primary); flex-shrink: 0; }
.mychromebook-definition__term dfn { font-style: normal; }
.dark .mychromebook-definition__term { color: var(--color-primary); }
.mychromebook-definition__def {
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.6;
    color: var(--color-on-surface);
    opacity: 0.92;
}
.mychromebook-definition__def p { margin: 0 !important; }

/* --- Bloc "Vérifié le / par" --- */
.mychromebook-verified {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 9999px;
    padding: 0.5rem 1rem !important;
    margin: 1.5rem 0 !important;
    font-size: 0.9rem !important;
    color: var(--color-on-surface);
}
.mychromebook-verified i { color: var(--color-primary); width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.mychromebook-verified__text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
    font-size: 0.9rem !important;
}

/* --- Mode édition des nouveaux blocs : neutralise fonds/couleurs pour une
       saisie lisible (le rendu final reste celui défini plus haut). --- */
.mychromebook-tldr--edit,
.mychromebook-howto--edit,
.mychromebook-specs--edit,
.mychromebook-compare--edit,
.mychromebook-verified--edit {
    background-color: transparent !important;
    border: 1px dashed var(--color-outline) !important;
    border-radius: 0.75rem;
    padding: 1rem;
    display: block !important;
}

/* --- Comparatif : mode "empilé" responsive (mobile ≤ 640px) --- */
@media (max-width: 640px) {
    .mychromebook-compare__scroll { overflow-x: visible; }
    .mychromebook-compare__table {
        min-width: 0;
        display: block;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .mychromebook-compare__table thead { display: none; }
    .mychromebook-compare__table tbody { display: block; }
    .mychromebook-compare__table tbody tr {
        display: block;
        border: 1px solid var(--color-outline);
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        overflow: hidden;
    }
    .mychromebook-compare__table tbody th[scope="row"] {
        display: block;
        width: auto;
        background-color: var(--color-primary);
        color: #fff;
        border: 0;
        font-size: 1rem;
        opacity: 1;
    }
    .mychromebook-compare__table tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        border-top: 1px solid var(--color-outline);
    }
    .mychromebook-compare__table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-weight: 700;
        color: var(--color-on-surface);
        opacity: 0.65;
        text-align: left;
    }
    .mychromebook-compare__table tbody td:empty { display: none; }
    .mychromebook-compare__table tbody td { text-align: right; }
}

/* --- Bloc "Tableau personnalisable" --- */
.mcb-table { margin: 1.75rem 0; }
.mcb-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; border: 1px solid var(--color-outline); }
.mcb-table table { width: 100%; border-collapse: collapse; background: var(--color-surface-container); }
.mcb-table th, .mcb-table td { border: 1px solid var(--color-outline); padding: 10px 14px; text-align: left; vertical-align: top; color: var(--color-on-surface); }
.mcb-table thead th { background: var(--color-primary); color: #fff; font-weight: 700; }
.mcb-table tbody tr:nth-child(even) td { background: var(--color-surface); }
.mcb-table__caption { text-align: center; font-size: .85rem; opacity: .7; margin-top: .6rem; color: var(--color-on-surface); }
/* Rendu dans l'éditeur */
.mcb-table__edit { width: 100%; border-collapse: collapse; margin-top: 4px; }
.mcb-table__edit th, .mcb-table__edit td { border: 1px solid var(--color-outline, #dcdcde); padding: 8px 10px; min-width: 60px; }
.mcb-table__edit th { background: rgba(0, 0, 0, .05); font-weight: 700; }
/* Mode empilé responsive (mobile) quand un en-tête est présent */
@media (max-width: 640px) {
    .mcb-table--stack .mcb-table__scroll { overflow-x: visible; border: 0; }
    .mcb-table--stack table { background: transparent; }
    .mcb-table--stack thead { display: none; }
    .mcb-table--stack tbody, .mcb-table--stack tr, .mcb-table--stack td { display: block; width: 100%; }
    .mcb-table--stack tr { border: 1px solid var(--color-outline); border-radius: 10px; margin-bottom: 12px; overflow: hidden; background: var(--color-surface-container); }
    .mcb-table--stack td { border: 0; border-top: 1px solid var(--color-outline); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: right; }
    .mcb-table--stack tbody tr:nth-child(even) td { background: transparent; }
    .mcb-table--stack td::before { content: attr(data-label); font-weight: 700; opacity: .65; text-align: left; flex-shrink: 0; }
    .mcb-table--stack td:first-child { border-top: 0; }
    .mcb-table--stack td:empty { display: none; }
}

/* --- Bloc "Soutien Patreon" --- */
.mcb-patreon {
    --mcb-coral: #F96854;
    margin: 2.25rem 0;
    padding: 30px 28px;
    border-radius: 22px;
    text-align: center;
    color: var(--color-on-surface);
    background:
        radial-gradient(120% 120% at 50% -10%, rgba(249,104,84,.14), transparent 60%),
        var(--color-surface-container);
    border: 1px solid rgba(249,104,84,.30);
}
.mcb-patreon__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--mcb-coral); color: #fff;
    font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    padding: 6px 14px; border-radius: 999px;
}
.mcb-patreon__badge svg { width: 14px; height: 14px; fill: #fff; }
.mcb-patreon__title {
    font-size: 1.65rem; font-weight: 800; line-height: 1.2;
    margin: 16px 0 10px; color: var(--color-on-surface);
}
.mcb-patreon__msg { max-width: 580px; margin: 0 auto 18px; opacity: .85; line-height: 1.65; }
.mcb-patreon__perks {
    list-style: none; margin: 0 auto 22px; padding: 0;
    max-width: 440px; text-align: left; display: inline-block;
}
.mcb-patreon__perks li { display: flex; align-items: center; gap: 10px; margin: 9px 0; font-weight: 500; }
.mcb-patreon__check { width: 20px; height: 20px; fill: var(--mcb-coral); flex-shrink: 0; }
.mcb-patreon__btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--mcb-coral); color: #fff;
    font-weight: 800; font-size: 1.05rem;
    padding: 14px 30px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 8px 22px rgba(249,104,84,.38);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mcb-patreon__btn:hover { background: #e5503d; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(249,104,84,.48); }
.mcb-patreon__btn svg { width: 22px; height: 22px; fill: #fff; }
.mcb-patreon__note { font-size: .78rem; opacity: .6; margin: 14px 0 0; }