/* =========================================
   PAGE LETTRE OUVERTE — LAYOUT
   ========================================= */

.lettre-ouverte-hce-layout {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 3rem);
}

.lettre-ouverte-hce-sommaire {
	flex: 0 0 auto;
	width: 100%;
	background: var(--blanc-2);
	border-radius: 0.2rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	text-align: left;
}

.lettre-ouverte-hce-contenu {
	flex: 1;
	min-width: 0;
}


/* =========================================
   PARCOURS LECTURE — ESPACEMENT DOCUMENTAIRE
   ========================================= */

.lettre-ouverte-hce-contenu section {
	margin-bottom: clamp(2rem, 4vw, 4rem);
}

.lettre-ouverte-hce-contenu h2 {
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;

}

section[id] {
	scroll-margin-top: 5rem;
}

.lettre-ouverte-hce-contenu p {
	line-height: 1.75;
	margin-bottom: 1.2rem;
	color: var(--noir-doux);
}


/* =========================================
   BOUTON PDF
   ========================================= */

.lettre-ouverte-hce-pdf {
	padding-top: 1.2rem;
}

.lettre-ouverte-hce-pdf a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.55rem 0.75rem;
	font-size: clamp(0.72rem, 0.61rem + 0.4vw, 0.95rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	background: transparent;
	color: var(--bleu-ardoise-fonce);
	border: 1px solid var(--bleu-ardoise-fonce);
	border-radius: 0.2rem;
	text-decoration: none;
}

.lettre-ouverte-hce-pdf a:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	transition: all 0.2s ease;
}


/* =========================================
   SOMMAIRE — ÉLÉMENTS INTERNES
   ========================================= */

.lettre-ouverte-hce-sommaire h2 {
	font-weight: 550;
	margin-bottom: 1rem;
	color: var(--noir-doux);
}

.lettre-ouverte-hce-sommaire ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.lettre-ouverte-hce-sommaire li {
	border-bottom: none;
}

.lettre-ouverte-hce-sommaire a {
	display: block;
	padding: 0.4rem 0.6rem;
	color: var(--bleu-ardoise);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.4;
	border-radius: 0.2rem;
	transition: background 0.15s ease;
}

.lettre-ouverte-hce-sommaire a:hover {
	background: var(--blanc-pur);
	text-decoration: underline;
	text-decoration-color: var(--orange-clair);
	text-underline-offset: 3px;
}

.lettre-ouverte-hce-sommaire .lettre-ouverte-hce-pdf a {
	display: flex;
	width: 100%;
}


/* =========================================
   SOMMAIRE MOBILE — HAMBURGER CSS-ONLY
   ========================================= */

.sommaire-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sommaire-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	background: var(--bleu-ardoise-fonce);
	color: var(--blanc-doux);
	font-weight: 600;
	cursor: pointer;
	border-radius: 0.2rem;
}

.sommaire-label::before {
	content: "☰";
}

.sommaire-toggle:checked ~ .sommaire-label::before {
	content: "✕";
	color: var(--orange-clair);
}

.sommaire-label:focus-visible {
	outline: 2px solid var(--orange-clair);
	outline-offset: 2px;
}

.sommaire-contenu {
	display: none;
	margin-top: 0.75rem;
}

.sommaire-toggle:checked ~ .sommaire-contenu {
	display: block;
}


/* =========================================
   MEDIA QUERIES
   ========================================= */

/* Mobile */
@media (max-width: 1024px) {

	.lettre-ouverte-hce-sommaire {
		position: sticky;
		top: 5rem;
		z-index: 20;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	.sommaire-contenu {
		margin-top: 0;
		background: var(--blanc-2);
		border-radius: 0.2rem;
		padding: clamp(1rem, 2vw, 1.5rem);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	}

	section[id] {
		scroll-margin-top: 9rem;
	}

}


/* Desktop */
@media (min-width: 1025px) {

	.lettre-ouverte-hce-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.lettre-ouverte-hce-sommaire {
		width: 280px;
		position: sticky;
		top: 5rem;
		align-self: flex-start;
	}

	.sommaire-toggle,
	.sommaire-label {
		display: none;
	}

	.sommaire-contenu {
		display: block;
		margin-top: 0;
	}

}