/**
 * Styles pour le widget DIX Product Plus
 *
 * Widget de comparaison des formulations DIX vs Concurrents
 *
 * @package Widget_Dix_Elementor
 * @subpackage Widgets\Dix_Product_Plus
 */

/* ==========================================================================
   Container principal
   ========================================================================== */

.dpp-comparison-widget {
	font-family: inherit;
	line-height: 1.5;
}

/* ==========================================================================
   En-tête
   ========================================================================== */

.dpp-header {
	margin-bottom: 20px;
}

.dpp-header-title {
	margin: 0 0 15px 0;
	font-size: 1.5em;
	font-weight: 600;
	color: #333;
}

/* ==========================================================================
   Sélecteur de marque
   ========================================================================== */

.dpp-brand-selector {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.dpp-brand-selector label {
	font-weight: 500;
	color: #333;
	white-space: nowrap;
}

.dpp-brand-selector select {
	padding: 10px 35px 10px 15px;
	font-size: 1em;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #fff;
	color: #333;
	cursor: pointer;
	min-width: 200px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dpp-brand-selector select:hover {
	border-color: #999;
}

.dpp-brand-selector select:focus {
	outline: none;
	border-color: #1976d2;
	box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

/* ==========================================================================
   Produits nécessaires
   ========================================================================== */

.dpp-products-needed {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
	padding: 12px 16px;
	background-color: #fff3e0;
	border-radius: 6px;
	border-left: 4px solid #ff9800;
}

.dpp-products-needed-value {
	font-size: 1.5em;
	font-weight: 700;
	color: #e65100;
}

.dpp-products-needed-text {
	color: #666;
	font-size: 0.95em;
}

/* ==========================================================================
   Tableau de comparaison
   ========================================================================== */

.dpp-comparison-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	table-layout: fixed;
}

/* En-tête du tableau */
.dpp-comparison-table thead th {
	padding: 14px 16px;
	background-color: #f5f5f5;
	color: #333;
	font-weight: 600;
	text-align: left;
	border-bottom: 2px solid #e0e0e0;
}

.dpp-comparison-table thead th.dpp-col-dix,
.dpp-comparison-table thead th.dpp-col-competitor {
	text-align: center;
}

/* ==========================================================================
   En-têtes multi-lignes (Marque, Produit, Note, Prix, Clés)
   ========================================================================== */

/* Label de la première colonne dans le thead */
.dpp-header-label {
	font-size: 0.85em;
	font-weight: 500;
	color: #666;
	font-style: italic;
}

/* Ligne Marque */
.dpp-header-brand {
	background-color: #f8f9fa !important;
}

.dpp-header-brand th {
	padding: 10px 16px !important;
	border-bottom: 1px solid #e0e0e0 !important;
}

.dpp-brand-name {
	font-size: 0.9em;
	font-weight: 700;
	color: #1976d2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Ligne Produit */
.dpp-header-product {
	background-color: #fff !important;
}

.dpp-header-product th {
	padding: 10px 16px !important;
	border-bottom: 1px solid #e0e0e0 !important;
}

.dpp-header-product .dpp-product-name {
	font-size: 0.95em;
	font-weight: 600;
	color: #333;
}

/* Ligne Note */
.dpp-header-score {
	background-color: #f8f9fa !important;
}

.dpp-header-score th {
	padding: 12px 16px !important;
	border-bottom: 1px solid #e0e0e0 !important;
}

/* Ligne Prix */
.dpp-header-price {
	background-color: #fff !important;
}

.dpp-header-price th {
	padding: 10px 16px !important;
	border-bottom: 1px solid #e0e0e0 !important;
}

.dpp-header-price .dpp-product-prices {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/* Badge prix/dose avec gradient de couleur (vert = meilleur, rouge = pire) */
.dpp-header-price .dpp-price-dose {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.95em;
	/* Les couleurs bg et text sont définies inline via style="" */
}

.dpp-header-price .dpp-price-box {
	color: #666;
	font-size: 0.8em;
}

/* Ligne Ingrédients clés */
.dpp-header-keys {
	background-color: #f8f9fa !important;
}

.dpp-header-keys th {
	padding: 10px 16px !important;
	border-bottom: 2px solid #e0e0e0 !important;
}

/* Les largeurs sont définies dynamiquement via .dpp-cols-X plus bas */

/* Corps du tableau */
.dpp-comparison-table tbody tr {
	transition: background-color 0.2s;
}

.dpp-comparison-table tbody tr:nth-child(even) {
	background-color: #fafafa;
}

.dpp-comparison-table tbody tr:hover {
	background-color: #f0f7ff;
}

.dpp-comparison-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #e8e8e8;
	vertical-align: top; /* Alignement en haut pour doses et types */
}

.dpp-comparison-table tbody tr:last-child td {
	border-bottom: none;
}

/* Colonnes */
.dpp-col-dix,
.dpp-col-competitor {
	text-align: center;
}

/* ==========================================================================
   Nom d'ingrédient et badges
   ========================================================================== */

.dpp-ingredient-name {
	font-weight: 500;
	color: #333;
	display: block;
}

.dpp-row-key .dpp-ingredient-name {
	font-weight: 600;
}

/* Type d'ingrédient - NOUVEAU DESIGN (couleur neutre + note en rond coloré) */
.dpp-ingredient-type {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8em;
	font-weight: 500;
	color: #555 !important; /* Couleur neutre pour tous les noms de types */
	margin-top: 2px;
	font-style: normal;
}

/* Liste de types multiples */
.dpp-types-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 4px;
}

.dpp-types-list .dpp-ingredient-type {
	margin-top: 0;
}

/* Note du type dans un petit cercle coloré (couleur définie inline via type_color) */
.dpp-type-note-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 0.75em;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	flex-shrink: 0;
	background-color: #0073aa; /* Couleur par défaut si pas de style inline */
}

/* Ancien format de note (pour rétrocompatibilité, masqué) */
.dpp-type-note {
	display: none;
}

/* Ligne des prix */
.dpp-price-row {
	background-color: #fafafa;
}

.dpp-price-row th {
	padding: 8px 12px !important;
	border-bottom: 2px solid #e0e0e0;
}

/* Prix produits */
.dpp-product-prices {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
}

.dpp-price-dose {
	font-size: 0.9em;
	font-weight: 600;
	color: #2e7d32;
	background-color: #e8f5e9;
	padding: 2px 8px;
	border-radius: 10px;
}

.dpp-price-box {
	font-size: 0.75em;
	font-weight: 400;
	color: #666;
}

/* Badge exclusif */
.dpp-exclusive-badge {
	display: inline-block;
	margin-left: 0;
	margin-top: 4px;
	padding: 2px 8px;
	font-size: 0.7em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #fff;
	background-color: #1976d2;
	border-radius: 3px;
}

/* ==========================================================================
   Quantités et unités
   ========================================================================== */

/* Ligne de quantité séparée du type */
.dpp-quantity-line {
	margin-bottom: 6px;
}

.dpp-quantity {
	font-weight: 600;
	font-size: 1.15em;
	color: #333;
}

.dpp-unit {
	font-weight: 400;
	font-size: 0.85em;
	color: #666;
	margin-left: 2px;
}

.dpp-absent {
	color: #bdbdbd;
	font-style: italic;
}

/* ==========================================================================
   Indicateurs de supériorité - NOUVEAU DESIGN (point vert)
   ========================================================================== */

/* Point indicateur de meilleur dosage */
.dpp-winner-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background-color: #2e7d32;
	border-radius: 50%;
	margin-left: 6px;
	vertical-align: middle;
	box-shadow: 0 0 4px rgba(46, 125, 50, 0.4);
}

