/* ═══════════════════════════════════════════════════
   VI NATURAL — COMPARATIF DES SULFITES
   Remplace l'image vins-sulfits.jpg de vi-natural.html
   Sans JavaScript : bascule négre / blanc par boutons radio + :has(),
   détail de chaque ligne par <details>.
   Les valeurs des barres sont ici ; les chiffres affichés sont dans le HTML.
   Les sélecteurs de texte sont préfixés par .sulfits pour primer sur les
   styles de paragraphe de la page qui accueille le composant.
   ═══════════════════════════════════════════════════ */

.sulfits {
	/* Couleurs du composant, fond clair par défaut */
	--s-encre: var(--vi-profund);
	--s-texte: var(--carbó);
	--s-doux: var(--carbó-suau);
	--s-accent: var(--vi);
	--s-sur-accent: var(--blanc);
	--s-barre: var(--vi);
	--s-nous: var(--terra);
	--s-filet: rgba(96, 24, 42, 0.12);
	--s-filet-fort: rgba(96, 24, 42, 0.3);
	--s-fond-barre: rgba(96, 24, 42, 0.07);
	--echelle: 200; /* mg/l, borne droite des barres */
	margin: var(--sp-lg) 0;
	max-width: 52rem;
}

.sulfits .sulfits-titol {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--s-encre);
	margin-bottom: 0.4em;
}

.sulfits .sulfits-intro {
	max-width: none;
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.25vw, 1.12rem);
	line-height: var(--lh-text, 1.55);
	color: var(--s-texte);
	margin-bottom: var(--sp-sm);
}

/* ── Fond sombre ──
   Automatique dans les sections sombres du site ; ailleurs, ajouter
   la classe sulfits--fosc sur la <section>. */
.content-dark .sulfits,
.article-dark .sulfits,
.vigneron-vi .sulfits,
.manifesto .sulfits,
.podcast .sulfits,
.sulfits.sulfits--fosc {
	--s-encre: var(--blanc);
	--s-texte: rgba(245, 240, 232, 0.82);
	--s-doux: rgba(245, 240, 232, 0.6);
	--s-accent: var(--blanc);
	--s-sur-accent: var(--vi-profund);
	--s-barre: rgba(245, 240, 232, 0.85);
	--s-nous: var(--terra-clar);
	--s-filet: rgba(245, 240, 232, 0.14);
	--s-filet-fort: rgba(245, 240, 232, 0.35);
	--s-fond-barre: rgba(245, 240, 232, 0.08);
}

/* ── Bascule négre / blanc ── */

.sulfits-color {
	display: inline-flex;
	padding: 0;
	margin-bottom: var(--sp-sm);
	border: 1px solid var(--s-filet-fort);
	border-radius: var(--radius);
}
.sulfits-color legend {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
}
.sulfits-color input {
	position: absolute; opacity: 0; pointer-events: none;
}
.sulfits-color label {
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	padding: 0.55rem 1rem;
	cursor: pointer;
	color: var(--s-accent);
	transition: background-color var(--dur-fast), color var(--dur-fast);
}
.sulfits-color input:checked + label {
	background: var(--s-accent);
	color: var(--s-sur-accent);
}
.sulfits-color input:focus-visible + label {
	outline: 2px solid var(--s-accent);
	outline-offset: 2px;
}

/* ── Liste ── */

.sulfits-llista {
	list-style: none;
	border-top: 1px solid var(--s-filet);
}
.sulfits-item {
	border-bottom: 1px solid var(--s-filet);
}

.sulfits-item summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: minmax(9rem, 13rem) 1fr 5.5rem 1rem;
	align-items: center;
	gap: 0.4rem 1rem;
	padding: 0.85rem 0;
}
.sulfits-item summary::-webkit-details-marker { display: none; }

/* Signe + / − */
.sulfits-item summary::after {
	content: '+';
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--s-accent);
	justify-self: end;
}
.sulfits-item details[open] summary::after { content: '−'; }
.sulfits-item summary:focus-visible { outline: 2px solid var(--s-accent); outline-offset: 2px; }

