/* Pages légales du site Pharmacie de Chénens (Protection des données, Impressum, CGV)
   Chargé par l'asset chenens.legal (media/chenens-legal/legal.css). Ne stylise que .ch-legal. */

.ch-legal {
	--lg-accent: var(--accent, #1799b8);
	--lg-ink: var(--ink, #123c4b);
	--lg-muted: var(--muted, #6f8b94);
	--lg-border: var(--border, #dde8eb);
	--lg-pale: var(--blue-pale, #e9f6fa);
	--lg-green: var(--green-pale, #f0f7e4);
	--lg-green-text: var(--green-text, #4c7213);
	max-width: 860px;
	margin: 0 auto;
	color: var(--lg-ink);
	font-family: var(--font-sans, 'Karla', sans-serif);
	font-size: 1.04rem;
	line-height: 1.65;
	counter-reset: legal-section;
}

.ch-legal p { margin: 0 0 1rem; }
.ch-legal a { color: var(--lg-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ch-legal a:hover { color: var(--accent-hover, #127a94); }

/* Titre de page */
.ch-legal-eyebrow {
	font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--lg-accent); font-weight: 700; margin: 0 0 0.5rem;
}
.ch-legal-title {
	font-family: var(--font-serif, 'Lora', Georgia, serif);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.15; font-weight: 600;
	color: var(--deep, #0b4a5c);
	margin: 0 0 1.25rem;
}

/* Chapeau */
.ch-legal-lead {
	font-family: var(--font-serif, 'Lora', Georgia, serif);
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--lg-ink);
	margin-bottom: 1.5rem;
}
.ch-legal-meta {
	color: var(--lg-muted);
	font-size: 0.92rem;
	margin: -0.5rem 0 1.75rem;
}

/* Encadré « En bref » */
.ch-legal-brief {
	background: var(--lg-green);
	border: 1px solid var(--green-pale-2, #ddf0c9);
	border-radius: var(--radius-md, 14px);
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
}
.ch-legal-brief h2 {
	font-family: var(--font-serif, 'Lora', Georgia, serif);
	font-size: 1.1rem;
	margin: 0 0 0.75rem;
	color: var(--lg-green-text);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}
.ch-legal-brief ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .ch-legal-brief ul { grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; } }
.ch-legal-brief li { position: relative; padding-left: 1.8rem; margin: 0; }
.ch-legal-brief li::before {
	content: "";
	position: absolute; left: 0; top: 0.3rem;
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	background: var(--brand-green, #8dc63f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* Sommaire */
.ch-legal-toc {
	border-left: 3px solid var(--lg-accent);
	padding: 0.25rem 0 0.25rem 1.25rem;
	margin: 0 0 2.5rem;
	font-size: 0.95rem;
}
.ch-legal-toc strong { display: block; margin-bottom: 0.4rem; color: var(--lg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; }
.ch-legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
@media (max-width: 639px) { .ch-legal-toc ol { columns: 1; } }
.ch-legal-toc li { break-inside: avoid; margin: 0 0 0.3rem; }
.ch-legal-toc a { text-decoration: none; }
.ch-legal-toc a:hover { text-decoration: underline; }

/* Sections numérotées */
.ch-legal-section { padding: 1.75rem 0 0.5rem; border-top: 1px solid var(--lg-border); }
.ch-legal-section > h2 {
	counter-increment: legal-section;
	font-family: var(--font-serif, 'Lora', Georgia, serif);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 1rem;
	display: flex; align-items: baseline; gap: 0.75rem;
	scroll-margin-top: 110px;
}
.ch-legal-section > h2::before {
	content: counter(legal-section);
	flex: 0 0 auto;
	display: inline-grid; place-items: center;
	width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--lg-pale);
	color: var(--lg-accent);
	font-family: var(--font-sans, 'Karla', sans-serif);
	font-size: 0.95rem; font-weight: 700;
	transform: translateY(-0.15rem);
}
.ch-legal-section h3 {
	font-family: var(--font-sans, 'Karla', sans-serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--lg-ink);
	margin: 1.5rem 0 0.5rem;
	scroll-margin-top: 110px;
}
.ch-legal-section ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.ch-legal-section li { margin: 0 0 0.35rem; }

/* Coordonnées */
.ch-legal-card {
	background: #fff;
	border: 1px solid var(--lg-border);
	border-radius: var(--radius-md, 14px);
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(11, 74, 92, 0.06));
	padding: 1.1rem 1.4rem;
	margin: 0.5rem 0 1.25rem;
}
.ch-legal-card address { font-style: normal; margin: 0; }
.ch-legal-card strong { font-family: var(--font-serif, 'Lora', Georgia, serif); font-size: 1.1rem; }
.ch-legal-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
.ch-legal-card dt { color: var(--lg-muted); font-size: 0.9rem; }
.ch-legal-card dd { margin: 0; }
@media (max-width: 480px) { .ch-legal-card dl { grid-template-columns: 1fr; gap: 0.1rem; } .ch-legal-card dd { margin-bottom: 0.5rem; } }

/* Mise en avant (Infomaniak, Matomo) */
.ch-legal-note {
	display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
	background: var(--lg-pale);
	border-radius: var(--radius-md, 14px);
	padding: 1.1rem 1.4rem;
	margin: 1rem 0 1.25rem;
}
.ch-legal-note::before {
	content: "";
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231799b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center/60% no-repeat;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(11, 74, 92, 0.06));
}
.ch-legal-note p:last-child { margin-bottom: 0; }
.ch-legal-note strong { color: var(--deep, #0b4a5c); }

/* Tableau des cookies */
.ch-legal table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: 0.95rem; }
.ch-legal th, .ch-legal td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--lg-border); vertical-align: top; }
.ch-legal th { color: var(--lg-muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ch-legal td code { font-size: 0.85em; background: var(--lg-pale); padding: 0.1em 0.4em; border-radius: 6px; }
.ch-legal-table-wrap { overflow-x: auto; }

/* Module de désactivation Matomo */
.matomo-opt-out {
	background: #fff;
	border: 1px dashed var(--border-2, #cfe0e5);
	border-radius: var(--radius-md, 14px);
	padding: 1rem 1.25rem;
	margin: 1rem 0 1.25rem;
	font-size: 0.95rem;
}
.matomo-opt-out:empty { display: none; }
.matomo-opt-out p { margin: 0 0 0.5rem; }
.matomo-opt-out label { font-weight: 600; cursor: pointer; }
.matomo-opt-out input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin-right: 0.5rem; vertical-align: -0.15rem; accent-color: var(--lg-accent); }

/* Pied de page légal */
.ch-legal-footer {
	margin-top: 2.5rem; padding-top: 1.25rem;
	border-top: 1px solid var(--lg-border);
	color: var(--lg-muted); font-size: 0.9rem;
}

/* ---- Sommaire flottant (écrans larges) ----
   Le sommaire passe dans une colonne de gauche collante ; les éléments d'en-tête (surtitre, titre,
   chapeau, méta, « En bref ») occupent toute la largeur, les sections défilent à droite. */
@media (min-width: 1024px) {
	.ch-legal.ch-legal-has-toc {
		max-width: 1180px;
		margin-top: 0.5rem;
		display: grid;
		grid-template-columns: 270px minmax(0, 1fr);
		column-gap: 3.5rem;
		row-gap: 0;
		align-items: start;
	}
	/* Tout le texte (en-tête comprise) vit dans la colonne de droite, aligné sur une même largeur ;
	   le sommaire occupe la colonne de gauche dès le haut de page. */
	.ch-legal.ch-legal-has-toc > * { grid-column: 2; min-width: 0; }
	.ch-legal.ch-legal-has-toc > .ch-legal-toc {
		grid-column: 1;
		grid-row: 1 / span 80;
		position: sticky;
		top: 120px;
		align-self: start;
		margin: 0;
		border-left: 0;
		padding: 1.25rem 1.4rem 1.4rem;
		background: #fff;
		border: 1px solid var(--lg-border);
		border-radius: var(--radius-md, 14px);
		box-shadow: var(--shadow-sm, 0 2px 8px rgba(11, 74, 92, 0.06));
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}
	.ch-legal.ch-legal-has-toc > .ch-legal-toc ol { columns: 1; counter-reset: legal-toc; }
	.ch-legal.ch-legal-has-toc > .ch-legal-toc li { counter-increment: legal-toc; margin: 0; }
	.ch-legal.ch-legal-has-toc > .ch-legal-toc a {
		display: flex; gap: 0.7rem; align-items: baseline;
		padding: 0.45rem 0.6rem 0.45rem 0.7rem;
		margin: 0 -0.6rem;
		border-radius: 10px;
		color: var(--lg-ink);
		line-height: 1.35;
		border-left: 3px solid transparent;
		transition: background-color 0.15s ease, color 0.15s ease;
	}
	.ch-legal.ch-legal-has-toc > .ch-legal-toc a::before {
		content: counter(legal-toc, decimal-leading-zero);
		flex: 0 0 auto;
		font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
		color: var(--lg-muted);
		font-variant-numeric: tabular-nums;
	}
	.ch-legal.ch-legal-has-toc > .ch-legal-toc a:hover { background: var(--lg-pale); text-decoration: none; }
	.ch-legal.ch-legal-has-toc > .ch-legal-toc a.is-active {
		background: var(--lg-pale);
		color: var(--deep, #0b4a5c);
		font-weight: 700;
		border-left-color: var(--lg-accent);
	}
	.ch-legal.ch-legal-has-toc > .ch-legal-toc a.is-active::before { color: var(--lg-accent); }
	.ch-legal.ch-legal-has-toc > .ch-legal-section:first-of-type { border-top: 0; padding-top: 0.25rem; }
}

/* Petits écrans : le sommaire reste en tête de page, l'entrée active est simplement colorée. */
.ch-legal-toc a.is-active { color: var(--deep, #0b4a5c); font-weight: 700; }