/* DIX gagne - PAS de fond coloré, juste le texte en gras */
.dpp-winner-dix .dpp-quantity {
	font-weight: 700;
}

/* Concurrent gagne - PAS de fond coloré, juste le texte */
.dpp-winner-competitor .dpp-quantity {
	font-weight: 600;
}

/* Ligne exclusive DIX - PAS de fond spécial */
.dpp-row-exclusive {
	/* Pas de background spécial pour éviter les incohérences */
}

.dpp-row-exclusive:nth-child(even) {
	/* Pas de background spécial */
}

/* ==========================================================================
   Section Additifs
   ========================================================================== */

.dpp-additives-section {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 2px dashed #e0e0e0;
}

.dpp-additives-title {
	margin: 0 0 15px 0;
	font-size: 1.1em;
	font-weight: 600;
	color: #c62828;
}

.dpp-row-additive {
	background-color: #fff8e1 !important;
}

.dpp-row-additive:nth-child(even) {
	background-color: #fff3e0 !important;
}

.dpp-row-additive .dpp-ingredient-name {
	color: #ff8f00;
}

.dpp-additive-qty {
	color: #ff8f00;
}

/* ==========================================================================
   Colonnes dynamiques
   ========================================================================== */

/* Largeurs adaptatives selon le nombre de colonnes */
/* Colonne ingrédient réduite, colonnes produits maximisées */