.sulfits-nom {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--s-encre);
}
.sulfits-nom small {
	display: block;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--s-doux);
	opacity: 0.7;
}

/* Barre : la longueur suit le maximum autorisé */
.sulfits-barra {
	display: block;
	height: 0.55rem;
	background: var(--s-fond-barre);
	border-radius: var(--radius);
	overflow: hidden;
}
.sulfits-barra span {
	display: block;
	height: 100%;
	min-width: 3px;
	width: calc(var(--negre) / var(--echelle) * 100%);
	background: var(--s-barre);
	border-radius: var(--radius);
	transition: width var(--dur-slow) var(--ease);
}
.sulfits:has(#sulfits-blanc:checked) .sulfits-barra span {
	width: calc(var(--blanc) / var(--echelle) * 100%);
}

.sulfits-valor {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--s-encre);
	text-align: right;
	white-space: nowrap;
}
.sulfits-valor .v-blanc { display: none; }
.sulfits:has(#sulfits-blanc:checked) .v-negre { display: none; }
.sulfits:has(#sulfits-blanc:checked) .v-blanc { display: inline; }

/* Valeurs par catégorie (mg/l de SO₂ total, vins secs) */
.sulfits--conv    { --negre: 150; --blanc: 200; }
.sulfits--eco     { --negre: 100; --blanc: 150; }
.sulfits--demeter { --negre: 70;  --blanc: 90; }
.sulfits--vmn     { --negre: 30;  --blanc: 30; }
.sulfits--raim    { --negre: 20;  --blanc: 20; }

/* Notre ligne ressort */
.sulfits--raim .sulfits-barra span { background: var(--s-nous); }
.sulfits--raim .sulfits-nom { color: var(--s-nous); }

/* ── Détail ── */

.sulfits-detall {
	padding: 0 0 1.1rem;
	max-width: 40rem;
}
.sulfits-xifres {
	list-style: none;
	display: flex; flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin-bottom: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	color: var(--s-doux);
}
.sulfits-xifres b {
	font-family: var(--font-display);
	font-variant-numeric: lining-nums; /* le 0 de Cormorant ressemble sinon à un o */
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--s-encre);
	margin-right: 0.2em;
}
.sulfits .sulfits-detall p {
	font-family: var(--font-display);
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	line-height: var(--lh-text, 1.55);
	color: var(--s-texte);
}

.sulfits .sulfits-nota {
	margin-top: var(--sp-sm);
	font-family: var(--font-body);
	font-size: 0.78rem;
	line-height: var(--lh-sans, 1.6);
	color: var(--s-doux);
	opacity: 0.8;
}

/* ── Mobile : nom et valeur sur une ligne, barre dessous ── */

@media (max-width: 600px) {
	.sulfits-item summary {
		grid-template-columns: 1fr auto 1rem;
		grid-template-areas: "nom valor signe" "barra barra barra";
		padding: 0.9rem 0 1rem;
	}
	.sulfits-nom { grid-area: nom; }
	.sulfits-valor { grid-area: valor; }
	.sulfits-item summary::after { grid-area: signe; }
	.sulfits-barra { grid-area: barra; }
}

@media (prefers-reduced-motion: reduce) {
	.sulfits-barra span { transition: none; }
}

.sulfits .sulfits-nota + .sulfits-nota { margin-top: 0.4rem; }

.sulfits .sulfits-nota a {
	color: var(--s-accent);
	text-decoration: underline;
	text-decoration-color: var(--s-filet-fort);
	text-underline-offset: 3px;
	white-space: nowrap;
}
.sulfits .sulfits-nota a:hover { text-decoration-color: var(--s-accent); }

/* Dans la grille texte + visuel des pages de contenu : aligné en haut sur le texte */
.content-grid .sulfits { margin: 0; }