/* ==========================================================================
   Composant « Review » — encart « Notre avis » (MODULE OPTIONNEL).
   Rendu identique à l'outil rédacteur (Outils → Review). Piloté par tokens →
   s'adapte à toutes les variantes + dark mode ; les variantes « flat » (sans
   --radius / --shadow-card) dégradent proprement en angles nets / sans ombre.
   Chargé uniquement sur les articles contenant .review-card (cf. inc/encart-avis.php).
   Suppression du module : voir l'en-tête de inc/encart-avis.php.
   ========================================================================== */
.review-card { margin: 2rem 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-alt); overflow: hidden; box-shadow: var(--shadow-card); }
.review-card__head { margin: 0; padding: 0.7rem 1.3rem; background: var(--color-accent); color: var(--color-on-accent, var(--color-text-on-accent, #fff)); font-family: var(--font-title); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.review-card__grid { padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }

/* Colonne verdict (fond accent) */
.review-card__verdict { flex: 1 1 220px; padding: 1.1rem; border-radius: var(--radius); background: var(--color-accent); color: var(--color-on-accent, var(--color-text-on-accent, #fff)); display: flex; align-items: flex-start; }
.review-card__verdict-label { margin: 0 0 0.6rem; font-family: var(--font-title); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.review-card__score { display: flex; align-items: flex-end; gap: 0.25rem; line-height: 0.9; margin: 0 0 0.75rem; }
.review-card__score strong { font-family: var(--font-title); font-size: 3.6rem; font-weight: 800; letter-spacing: -0.08em; }
.review-card__score span { font-size: 1.25rem; font-weight: 700; opacity: 0.9; }
.review-card__verdict-text { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--color-on-accent, var(--color-text-on-accent, #fff)); opacity: 0.92; }

/* Colonne notes détaillées */
.review-card__notes { flex: 1.35 1 300px; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.review-card__notes-label { margin: 0 0 0.85rem; font-family: var(--font-title); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.review-card__criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.review-card__crit-head { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.28rem; font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.review-card__crit-val { color: var(--color-text-muted); }
.review-card__bar { display: block; height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.review-card__bar-fill { display: block; height: 6px; border-radius: 999px; background: var(--color-accent); }

/* Avantages / inconvénients */
.review-card__proscons { flex: 0 0 100%; padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.review-card__col { flex: 1 1 250px; }
.review-card__col-label { margin: 0 0 0.45rem; font-family: var(--font-title); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.review-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.22rem; font-size: 0.92rem; line-height: 1.32; }
.review-card__list li { position: relative; padding-left: 1.2rem; }
.review-card__list li::before { position: absolute; left: 0; font-weight: 800; }
.review-card__list--pro li::before { content: "\2713"; color: var(--color-accent); }
.review-card__list--con li::before { content: "\2013"; color: var(--color-text-muted); }

/* Élargissement desktop : l'encart sort de la colonne de lecture pour un format
   généreux (comme la maquette). Reste pleine largeur (dans le flux) en mobile. */
@media (min-width: 900px) {
	.review-card { width: min(960px, 92vw); margin-left: 50%; transform: translateX(-50%); }
}