/* 3 colonnes = 1 ingrédient + 1 DIX + 1 concurrent */
.dpp-cols-3 .dpp-col-ingredient { width: 24%; }
.dpp-cols-3 .dpp-col-dix,
.dpp-cols-3 .dpp-col-competitor { width: 38%; }

/* 4 colonnes = 1 ingrédient + 1 DIX + 2 concurrents */
.dpp-cols-4 .dpp-col-ingredient { width: 22%; }
.dpp-cols-4 .dpp-col-dix,
.dpp-cols-4 .dpp-col-competitor { width: 26%; }

/* 5 colonnes = 1 ingrédient + 1 DIX + 3 concurrents */
.dpp-cols-5 .dpp-col-ingredient { width: 20%; }
.dpp-cols-5 .dpp-col-dix,
.dpp-cols-5 .dpp-col-competitor { width: 20%; }

/* 6 colonnes = 1 ingrédient + 1 DIX + 4 concurrents */
.dpp-cols-6 .dpp-col-ingredient { width: 18%; }
.dpp-cols-6 .dpp-col-dix,
.dpp-cols-6 .dpp-col-competitor { width: 16.4%; }

/* 7 colonnes = 1 ingrédient + 1 DIX + 5 concurrents */
.dpp-cols-7 .dpp-col-ingredient { width: 16%; }
.dpp-cols-7 .dpp-col-dix,
.dpp-cols-7 .dpp-col-competitor { width: 14%; }

/* 8 colonnes = 1 ingrédient + 1 DIX + 6 concurrents */
.dpp-cols-8 .dpp-col-ingredient { width: 14%; }
.dpp-cols-8 .dpp-col-dix,
.dpp-cols-8 .dpp-col-competitor { width: 12.28%; }

/* ==========================================================================
   États de chargement et messages
   ========================================================================== */

.dpp-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	color: #666;
	font-size: 1em;
}

.dpp-loading::before {
	content: '';
	width: 20px;
	height: 20px;
	margin-right: 10px;
	border: 2px solid #e0e0e0;
	border-top-color: #1976d2;
	border-radius: 50%;
	animation: dpp-spin 0.8s linear infinite;
}

@keyframes dpp-spin {
	to {
		transform: rotate(360deg);
	}
}

.dpp-error {
	padding: 20px;
	color: #c62828;
	background-color: #ffebee;
	border-radius: 6px;
	text-align: center;
}

.dpp-no-data {
	padding: 40px 20px;
	color: #666;
	text-align: center;
	font-style: italic;
}

/* ==========================================================================
   Mode tabs (toutes les marques)
   ========================================================================== */

.dpp-brand-tabs {
	display: flex;
	gap: 5px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	border-bottom: 2px solid #e0e0e0;
	padding-bottom: 0;
}

.dpp-brand-tab {
	padding: 10px 20px;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	font-size: 0.95em;
	font-weight: 500;
	color: #666;
	transition: color 0.2s, border-color 0.2s;
}

.dpp-brand-tab:hover {
	color: #333;
}

.dpp-brand-tab.active {
	color: #1976d2;
	border-bottom-color: #1976d2;
}

/* ==========================================================================
   Scores produits et indicateurs - NOUVEAU DESIGN
   ========================================================================== */

