/* =========================================================================
   « Média de référence » (choix de Simon du 09/10/2026) : couleurs de la V2, le rouge en accent.
   Accueil : manifeste, preuves, sous tous les angles, qui vous parle, ressources + pro.
   Article : bandeau de confiance, en bref, lettrine, sources.
   ========================================================================= */
:root {
	--hm-rouge: #c4253a;        /* blanc dessus 5,4:1 */
	--hm-rouge-fonce: #9e1c2e;  /* texte rouge sur fond clair 7:1 */
	--hm-t-geant: clamp(44px, 7vw, 92px);
}

/* ---------- Manifeste ---------- */
.hm-manifeste { background: var(--hm-rouge); color: #fff; }
.hm-manifeste__in {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 32px 72px;
	padding-block: calc(var(--hm-section) * 0.9);
}
.hm-manifeste__phrase {
	flex: 999 1 560px; min-width: 0; margin: 0; color: #fff;
	font-family: var(--hm-police-titre); font-weight: 700; font-size: var(--hm-t-geant);
	line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance;
}
.hm-manifeste__texte { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 18px; font-size: 19px; }
.hm-manifeste__texte p { margin: 0; }
.hm-manifeste__lien { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; text-underline-offset: 5px; }
.hm-manifeste__lien:hover { color: #fff; text-decoration-thickness: 2px; }
.hm-manifeste__lien:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------- Preuves + mission : cartes alignées, puis un seul panneau pour la mission ---------- */
.hm-preuves { padding-block: var(--hm-section) calc(var(--hm-section) * 0.6); }
.hm-preuves__liste {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
@media (min-width: 640px) { .hm-preuves__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .hm-preuves__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.hm-preuves__item {
	position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
	padding: 24px 26px 26px; border: 1px solid var(--hm-filet); border-radius: var(--hm-r); background: var(--hm-surface);
	box-shadow: var(--hm-ombre-1);
}
.hm-preuves__chiffre {
	font-family: var(--hm-police-titre); font-weight: 700; font-size: clamp(40px, 4.2vw, 56px); line-height: 1;
	letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hm-rouge); margin-bottom: 6px;
}
.hm-preuves__item b { color: var(--hm-encre); font-family: var(--hm-police-titre); font-weight: 600; font-size: 19px; line-height: 1.25; }
.hm-preuves__detail { color: var(--hm-secondaire); font-size: var(--hm-t-petit); line-height: 1.6; }
/* Apparition l'une après l'autre (theme.js pose .is-vu) ; sans JS tout reste visible */
html.hm-js .hm-preuves__item { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--hm-ease), transform 0.6s var(--hm-ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.hm-js .hm-preuves__item.is-vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.hm-js .hm-preuves__item { opacity: 1; transform: none; } }

.hm-preuves__mission {
	margin-top: 24px; padding: clamp(24px, 4vw, 56px);
	border: 1px solid var(--hm-filet); border-radius: 32px; background: var(--hm-surface); box-shadow: var(--hm-ombre-1);
}
.hm-preuves__mission .hm-mission { padding: 0; background: none; }
.hm-preuves__mission .hm-mission .hm-conteneur { padding-inline: 0; }
.hm-preuves__mission .hm-mission__in { max-width: none; gap: 0; }
.hm-preuves__mission .hm-mission__texte h2 { margin: 0 0 20px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; }
.hm-preuves__mission .hm-prose { max-width: 68ch; font-size: 17px; line-height: 1.7; }
.hm-preuves__mission .hm-prose > :first-child { margin-top: 0; }
.hm-preuves__mission .hm-prose h3 { margin: 1.4em 0 0.5em; font-size: clamp(21px, 2vw, 25px); }
.hm-preuves__mission .hm-mission__texte > .hm-btn { margin: 28px 0 0; }
.hm-preuves__mission .hm-encadre { max-width: none; margin-top: 32px; border-radius: 20px; }
/* Mission réorganisée (revue UX du 16/10/2026) : une accroche, puis 3 blocs courts titrés. */
.hm-preuves__mission .hm-mission__accroche { margin: 0; font-family: var(--hm-police-titre); font-weight: 600; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; color: var(--hm-encre); }
.hm-mission__blocs { display: grid; gap: 14px; margin-top: 24px; }
.hm-mission__bloc { padding: 18px 20px 18px 22px; border-left: 4px solid var(--hm-accent); border-radius: 0 16px 16px 0; background: rgba(255, 255, 255, 0.6); }
.hm-preuves__mission .hm-prose .hm-mission__bloc h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; }
.hm-mission__bloc p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--hm-secondaire); }
@media (min-width: 900px) {
	.hm-preuves__mission .hm-mission__texte {
		display: grid; grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr auto;
		column-gap: clamp(32px, 5vw, 80px);
	}
	.hm-preuves__mission .hm-mission__texte h2 { grid-column: 1; grid-row: 1; margin: 0; }
	.hm-preuves__mission .hm-prose { grid-column: 2; grid-row: 1 / span 2; }
	.hm-preuves__mission .hm-mission__texte > .hm-btn { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; margin: 24px 0 0; }
	.hm-preuves__mission .hm-encadre { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- Sous tous les angles ---------- */
.hm-angles { padding-block: var(--hm-section); }
.hm-angles .hm-section__tete { align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; }
.hm-angles__titre, .hm-voix__titre {
	margin: 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.02em; max-width: 16ch;
}
.hm-angles__chapo { margin: 0; max-width: 46ch; color: var(--hm-secondaire); }
.hm-angles__grille {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px;
}
@media (min-width: 900px) { .hm-angles__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.hm-angle {
	position: relative; display: block; aspect-ratio: 4 / 5; max-width: 100%;
	border-radius: var(--hm-r-sm); overflow: hidden; background: var(--hm-encre); color: #fff; text-decoration: none;
}
.hm-angle__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.6s var(--hm-ease); }
.hm-angle:hover .hm-angle__img { transform: scale(1.04); }
.hm-angle:focus-visible { outline: 3px solid var(--hm-lagune-2); outline-offset: 3px; }
.hm-angle__texte {
	position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px;
	padding: 48px 16px 16px; background: linear-gradient(transparent, rgba(10, 14, 18, 0.82));
}
.hm-angle__porte { font-size: var(--hm-t-etiquette); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.hm-angle__nom { font-family: var(--hm-police-titre); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05; }
.hm-angles__pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hm-angles__pastille {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
	border: 1.5px solid var(--hm-encre); border-radius: var(--hm-r-pilule);
	color: var(--hm-encre); font-weight: 700; font-size: var(--hm-t-petit); text-decoration: none;
}
.hm-angles__pastille:hover { background: var(--hm-encre); color: var(--hm-fond); }
.hm-angles__pastille:focus-visible { outline: 3px solid var(--hm-lagune-2); outline-offset: 3px; }
.hm-angles__derniers { margin-top: 44px; }
.hm-angles__derniers-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; border-bottom: 3px solid var(--hm-encre); padding-bottom: 10px; }
.hm-angles__derniers-tete h3 { margin: 0; font-size: var(--hm-t-h4); }
.hm-angles__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; }
.hm-angles__liste li { border-bottom: 1px solid var(--hm-filet-fort); }
.hm-angles__liste a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; text-decoration: none; color: var(--hm-encre); }
.hm-angles__liste a:hover .hm-angles__art { text-decoration: underline; text-underline-offset: 4px; }
.hm-angles__rub { font-size: var(--hm-t-etiquette); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-lagune); }
.hm-angles__art { font-family: var(--hm-police-titre); font-weight: 500; font-size: 21px; line-height: 1.2; }