/* En-tête de colonne avec cercle de score */
.dpp-col-dix,
.dpp-col-competitor {
	vertical-align: top;
	padding-top: 16px !important;
}

.dpp-comparison-table thead th.dpp-col-dix,
.dpp-comparison-table thead th.dpp-col-competitor {
	padding: 16px 12px 20px;
}

/* Nom du produit au-dessus du cercle */
.dpp-product-name {
	display: block;
	font-size: 1em;
	font-weight: 600;
	color: #333;
	margin-bottom: 12px;
}

/* Cercle de score - Design arc progressif (border conique) */
.dpp-score-circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin: 0 auto 10px;
	font-size: 1.3em;
	font-weight: 700;
	color: #333;
	background: #f5f5f5;
	transition: transform 0.2s;
}

.dpp-score-circle:hover {
	transform: scale(1.05);
}

/* Arc de progression via pseudo-élément avec conic-gradient */
.dpp-score-circle::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 5px; /* Épaisseur du border */
	background: conic-gradient(from 0deg, var(--score-color) var(--score-percent), #e0e0e0 var(--score-percent));
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Variables CSS pour chaque niveau de score (couleur + pourcentage d'arc) */
.dpp-score-circle.dpp-circle-progress-10 { --score-color: #2e7d32; --score-percent: 100%; }
.dpp-score-circle.dpp-circle-progress-9 { --score-color: #388e3c; --score-percent: 90%; }
.dpp-score-circle.dpp-circle-progress-8 { --score-color: #558b2f; --score-percent: 80%; }
.dpp-score-circle.dpp-circle-progress-7 { --score-color: #689f38; --score-percent: 70%; }
.dpp-score-circle.dpp-circle-progress-6 { --score-color: #9e9d24; --score-percent: 60%; }
.dpp-score-circle.dpp-circle-progress-5 { --score-color: #f9a825; --score-percent: 50%; }
.dpp-score-circle.dpp-circle-progress-4 { --score-color: #ff8f00; --score-percent: 40%; }
.dpp-score-circle.dpp-circle-progress-3 { --score-color: #ef6c00; --score-percent: 30%; }
.dpp-score-circle.dpp-circle-progress-2 { --score-color: #e65100; --score-percent: 20%; }
.dpp-score-circle.dpp-circle-progress-1 { --score-color: #d32f2f; --score-percent: 10%; }
.dpp-score-circle.dpp-circle-progress-0 { --score-color: #b71c1c; --score-percent: 5%; }

/* Ancien système de score (pour rétrocompatibilité) */
.dpp-product-score {
	display: none; /* Masqué car remplacé par cercle */
}

.dpp-score-value {
	font-size: 1.1em;
}

/* Ancien système de couleurs pleines - masqué */
.dpp-circle-color-10,
.dpp-circle-color-9,
.dpp-circle-color-8,
.dpp-circle-color-7,
.dpp-circle-color-6,
.dpp-circle-color-5,
.dpp-circle-color-4,
.dpp-circle-color-3,
.dpp-circle-color-2,
.dpp-circle-color-1,
.dpp-circle-color-0 {
	/* Ces classes ne sont plus utilisées - remplacées par dpp-circle-progress-X */
}

/* Ancien système de couleurs par classe (pour rétrocompatibilité) */
.dpp-score-high {
	background-color: #e8f5e9;
	color: #2e7d32;
}

.dpp-score-medium {
	background-color: #fff8e1;
	color: #f57c00;
}

.dpp-score-low {
	background-color: #fff3e0;
	color: #e65100;
}

.dpp-score-bad {
	background-color: #ffebee;
	color: #c62828;
}

/* Compteur ingrédients clés */
.dpp-key-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75em;
	font-weight: 500;
	color: #666;
	margin-top: 4px;
	white-space: nowrap;
}

/* Indicateur check/croix avant le compteur */
.dpp-key-count::before {
	content: '✓';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 0.75em;
	font-weight: 700;
	color: #fff;
	background-color: #2e7d32;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Quand il manque des clés : croix rouge */
.dpp-key-count.dpp-keys-incomplete::before {
	content: '✗';
	background-color: #c62828;
}

.dpp-key-count.dpp-keys-incomplete {
	color: #c62828;
}

.dpp-key-count-value {
	font-weight: 700;
	color: #1976d2;
}

.dpp-key-count.dpp-key-complete .dpp-key-count-value {
	color: #2e7d32;
}

.dpp-key-count.dpp-key-incomplete .dpp-key-count-value {
	color: #c62828;
}

/* ==========================================================================
   Structure multi-lignes par ingrédient
   ========================================================================== */

/* Ligne nom d'ingrédient - couleur de fond définie via contrôle Elementor */
.dpp-row-name {
	/* background-color défini via Elementor controls (ingredient_row_bg) */
}

.dpp-row-name td {
	padding: 10px 16px !important;
	border-bottom: none !important;
}

.dpp-row-name:hover {
	filter: brightness(0.9);
}

/* Nom d'ingrédient - couleur définie via contrôle Elementor */
.dpp-row-name .dpp-ingredient-name {
	/* color défini via Elementor controls (ingredient_row_text_color) */
}

/* Ligne quantité */
.dpp-row-quantity {
	background-color: #fff !important;
}

.dpp-row-quantity td {
	padding: 8px 16px !important;
	border-bottom: none !important;
}

/* Ligne type */
.dpp-row-type {
	background-color: #fafafa !important;
}

.dpp-row-type td {
	padding: 8px 16px !important;
	border-bottom: 2px solid #e0e0e0 !important;
}

/* Cellule label (Quantité, Type de...) */
.dpp-label-cell {
	text-align: left !important;
}

.dpp-row-label {
	font-size: 0.85em;
	font-weight: 500;
	color: #666;
	font-style: italic;
}

/* Badge ingrédient clé - texte violet sur fond blanc, sans bordure */
.dpp-key-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 10px;
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #9c27b0;
	background-color: #fff;
	border: none;
	border-radius: 3px;
	vertical-align: middle;
}

/* Indicateur ingrédient clé manquant */
.dpp-key-missing {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-size: 0.7em;
	font-weight: 700;
	color: #fff;
	background-color: #c62828;
	border-radius: 50%;
}

.dpp-key-missing::before {
	content: '✗';
}

/* Affichage du malus */
.dpp-malus {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 500;
	color: #c62828;
	margin-left: 4px;
}

.dpp-malus::before {
	content: '(';
}

.dpp-malus::after {
	content: ')';
}

/* Malus dans l'en-tête */
.dpp-header-malus {
	display: block;
	font-size: 0.7em;
	font-weight: 500;
	color: #e65100;
	margin-top: 2px;
}

/* Note ingrédient inline */
.dpp-ingredient-note {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 500;
	color: #666;
	margin-left: 4px;
}

.dpp-note-high {
	color: #2e7d32;
}

.dpp-note-medium {
	color: #f57c00;
}

.dpp-note-low {
	color: #c62828;
}

/* Type d'ingrédient coloré (surcharge le style par défaut) */
.dpp-ingredient-type-colored {
	display: block;
	font-size: 0.8em;
	font-weight: 500;
	margin-top: 2px;
	font-style: normal;
}

/* Note du type d'ingrédient */
.dpp-type-note {
	font-weight: 400;
	opacity: 0.8;
	margin-left: 2px;
}

/* Badge "Principe actif non disponible" */
.dpp-key-missing-badge {
	display: inline-block;
	padding: 4px 8px;
	font-size: 0.75em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #fff;
	background-color: #c62828;
	border-radius: 4px;
	text-align: center;
	line-height: 1.3;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.dpp-brand-selector {
		flex-direction: column;
		align-items: stretch;
	}

	.dpp-brand-selector select {
		width: 100%;
	}

	.dpp-comparison-table {
		font-size: 0.9em;
	}

	.dpp-comparison-table thead th,
	.dpp-comparison-table td {
		padding: 10px 8px;
	}

	/* Colonnes dynamiques responsive - ingrédient réduit, produits maximisés */
	.dpp-cols-3 .dpp-col-ingredient { width: 30%; }
	.dpp-cols-3 .dpp-col-dix,
	.dpp-cols-3 .dpp-col-competitor { width: 35%; }

	.dpp-cols-4 .dpp-col-ingredient { width: 28%; }
	.dpp-cols-4 .dpp-col-dix,
	.dpp-cols-4 .dpp-col-competitor { width: 24%; }

	.dpp-cols-5 .dpp-col-ingredient { width: 24%; }
	.dpp-cols-5 .dpp-col-dix,
	.dpp-cols-5 .dpp-col-competitor { width: 19%; }

	.dpp-cols-6 .dpp-col-ingredient { width: 22%; }
	.dpp-cols-6 .dpp-col-dix,
	.dpp-cols-6 .dpp-col-competitor { width: 15.6%; }

	.dpp-cols-7 .dpp-col-ingredient { width: 20%; }
	.dpp-cols-7 .dpp-col-dix,
	.dpp-cols-7 .dpp-col-competitor { width: 13.33%; }

	.dpp-cols-8 .dpp-col-ingredient { width: 18%; }
	.dpp-cols-8 .dpp-col-dix,
	.dpp-cols-8 .dpp-col-competitor { width: 11.71%; }

	.dpp-products-needed {
		flex-direction: column;
		text-align: center;
	}

	.dpp-ingredient-type {
		font-size: 0.75em;
	}

	/* Cercle de score responsive */
	.dpp-score-circle {
		width: 55px;
		height: 55px;
		font-size: 1.1em;
	}

	.dpp-score-circle::before {
		padding: 4px; /* Border plus fin en responsive */
	}

	/* Note du type responsive */
	.dpp-type-note-circle {
		width: 18px;
		height: 18px;
		font-size: 0.65em;
	}

	.dpp-product-score {
		font-size: 0.75em;
		padding: 3px 8px;
	}

	.dpp-key-count {
		font-size: 0.65em;
	}

	.dpp-key-badge {
		font-size: 0.55em;
		padding: 2px 6px;
	}

	.dpp-malus {
		font-size: 0.65em;
	}

	.dpp-key-missing-badge {
		font-size: 0.65em;
		padding: 3px 6px;
	}

	.dpp-type-note {
		font-size: 0.9em;
	}

	.dpp-product-prices {
		margin-top: 4px;
		margin-bottom: 2px;
	}

	.dpp-price-dose {
		font-size: 0.8em;
		padding: 2px 6px;
	}

	.dpp-price-box {
		font-size: 0.65em;
	}

	/* Point vert responsive */
	.dpp-winner-dot {
		width: 6px;
		height: 6px;
		margin-left: 4px;
	}
}

@media (max-width: 480px) {
	.dpp-header-title {
		font-size: 1.2em;
	}

	.dpp-comparison-table {
		font-size: 0.8em;
		display: block;
		overflow-x: auto;
	}

	.dpp-comparison-table thead th,
	.dpp-comparison-table td {
		padding: 8px 6px;
		min-width: 60px;
	}

	.dpp-comparison-table thead th.dpp-col-ingredient,
	.dpp-comparison-table td.dpp-col-ingredient {
		min-width: 100px;
	}

	.dpp-brand-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 10px;
	}

	.dpp-brand-tab {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.dpp-ingredient-type {
		font-size: 0.7em;
	}

	/* Cercle de score très petit écran */
	.dpp-score-circle {
		width: 45px;
		height: 45px;
		font-size: 0.95em;
	}

	.dpp-score-circle::before {
		padding: 3px;
	}

	.dpp-exclusive-badge {
		font-size: 0.6em;
		padding: 1px 4px;
	}

	.dpp-product-score {
		font-size: 0.7em;
		padding: 2px 6px;
	}

	.dpp-key-count {
		font-size: 0.6em;
	}

	.dpp-key-badge {
		font-size: 0.5em;
		padding: 2px 4px;
		margin-left: 4px;
	}

	.dpp-key-missing {
		width: 12px;
		height: 12px;
		line-height: 12px;
		font-size: 0.6em;
	}

	.dpp-ingredient-type-colored {
		font-size: 0.65em;
	}

	.dpp-key-missing-badge {
		font-size: 0.6em;
		padding: 2px 4px;
	}

	.dpp-type-note {
		font-size: 0.85em;
	}
}