/* ---------- Qui vous parle : quatre cartes compactes (portrait rond + nom + rôle), bouton dans l'en-tête ---------- */
.hm-voix { padding-block: calc(var(--hm-section) * 0.7); }
.hm-voix .hm-section__tete { align-items: center; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 20px; }
.hm-voix .hm-voix__titre { font-size: clamp(28px, 3.2vw, 40px); max-width: none; }
.hm-voix__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hm-voix__item {
	display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px 18px 14px 14px;
	border: 1px solid var(--hm-filet); border-radius: 22px; background: var(--hm-surface); box-shadow: var(--hm-ombre-1);
}
.hm-voix__photo { flex: none; width: 76px; height: 76px; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; filter: grayscale(1); border-radius: 50%; transition: filter 0.3s; }
.hm-voix__item:hover .hm-voix__photo { filter: none; }
.hm-voix__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-voix__nom { font-family: var(--hm-police-titre); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--hm-encre); }
.hm-voix__role { font-size: 14px; color: var(--hm-secondaire); line-height: 1.45; }

/* ---------- Ressources + professionnels ---------- */
/* Revue UX du 16/10/2026 (« trop gros et trop proche de Qui vous parle ») : vraie marge au-dessus, cartes plus compactes. */
.hm-duo { padding-block: clamp(32px, 4vw, 56px) var(--hm-section); }
.hm-duo__in { display: flex; flex-wrap: wrap; gap: 20px; }
.hm-duo__carte { flex: 1 1 420px; min-width: 0; border-radius: var(--hm-r); padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.hm-duo__carte h2 { margin: 0; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.1; }
.hm-duo__carte > p:not(.hm-etiquette) { font-size: 16px; line-height: 1.55; }
.hm-duo .hm-duo__liste a { padding: 10px 0; font-size: 15px; }
.hm-duo__carte p { margin: 0; }
.hm-duo__carte--ressources { background: var(--hm-surface); box-shadow: var(--hm-ombre-1); }
.hm-duo__liste { list-style: none; margin: 0; padding: 0; }
.hm-duo__liste a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hm-filet-fort); font-weight: 700; color: var(--hm-encre); text-decoration: none; }
.hm-duo__liste a:hover { color: var(--hm-lagune); }
.hm-duo__carte--pro { background: var(--hm-brume-fonce); color: #fff; } /* palette B : bleu nuit */
.hm-duo__carte--pro h2 { color: #fff; }
.hm-duo__carte--pro .hm-etiquette { color: var(--hm-brume-pale); }
.hm-duo__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
.hm-duo__btn-plein { background: #fff; color: var(--hm-brume-fonce); border: 2px solid #fff; }
.hm-duo__btn-plein:hover { background: var(--hm-brume-pale); color: var(--hm-brume-fonce); }
.hm-duo__btn-contour { background: transparent; color: #fff; border: 2px solid #fff; }
.hm-duo__btn-contour:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.hm-duo__carte--pro .hm-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Article ---------- */
@media (min-width: 900px) {
	.hm-single__titre { font-size: clamp(48px, 5.4vw, 76px); line-height: 1; letter-spacing: -0.02em; }
}
.hm-confiance-article {
	display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; padding-top: 14px;
	border-top: 1px solid var(--hm-filet-fort); font-size: var(--hm-t-petit); color: var(--hm-secondaire);
}
.hm-confiance-article > span { display: inline-flex; align-items: center; gap: 8px; }
.hm-confiance-article__relu { color: var(--hm-lagune); }
.hm-confiance-article__relu b { color: var(--hm-encre); }
.hm-en-bref { background: var(--hm-surface); border-radius: var(--hm-r-sm); padding: 22px 26px; margin-bottom: 32px; box-shadow: var(--hm-ombre-1); }
.hm-en-bref h2 { margin: 0 0 8px; font-family: var(--hm-police); font-size: var(--hm-t-etiquette); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hm-rouge-fonce); }
.hm-en-bref ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.hm-prose--lettrine > p:first-of-type::first-letter {
	float: left; font-family: var(--hm-police-titre); font-weight: 700; font-size: 4.2em; line-height: 0.8;
	padding: 0.08em 0.1em 0 0; color: var(--hm-rouge);
}
.hm-sources { margin-top: 40px; padding-top: 18px; border-top: 3px solid var(--hm-encre); font-size: var(--hm-t-petit); color: var(--hm-texte); }
.hm-sources h2 { margin: 0 0 8px; font-family: var(--hm-police); font-size: var(--hm-t-etiquette); letter-spacing: 0.14em; text-transform: uppercase; }
.hm-sources ol { margin: 0 0 14px; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.hm-sources ol a { overflow-wrap: anywhere; }
.hm-sources p { margin: 0; color: var(--hm-secondaire); }

@media (prefers-reduced-motion: reduce) {
	.hm-angle__img { transition: none !important; }
	.hm-angle:hover .hm-angle__img { transform: none !important; }
}